Asciidocを使ってスライドを作ってみたくなった。
スライドを作るだけなら asciidoctor のリポジトリで管理されている asciidoctor.js と asciidoctor-revealjs を使うだけで済む。
npmパッケージを使用する場合は、公式の手順通りに上記パッケージをインストールしてコマンドを叩くだけだ。
今回はこれに加えてスライド作成時にライブリロードをしたかったので、そのあたりで試行錯誤したことを備忘録として書いておく。
なお、文章の体裁は崩壊してる。
やりたいこと
- Asciidoc でスライドを作成する
- スライド作成時にライブリロードしたい
使うもの
やったこと
まずはadocファイルの変更を検知してスライドのhtmlファイルに変換することを考えた。
ファイルの変更検知をどうするか適当に調べてみると、node.js標準の fs.watch とか、それをラップした Chokidar などが使えそうだった。
次にadocから生成されたhtmlのライブリロードについては、browser-sync というものを使ってみようとなった。
これによってファイル変更時のブラウザのライブリロードが実現できる。
つまり fs.watch とか Chokidar とかを別途入れて検知しなくても、browser-sync の監視対象のファイルをadocファイルにして、変更検知時にhtmlを生成させたうえでリロードできればいけるじゃんとなった。
ちなみに browser-sync の依存関係を追っていくと、chokidar を使っているようだった。
ドキュメントに chokidar 向けの設定に関して書かれていて気づいた。
browser-sync や asciidoctor-revealjs にはスクリプトで使用するためのインターフェースも用意されていたため、以下のようなスクリプトで実現できた。
browserSync.watch で ファイル名が .adoc で終わるファイルの変更を監視し、変更時は index.adoc をhtmlに変換したうえで browserSync.reload('index.html') でページのリロードを行っている。
このスクリプトの前提としては index.adoc がスライドのadocファイルのエントリポイントとなる。
ここをわざわざ変えたいことは自分はないだろうということでハードコードした。
後で気づいたけど、browser-sync はデフォだと change イベントしかリッスンしないので、if (event === 'change') ブロックいらないな。
スライド作成の環境整えて満足したのでスライド作成が進んでいない。
