うまいぼうぶろぐ

linuxとhttpdとperlのメモ

reveal.js とreveal-ckでプレゼン資料作成

最近、パワーポイントからの脱却を目指してます。

パワーポイントにも良いところあるけど、個人的にはあまり凝った資料作成しないし、diff しやすいテキストベースのほうが良いかなと。

reveal.js

色々あるけど、一番簡単なのはhtml 内のdiv class="slides" 内のsectionにmarkdown書く。
sectionタグに1pageごと書くのがめんどくさいので---などを区切りにする方法。

  • --- がページの区切り
  • >>>が補足用などで縦方向のページ区切り (data-separotor-verticalで指定)
<section data-markdown 
       data-separator="^\n---$" 
       data-separator-vertical="^\n>>>$">
    <script type="text/template">
Page 1

---

Page 2-a

>>>

Page 2-b

>>>

Page 2-c

---

Page 3
  </script>
</section>

markdown を別ファイルから読み込む方法もあるけど、その場合はnode.js でlocalにwebserverを起動する必要がある。

reveal-ck

ruby製のブツ。一つのmarkdownファイルを元にreveal.js 用の静的を生成してくれる。
reveal-ck start するとlocalhost に10000番のweb serverが起動して、slides.md を編集すると自動的にreload&静的ファイルを再生性してくれるので、資料作成するときの確認が簡単。

$ gem install reveal-ck
$ echo '# hoge' > slides.md
$ reveal-ck generate
$ reveal-ck start

Github/Gitlab Pages、CIあたりで連携しておけば、slides.md をcommit & push したら公開用のhtmlが自動的に更新される、みたいなこともできるらしい、ええなー。