スライド作成にreveal.jsを使ってみた
プレゼンツールといえばPowerPointやKeynoteが有名かと思いますが、世の中には様々なプレゼンツールがあります。
今回、Markdownでスライド作成できないかと思って探しているとreveal.jsというものを見つけて使ってみると、思っていた以上に良かったです。

シンプルなスライドを短時間で作りたい
そもそも僕が今回このreveal.jsを見つけた経緯ですが、プレゼンの作成時間をなるべく短縮しつつもクオリティとシンプルさを維持したかったことがきっかけです。
僕は普段Keynoteを利用してスライドを作成するのですが、すラウドのデザインを考えたりアニメーションの設定をしたり、スライドのコンテンツの作成で時間がかかってしまっていました。
もちろん良いスライドを作成しようと思えば時間がかかるのは仕方ないのですが、毎回毎回それに必要以上に時間を取られていては練習に使える時間が減ってしまいます。
そこで、ブログと同じように「内容を考えること」に集中できるツールを探していました。
HTML/CSS/JavaScriptで動くreveal.js
そんなときに見つけたのがreveal.jsでした。
これはHTMLでスライドを作成してブラウザ上でプレゼンを実行できます。言ってしまえば、Webページやブログ記事を書くような感じでスライドを作成していきます。
どのようなスライドが作れるかは、以下のサンプル兼reveal.jsの説明を見てみるのが早いです。
ソースコードはGitHubに公開されているので、ダウンロードして誰でも利用できます。
Markdownで作成可能
今回reveal.jsを使った一番の理由はここで、スライドの内容をMarkdownで記述できます。
GitHubのREADME.mdを見れば書いていますが、フルに機能を使おうと思うとHTMLで記述する必要がありますが、Markdownでも記述することが可能です。
これの何が嬉しいのかと言うと、「HTMLで書くよりシンプルで編集も楽」ということです。
これのおかげで短期間でスライドを作成していくことができました。特に普段からMarkdownで文章を書く人にとってはただ書くだけでスライドになってしまうので、内容を考えることに専念できます。
ちなみにMarkdownで記述する場合npmが必要ですが、一度インストールしてしまえば後は特に何も必要ありません。
reveal.jsの便利な機能
本題は以上で終了ですが、他にも面白い機能がいくつかあったので2つほど紹介します。
4方向のスライド遷移
通常プレゼンスライドといえば、1直線的な遷移をするかと思います。それが、reveal.jsでは上下左右にスライドを遷移させることができます。
とはいってもイメージしづらいと思うので、以下のスクリーンショットを見てみて下さい(reveal.jsのスライドを開いてoを押すと表示されます)。

使い方はいろいろ考えられますが、例えば節ごとに列を作っておいて、横移動で節ごと飛ばしたりも出来ます。
スピーカーノート対応
これはPowerPointやKeynoteにもある機能ですが、reveal.jsにもスピーカーノート機能があります。
sを押すことで別タブとして起動でき、以下のことを確認できます。
- 現在のスライド
- 次のスライド
- 経過時間
- 現在時刻
- スピーカーノート

ちなみに、Markdownだと Note: と書いた行から下がスピーカーノートとして認識されます。
Macを買ってからはKeynoteメインでスライド作成をしていましたが、Markdownで作ってしまうのもありだな、と思いました。もともとMarkdownで書かれたきれいな文章が好きだったので今回それをスライド作成にも使えないかと思って探してみたのがきっかけなのですが、ちょっとしたスライドは今後これで作っていこうかと思います。

