タイトルは釣り気味ですが、実際に英語で紹介してくれているBlog記事「Create professional slideshows in seconds with App::revealup」を参考にタイトル付けました。最近CPANライブラリとしてつくって、Yokohama.pm#11とGotanda.pm#01で話した便利ツール「 App::revealup 」についてです。以下はそのBlog記事のスクショ！
勉強会などで用いるスライドなんだけど、ちょっとした資料の場合、Keynoteとかパワポを使いたくないってケースが結構あります。ただそれだといくつか問題があって
- 専用のソフトを起動するのがだるい
- 結果的にバイナリファイルだから
diffがとれない - なのでレポジトリに入れることも含め管理しにくい
- 手に馴染むエディタを使いたい
- 簡単なプレゼンだと「タイトルと箇条書きと画像くらいでしょ？」
と思うところがありました。そこで個人的には記法にも慣れている Markdown 形式で内容を書いて、スライドショーが出来たらいいな〜と思い、探しだしたのが reveal.js です。
このreveal.jsはJS側でMarkdownのパースを行うのですが、それが賢くて、かつ、見た目がクール。表示に関する様々なコントロールも出来ます。外部のMarkdownファイルを読みこむことも可能なのがポイントですね。
通常、利用するにはGitHubのレポジトリページから clone するなりダウンロードするなりでJSやCSSを含むライブラリを取ってきてHTMLの雛形をカスタマイズします。
しかしちょいとこれを利用するには、上記の通り、ライブラリファイル群を取ってこなくてはいけないし、Markdownファイルを参照させるにはローカルホスト上などにHTTPサーバを立てなくてはいけなく面倒。そこで今回つくったのが App::revealup です。
App::revealupはreveal.jsのライブラリを内包していて、HTMLやJS/CSSなどの適応をヨシナにやってくれるHTTPサーバを立てる機能があります。例えば slide.md というスライド向けのMarkdownファイルがあったとして付属する revealup コマンドを使えばreveal.jsが適応されたスライドショーがlocalhostで立ちます。
$ revealup serve slide.md
お気に入りのブラウザで http://localhost:5000 にアクセスすればスライドショーが見れるでしょう。
ちなみに以下がスライド用のMarkdownのサンプルです。
# 大見出し '---' と書くことで横方向へのページ遷移が可能です --- ## 中見出し '___' と書くことで縦方向へのページ遷移が可能です ___ ### 小見出し 以下がリスト表現 * アイテム 1 * アイテム 2 * アイテム 3
また、いくつかオプションがあって「5001番ポート」で立ち上げて、reveal.jsにデフォルトで用意されているテーマ「night」を使い、切り替えのエフェクトとして「zoom」を使う場合はこんな具合。
$ revealup serve -p 5001 --theme night --transition zoom slide.md
さらにオリジナルのCSSテーマを適応することも出来ます。上記のテーマ「night」をベースに original.css を生成しそれを参照させるためには
$ revealup them generate --base night --output original.css $ emacs original.css $ revealup serve --theme original.css slide.md
というような工程を経ます。
このApp::revealup。 イートマイドックフード しているのですが無駄なセットアップ無しにMarkdown書くだけでスライド準備出来ちゃうし、見た目カスタマイズしたければ雛形からCSS自分で書けばいいんで相当便利っすよ！よろしければ使ってみて下さい。 patch も issue もウェルカムです。