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

記事下部の"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内で使い回す値は最初に先頭で定義してみた
    • 処理は細かく分けて先頭の初期化用関数で呼んでみた
  • 汎用性高めるために
  • 生産性高めるために