はてなブログの記事をスライド表示するやつ作った

記事下部の"Slide"をクリックすればスライド表示できる。

これは何？

  • はてなブログの記事をスライド表示するやつ

どこにあるの？

どう使うの？

  • サイドバーにscript要素で追加して使う
  • 見出し記法(*)ごとに1枚のスライドになる
  • 見出し記法を使っているエントリに開始ボタンが付く

なぜ作ったの？

  • JavaScriptパターン読んだので何となく
  • スライドすぐ作れると良さそう

どういうときに使うの？

  • 研究室の週1のミーティングで使っているよ

工夫したところは？

  • ブログのデザインを極力そのまま利用する
  • 下にはみ出た場合もスクロールできる
  • スライドに関係無い要素を非表示にしていく実装とか
hideOutside: function() { this.sections.siblings().not(this.selectors.section).hide(); this.sections.parentsUntil().each(function() { $(this) .css('position', 'static') .siblings().hide(); }); },

他に何か言うことは？

  • 見た目はCSSで弄れるよ
.slide .entry { font-size: 3.0em } .slide .entry-content { font-size: 1.0em } .slide pre { font-size: 0.7em }

今後の展望

  • スライド用CSSを整えたい
  • URLに#slide付けてたらすぐスライド表示したい
  • ページ数表示つけたい
  • 次/前へボタンつけたい
    • マウス環境とかiPadとかのために欲しい
  • 閉じるボタン / Escキーで閉じる

JavaScriptで

  • 可読性高めるために
    • コードの先頭部分読めば大体分かるようにしてみた
    • Object内で使い回す値は最初に先頭で定義してみた
    • 処理は細かく分けて先頭の初期化用関数で呼んでみた
  • 汎用性高めるために
    • 機能固有の値(CSSセレクタとか)は極力括り出してみた
  • 生産性高めるために
    • jslint.vim 使ってみた
    • snipMate.vim 使ってみた