HTML/CSS/JS製の小さなスライドツール『kyubey』をつくったよ

説明

　タイトルはほとんど釣りです。奇跡も魔法もありません。最近よく勉強会をしているという話を前回のエントリで少ししましたが、プレゼンするのにいちいちKeynoteやPowerPointを開いていては骨が折れるし、参加出来なかったメンバーが後からWeb上でスライドを見たいということもあるので、自分でHTMLで手早くスライドを作るためにツールを作りました。jQueryやその他ライブラリが頑張って働いてくれたのでJS部分は実質100行弱のコード量でした。*1
kyubeyはjQueryを利用して作った小さなスライドツールです。作ったばかりなので機能はほとんどありませんが、小さいが故にコードの理解や拡張がしやすいかと思います。Githubに公開しているので良ければお使いください。ちなみに下記サンプルとソースコードを見て頂ければ大体理解出来るかと思います。機能要望があれば今後拡張していくつもりです。

サンプル(※良かったら全画面モードにして見てください)
ソースコード

主な機能

• キーバインド
  • ← next
  • → prev
  • ↑ first
  • ↓ last
• アニメーション
  • fadeIn
  • slideDown
• 簡易記法
  • はてな記法
  • textile記法
• シンタックスハイライト
• ページ番号

ダウンロード

gitを使っている人はこんな感じで。
$ git clone git://github.com/r7kamura/kyubey.git

gitを使いたい人はこんな感じで。
Gitの使い方をおさらいするよ - とある技術の備忘録

gitを使っていない人は下記からダウンロード。
https://nodeload.github.com/r7kamura/kyubey/zipball/master

使い方

上記手順でダウンロード後、keybey/sample.htmlをコピーして適宜書き換えていくのが速いかと思います。sectionタグに囲まれた部分が1枚のスライドになるため、sectionタグをガシガシと書いていくことになります。section内の文章は基本的に中心揃えで表示されますので、左寄せで表示したい場合はCSSで適宜指定してください。

シンタックスハイライト

シンタックスハイライト(コードのカラーリング)にはgoogle-code-prettifyを利用しており、preタグにprettyprintクラスを付ければコードがカラーリングされます。lang-ruby等のクラスを付与すると他言語対応が可能です。偶数行に背景色を付けるにはpreタグにlinenumsクラスを追加します。html等のコードを記述する場合、<や>を<や>に変換するのを忘れないでください。

簡易記法

現在のところ、はてな記法とtextile記法に対応しています。クラス名にhatena(またはtextile)を付けた要素の中は自動的にその記法の文字列として変換されます。簡易記法内では通常のHTMLタグは使えないので注意してください。はてな記法にはtext-hatena.jsを利用していますが、見出し/表組み/定義リスト/リスト/脚注記法に対応しているようです。

その他

何か質問等あればコメントいただければ回答いたします。

追記

2011/03/10 クリックで遷移するようにしてiPhone/iPad等に対応しました
2011/03/04 同一ページ内でのアニメーション(class="lazy"を付ける)に対応しました
2011/03/01 今見たら色々対応した影響でコード量当社比3割増してたので虚偽の情報が含まれております
2011/03/01 はてなFull記法をつくりました。textileFull記法に同じくh1タグで区切ってsectionに変換します
2011/02/28 textileFull記法をつくりました。複数スライドの最初から最後までを全てtextile記法で書けます
2011/02/27 textile記法に対応しました
2011/02/27 はてな記法に対応しました
2011/02/27 公開しました

今後はRedmineのWikiページやはてなダイアリーをスライド化出来るようにしてみようかなとか。

*1:実質100行くらいしか書いてねえからなー実質100行くらいしか