くりにっき

ドリコムのプリキュアの人です

reveal.js + markdownでスライドを作る時は reveal-ck が便利だった

前置き

最近スライドを作る時は reveal.js を使ってmarkdownベースでスライドを作ることが多いです。

サンプル

markdownでスライドを作れるのは便利なのですが、効率よくスライドを作ろうとすると毎回下記のようなハックが必要でした

  1. markdownはhtml中に埋め込む必要があるのでmarkdownのシンタックスハイライトが効かないのが不便。そのためmarkdownだけを別ファイルにしてhtmlに埋め込むrakeタスクを作成
  2. https://github.com/sue445/omotesandorb-04/blob/gh-pages/Rakefile
  3. htmlを確認するのに毎回手動でrakeタスクを実行するのが嫌なのでファイルの変更を検知してguardでrakeタスクを自動実行
  4. https://github.com/sue445/omotesandorb-04/blob/gh-pages/Guardfile

毎回同じファイルを作るのもDRYじゃなうて嫌だなーと思ってたらたまたま reveal-ck をいうのを見つけました

reveal-ckって?

github.com

  1. gem install reveal-ck でインストール
  2. slides.md にスライドを書く
  3. reveal-ck generateslides/ にスライド一式を作成
  4. reveal-ck servelocalhost:10000 でサーバ実行
  5. ファイルが変更されるとhtml自動生成&ブラウザリロード

までやってくれる、まさに自分のためのgem !!!!!!!!11111111

ちなみにckはREADMEによると「construction kit(構築キット)」の略とのこと。

実際にreveal-ckで作ったスライド

【今月のgem】index_shotgunを作った #omotesandorb

https://github.com/sue445/omotesandorb-05

これ作った当時は celluloid との依存の関係でエラーになってたので celluloidのバージョンを固定する 必要があったけど、今はreveal-ckのバージョンが上がってるのでそういうことは必要ない模様

参考

github.com

他によかった機能

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 で空コミット作ってpush
  • git clone <git url> --branch gh-pages --single-branch ./slides でslides配下にgh-pagesのみをclone
  • reveal-ck generate でslides/ ファイルを作成
  • cd slides して commit & push したらそれがgh-pagesに反映される

とのこと。そういうやり方があったのかー!(目からウロコ)