前置き
最近スライドを作る時は reveal.js を使ってmarkdownベースでスライドを作ることが多いです。
サンプル
markdownでスライドを作れるのは便利なのですが、効率よくスライドを作ろうとすると毎回下記のようなハックが必要でした
- markdownはhtml中に埋め込む必要があるのでmarkdownのシンタックスハイライトが効かないのが不便。そのためmarkdownだけを別ファイルにしてhtmlに埋め込むrakeタスクを作成
- https://github.com/sue445/omotesandorb-04/blob/gh-pages/Rakefile
- htmlを確認するのに毎回手動でrakeタスクを実行するのが嫌なのでファイルの変更を検知してguardでrakeタスクを自動実行
- https://github.com/sue445/omotesandorb-04/blob/gh-pages/Guardfile
毎回同じファイルを作るのもDRYじゃなうて嫌だなーと思ってたらたまたま reveal-ck をいうのを見つけました
reveal-ckって?
gem install reveal-ck
でインストールslides.md
にスライドを書くreveal-ck generate
でslides/
にスライド一式を作成reveal-ck serve
で localhost:10000 でサーバ実行- ファイルが変更されるとhtml自動生成&ブラウザリロード
までやってくれる、まさに自分のためのgem !!!!!!!!11111111
ちなみにckはREADMEによると「construction kit(構築キット)」の略とのこと。
実際にreveal-ckで作ったスライド
【今月のgem】index_shotgunを作った #omotesandorb
https://github.com/sue445/omotesandorb-05
これ作った当時は celluloid との依存の関係でエラーになってたので celluloidのバージョンを固定する 必要があったけど、今はreveal-ckのバージョンが上がってるのでそういうことは必要ない模様
参考
他によかった機能
reveal-ck のREADMEの冒頭にもいろいろ書いていますが、個人的にはgithubのemoji対応が一番よかったです
分かりづらかった機能とかハマったところとか
どっかに書いてるんだけど初見で見つからなかった機能
titleを変更したい時にはconfig.ymlを作る
デフォルトだとhtmlのtitleタグの中身が「Slides」になって、これをどうやって変更すればいいかソースを調べてたら config.yml で設定する模様
https://github.com/jedcn/reveal-ck/blob/v3.3.0/lib/reveal-ck/config.rb
とりあえずこういうファイルを作っておけばよいかと。
https://github.com/sue445/omotesandorb-05/blob/master/config.yml
title: "タイトル" author: "自分の名前" theme: "sky"
reveal.jsで使えるテーマは http://lab.hakim.se/reveal-js/#/themes を参照
github pagesに公開する時の手順
詳しいことは https://github.com/jedcn/reveal-ck/wiki/Publishing-Slides にだいたい書いてますがかいつまんで書くと
- masterブランチの .gitignore に slides/ を登録
git checkout --orphan gh-pages
で親commitがないgh-pagesブランチを作成。git commit --allow-empty
で空コミット作ってpushgit clone <git url> --branch gh-pages --single-branch ./slides
でslides配下にgh-pagesのみをclonereveal-ck generate
でslides/ ファイルを作成cd slides
して commit & push したらそれがgh-pagesに反映される
とのこと。そういうやり方があったのかー!(目からウロコ)