対策、対応できなくはないけどとてつもなく面倒くさいのでやらない。
色々調べてにっちもさっちもなのでメモ。
revealjsパッケージやrmarkdownパッケージ、その大本のPandocの仕様として、htmlなどのファイル形式に出力するときに使用するファイル、例えば画像などをhtmlファイル中に埋め込んで単一のファイルとしてリリースできるようにするオプション、--self-containedがある。
これは確かに便利なのだけど、reveal.jsのpluginを使う上ではうまく動かず、なんとかしようと思ったけど面倒すぎるので対応しない理由を書いておきます。
base64エンコーディングされる
--self-contained指定したときの出力ファイルを見ればわかるように、画像などの外部データがよくわからない記号列によってあらわされている。これはbase64でエンコードされているデータで、これは適当にbase64 デコードなどで検索して出てくるデコードするサイトに入れてデコードすれば元のデータが見える。データの切り出しの位置に注意。最後の==は不要だったりとか。
これは結局htmlファイル中に対象のファイルを取り込むことになるが、画像のようなバイナリデータではなくてjsなどのテキストデータは復号すれば元のファイルが読める。そのためか知らないが、reveal.jsのファイルは圧縮・難読化されたものを使用するようになっている。pluginなどは元のファイルもあるので、コードの理解をするならそっちを読むべし。
話がそれてきた。
結局、htmlファイル中にjsなどのファイルを取り込むということは、そのjsファイル中で外部のファイルを指示していたり、取り込むような動作をしている場合はファイルが見えなくなるので期待する動作にならない、というのが問題となる。これはブラウザで開発モードにしてコンソールを出すとエラーが表示されているはずで、そこにそれらしきエラーメッセージがあるだろう。こんな風に。
解決策としては、データを取り込むだけでよければ最終的にすべてのファイルがhtmlファイル中にいればよいであろう、ということで無理やり別の場所でcssファイルなどを取り込んでおく。
<link rel="stylesheet" href="aaa_files/reveal.js-4.1.2/plugin/menu/menu.css"> <link rel="stylesheet" href="aaa_files/reveal.js-4.1.2/plugin/menu/font-awesome/css/all.css">
ただし、元のjsで読みに行くcssファイルは存在しないのだからえらーはのこるし、その場所にたまたま同名のファイルがあるとそれを読みに行くので意図した挙動・表示にならない。
ということで、根治するにはplugin中のデータ取り込みの記述を切り出し、html中で別途指定する運用にしないといけないがそれではpluginをASISで使用できず、メンテナンスコストが爆増してしまう。
という諸々を踏まえ、fork版revealjsではpluginを使用する場合は--self-contained=falseをマスト指定とする。内部的に常にfalseにしていても良いかもしれないが、standaloneで使いたいシーンはあるだろうからそれはしない方が良さそう。
元々のバージョンもplugin使用時はfalse指定ねってことになってたようなので、方針踏襲ということになりますね。
yamlでの指定はこんな感じで。
output: revealjs::revealjs_presentation: self_contained: false
