どせいたんさき。

ナスダヨー

ブラウザでできるプレゼンテーション impress.js を試してみた

先週のことになりますが大学のコロキウムの発表をブラウザ上で動くプレゼンテーションプログラム impress.js でやってみました.これはそのログです.サンプルはありません.なお,動かした環境は Ubuntu 10.04 on Thinkpad X200, Google Chrome (Version 20.0.* dev), CPU 2.26GHz x 2 , メモリ 2GB です.

なぜ impress.js を使うことにしたか

これまでは OpenOffice.org Impress (on Ubuntu)でスライドを作成して pdf でエクスポート, Acrobat Reader でプレゼンテーションをしていました.なぜ Impress で直接やらずにわざわざこんな面倒なことをしていたのかというと,どうやら Ubuntu 10.04 にインストールされているグラフィックドライバと Thinkpad X200 の相性(あるいは僕の設定)が悪いようでプロジェクターでうまく表示されたことがなかったためです.

ではなぜ今回 Acrobat Reader を使わなかったのかというと,前回の学会発表において Acrobat Reader を全画面モードに移行した瞬間にフリーズしてしまい再起動せざるを得なかったという事態を経験したため,もっと安定な(少なくともフリーズはしそうにない)プレゼンテーションツールを使えるようになりたいと考えたためです.

impress.js を採用した理由はだいたい以下のとおりです.

  • ブラウザ上で動く(Google Chrome を使用)
  • html & css3 ならだいたい知っている
  • なんとなく動作が軽そう

実際に使ってみた感覚

使ってみた感覚ですが,よっぽどでかい画像を使ったり,スライドを 20 枚同時表示なぞしなければ普通のプレゼンテーションツールより動作は軽いのではないかと感じました.プロジェクターでスクリーンに投影してみても CSS アニメーションやスライドのトランジションはスムーズに機能してくれました.

最大の欠点はスライドごとに pdf で出力してできないことだと思います.研究会などでたまに pdf で出してくださいという所があるので,そのリクエストがあるときには impress.js は使わないほうが良さそうです.

参考にした資料

入手先

https://github.com/bartaz/impress.js
たしか MIT ライセンスで配布されていたように思います.

使い方の一例

僕は git を使っていたので適当なディレクトリで

git clone git://github.com/bartaz/impress.js.git

として最新のプロジェクトをローカルにダウンロードしました.基本的にこのフォルダはいじらない方針です.Javascript プログラム本体である impress.js にはドキュメントを保存しているフォルダからシンボリックリンクを貼りました.これで常に最新版の impress.js を参照するようになります.あとはダウンロードしたフォルダに入っていたサンプルをいじってスライドを作成しました. css ファイルがかなり長かったのでスタイルのリセットなど根幹的な部分は base.css,スライドの基礎的な部分のスタイルは steps.css,個々のスライドの細かなデザインは style.css と分けてインクルードしました.

あと, impress.js とは関係ないですが使いたいフォントを確認するときには wordmark.it - helps you choose fonts! が大変役立ちました.どんなドキュメントを作るにしても役立ちそうなのでおすすめしておきます.

雑感まとめ

プレゼンテーション自体がうまくいったかどうかは別として,プレゼンテーションツールは大変スムーズに動いてくれました.満足です.問題は pdf へのエクスポートが必要な時ですね……各々のページを pdf でエクスポートして pdftk か何かでつなげるという方法は取れそうですがスライドが多くなった場合にはめんどくさそうですね.ヘタなことをせずにプレゼンテーション用のスライドと閲覧用の資料をきちんと作るほうがいいのかもしれません.まあ,ちょこっと関数を書けばキーボードショートカットを設定して任意のスライドや鳥瞰図にジャンプしたりできそうなのでカスタマイズ面でもだいぶ期待しています.慣れてきたらいろいろなことができそうですし多分これから使っていくと思います.またなにか面白いことがあればメモします.