ブラウザを使うプレゼンテーションの作り方

勉強会などに行くと、たまにブラウザを使って発表をする方がいらっしゃると思います。
発表する人によって使っているプレゼンライブラリだったり、デザインだったりが違ったりだとかすると思うのですが、
それ以外にもどうやって作ってるのかなーというのがいつも疑問でした。ってか、今思うと勉強会なんだから直接聞けばいいのだけど。
自分も最近ブラウザを使ったプレゼン資料を作る機会があったので、メモがてらここに書いておこうかと。他の人たちがどうやって作ってるのかちょっと知りたいなーという思いも込めて。
まあ、私の場合はPowerPointもKeynoteも持ってないし買う気もないので仕方なしにHTMLで作ることになっただけなのだけど……
環境：OS X 10.8.3

使ったものなど

使ったものは以下の通りです。

nodebrew: node.jsとnpmをインストールするため
node.js: bowerとjadeを動作させるため
npm: bowerとjadeをインストールするため
bower: Twitter製Web用パッケージマネージャ（？）
jade: Haml風味なテンプレートエンジン
flowtime.js: プレゼンテーションフレームワーク

nodebrewはNoder御用達（……だといいな）のperlbrew, rvm/rbenv, pythonbrew/pythonz..の類いのものです。
同様のものにnaveとかnvmとかnとかあるけど、これが一番お気に入りかなーと。bash/zsh気にしなくても良いみたいですし。

node.jsとnpmは言わずもがな。bowerはWeb版（？）npmみたいなもの。

jadeはHaml的なテンプレートエンジンです。書式は似てるけど大分違ったかも。
zencoding-vimあるから、ポチポチがんばってHTML書くかーと思ってやってみたら思いのほか面倒だったので、
jadeを使うことにしました。監視機能もあるので保存すると自動的に変換してくれて便利でした。

flowtime.jsは二次元のプレゼンテーションが作れる（上下左右に移動できる）ことが特徴のフレームワークです。
ただし、対応ブラウザが割と新しめのものだけなので自分のPCで無いなど、ブラウザのバージョンが指定できない場合はちょっと危ないかもです。
まあ、プレゼンテーションフレームワークを他のものに代えれば大体応用はできるのかと思いますが。

環境構築

nodebrewやnode.js関連のものは私が触る環境はほぼ必ずインストールされてるので本当はこの辺はしてないのだけど……

nodebrewのインストール

curlなら以下のように。

$ curl -L git.io/nodebrew | perl - setup

wgetなら多分、以下のように。

$ wget -qO - git.io/nodebrew | perl - setup

パスを通す

$ export PATH=$HOME/.nodebrew/current/bin:$PATH
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bashrc

これで多分nodebrewが使えるようになりました。

node.jsとnpmのインストール

次にnode.jsとnpmのインストールを。

$ nodebrew install-binary 0.10.1 # 0.8.22とかの方が良いのかなあ
# ちょっと待つ
$ nodebrew use 0.10.1
$ node --version
v0.10.1
$ npm --version
1.2.15

nodeとnpmで--versionを実行してバージョン番号が表示されればOKです。

bowerとjadeのインストール

次にbowerとjadeをインストールします。jadeはグローバルインストールしていますが、本当はローカルインストールしました。
まあ大して変わらないのでお好きな方をどうぞというかなんというか。

$ npm install -g bower jade
$ bower --version
0.8.5
$ jade --version
0.28.2

nodeとnpmのときと同じく、bowerとjadeで--versionを実行してバージョン番号が表示されればOKです。
ローカルインストールする場合は-gを指定せずにインストールします。

flowtime.jsのインストール

bowerを入れたので、ラクチンインストールです。

$ mkdir presentation
$ cd presentation
$ bower install http://github.com/marcolago/flowtime.js.git

これでcomponentsディレクトリが生成されて、サブディレクトリにflowtime.jsが配置されるかと。

基本的なテンプレートを書く

何か適当なテキストエディタでjadeのテンプレートを書きます。

index.jade

!!! 5
html(lang="ja")
  head
    meta(charset="utf-8")
    title タイトル
    link(rel="stylesheet",href="./components/flowtime.js/assets/reset.css")
    link(rel="stylesheet",href="./components/flowtime.js/css/flowtime.css")
    link(rel="stylesheet",href="./components/flowtime.js/css/themes/default.css")
    link(rel="stylesheet",href="./components/flowtime.js/assets/prism.css")
  body
    .flowtime
  script(src="./components/flowtime.js/js/brav1toolbox.js")
  script(src="./components/flowtime.js/js/flowtime.min.js")
  script(src="./components/flowtime.js/js/prism.js")
  script
    Flowtime.showProgress(true);
    Flowtime.parallaxInPx(true);
    Flowtime.start();

これでとりあえず良さそうかなーと。

おまけとして、scriptにこれを追加したりしましたが。

    document.onkeypress = function(event) {
      // enter
      if ((event.keyCode || event.which) === 13) {
        (event.shiftKey) ? Flowtime.prev(false) : Flowtime.next(false);
      }
    };

flowtime.jsではカーソルキーで好きな方向に移動できる（普通は下キーを押して進める）のですが、キーが小さいので他のキーを押してしまい、目的のページでないところに移動してしまうことがあったりしました。
なのでEnterとShift-Enterでいい感じに動いてくれるようにしたスクリプトです。
ただしEscで全体表示にした後Enterを押すとページがずれます……

スライドの内容を書く

これで環境の構築ができたのであとはバシバシ書いていくだけです。

$ jade -P -w -O ./ ./index.jade

としておくとindex.jadeを保存するたびに自動的にindex.htmlを更新してくれます。

コマンドを入力するのが面倒な場合は以下のファイルを作って、

package.json

{
  "name": "presentation",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "jade -P -w -O ./ ./index.jade"
  }
}

$ npm start

で実行するようにしたりとかできます。
jadeをローカルインストールした場合は

    "start": "./node_modules/.bin/jade -P -w -O ./ ./index.jade"

ですなー。

index.jadeの.flowtimeの下に以下のように書いていくとページが追加できます。

    .flowtime
      .ft-section
        .ft-page
          h1 最初に表示される左上のページ
        .ft-page
          h1 左下のページ
      .ft-section
        .ft-page
          h1 右上のページ
        .ft-page
          h1 右下のページ
      .ft-section
        .ft-page
          p.ft-fragment.step 隠
          p.ft-fragment.step れ
          p.ft-fragment.step る
          p.ft-fragment.step よ
        .ft-page
          p.ft-fragment.shy 消
          p.ft-fragment.shy え
          p.ft-fragment.shy る
          p.ft-fragment.shy よ

だいたい見ればわかる感じだと思います。
あと位置合わせとかはCSSを駆使してごにょごにょしたりすれば良いと思います。
これでfile:///パス/index.htmlを開いて、見栄えを確認しつつindex.jadeを修正・保存して〜というのを繰り返せばスライドが出来上がるんじゃないでしょうか。

というスライド作成のメモでした。