Markdown × slideshow × guard で快適プレゼン資料作成
社内セミナー用にプレゼン資料を作成する必要があるのだけど、markdownでサクッと書きたかったので環境を整えてみた。
markdownでプレゼン資料を作成する方法がイロイロあって悩んだけど、シンタックスハイライトが使えるのと、テンプレートが豊富なのでslideshowを使うことにした。
slideshowでプレゼン資料作成
markdownやtextileからスライドを作成できるgem。
テンプレートも色々ある。
※テンプレートのリストには載ってないけど、impress.jsとかも使える
今回はslideshow-showerというテンプレートを使用した。
- インストール
$ gem install slideshow
- テンプレートのインストール
$ slideshow install shower
- テンプレートの適用、ビルド
$ slideshow build index.md -t shower
ファイルの先頭でyaml形式でheaderを書いてあげるとタイトルや作成者などを設定することができる。
※テンプレートにより設定出来る要素が異なる
% header author: Your Name Here email: Your Email Here company: Your Company Here title: Your Title Here subtitle: Your Subtitle Here footer: Your Footer Here subfooter: Your Subfooter Here % slide # ほげ!
ちなみに、showerはtitleとauthorを設定できる。
が、表紙の背景画像の変更が出来なくて不便だったのでheaderで指定出来るようにした。*1
cover: hoge.jpg
guardでビルド自動化
slideshowでmarkdownからプレゼン資料を作れるようになったのは良いけど、修正する度にいちいちビルドを行うのが面倒だったのでguardを使うことにした。
- インストール
$ gem install guard
$ gem install guard-shell
guard-shellはファイルの変更を検知してビルドコマンドを実行するために利用。
Guardfileには以下を記述した。
guard 'shell' do watch(/index.md/) {|m| `slideshow b #{m[0]} -t shower ` } end
これでguardを起動していればファイルの変更を検知して自動でビルドされるようになった。
guardでブラウザの自動更新
ここまでくるとブラウザのリロードも自動化したくなってきたので、LiveReloadを使って実現してみた。
- インストール
$ gem install guard-livereload
Chrome ウェブストアからLiveReloadをインストール https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
Guardfileに以下を追記。(監視対象はmarkdownではなくhtml)
guard 'livereload' do watch(%r{index.html}) end
guardを起動しスライドのページでChrome拡張のLiveReloadを有効にする(ボタンをポチ)と、ファイルの変更を検知してブラウザの更新が行われるようになる。
うまくいっていればguardが - INFO - Browser connected.
とログを吐くはず。
まとめ
これで快適にプレゼン資料が書ける!(設定しててあまり進んでない)
追記
slideshowのテンプレートの showerにプルリク送って取り込まれた。 表紙の画像とhtmlのlang属性を自分で設定できるようにしてある。
参考
*1:tenten0213/slideshow-shower 微妙な修正なのでプルリク送るか悩んでる → 送った