今更感あるけどすんごい簡単に使えるreveal.jsのDockerイメージ作ったよ

すごいけど・・・

reveal.jsは素晴らしいプレゼンテーション作成ツール。
Markdownや簡単なHTMLできれいなスライドが作れるというものです。

シンプルにやるなら、index.htmlに全スライドを直書き。
長くなってくると嫌になってきます。
そこはちゃんと考慮されてて、スライドを別ファイルに定義して、index.htmlから参照するという方式もサポートされています。

けど分割しても、index.htmlにそのファイルパスを書かないといけません。
index.html書きたくない！Markdownだけ書きたい！

作った

Markdownだけ書いてればプレゼンテーションが作成できるDockerイメージ作りました。

必要なもの

Docker
docker-compose

※この例では簡単のためdocker-composeを使っていますが、docker単体でもOKです。

使い方

1. docker-compose.yml作成

こんな感じでdocker-compose.ymlを作ります。コピペでOK

version: "2"

services:
  revealjs:
    image: uphy/reveal.js:3.7.0
    ports:
      - "8000:8000"
      - "35729:35729"
    volumes:
      - "./data:/reveal.js/data"

2. デモデータ作成(省略可)

reveal.jsの設定等を含む設定ファイル、デモスライドを作成します。

$ docker-compose run --rm revealjs init

データは./dataに格納されています。
Markdownの他、htmlでもスライドが書けます。

書き方については、hakimel/reveal.jsを参照。
こんな感じに

タグだけ書けば作れます。

<section>
  <h2>foo</h2>
</section>

3. reveal.jsサーバー起動

$ docker-compose up -d

http://localhost:8000
にアクセスすると、プレゼンが表示されると思います。

4. スライド編集

お好きなエディタで、作られた./dataディレクトリのスライドファイルを編集してください。
サーバーがファイルを監視しているので、編集すると自動的にブラウザが更新されます。

5. 新規スライドページ追加

同様に、./dataディレクトリ以下にファイルを作成してください。
デフォルトでは./dataディレクトリ以下のすべてのhtml/mdファイルが対象となり、昇順にページが構成されます。

※config.ymlのslidesを変更することで、指定された順にすることもできます。

6. お片付け

使ったコンテナ削除しておきます。

$ docker-compose down

./dataディレクトリについては、docker-compose.ymlで永続化指定しているため、残ります。
reveal.js直で使うといらないファイルがプレゼンテーションごとにたくさん作られますけどコンテナなら必要なデータだけが残せますね！

実装について

reveal.jsに合わせてnode.js書くのがいいんだろうけど、Grunt全く分からないのでやめました。
reveal.jsとは別プロセスで、データディレクトリ(/reveal.js/data)を監視し、更新があったらindex.htmlを再生成するという荒業をGoでやってます。Goはこういうのさくっと書けて素敵。

参考

Docker イメージ: https://hub.docker.com/r/uphy/reveal.js/
ソース: https://github.com/uphy/revealjs-docker