タイトルは釣り気味ですが、実際に英語で紹介してくれている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もウェルカムです。
- http://search.cpan.org/dist/App-revealup/
- https://metacpan.org/pod/App::revealup
- https://github.com/yusukebe/App-revealup