reveal.jsでスライドを作るときに更新するたびに最初のスライドに戻されない方法
はじめてのカンファレンス、トーク採択で30分セッションをさせてもらうことになり、スライドを作っています。 30分スライドとしたら1枚30秒くらい喋るとしても60枚はスライドを作ることになり、デザインが大変。
ということで、普段はkeynoteを使っていたのですが、reveal.jsに乗り換えました。 hakimel/reveal.js: The HTML Presentation Framework
普段使い慣れてるCSSでインブラウザデザインができるので、WEBデザイナーであればkeynote使うよりも楽かもしれません。 CSS側をフレームワーク化すれば、レイアウトも画一化できるし。
cloneしてyarnして必要なものを揃えたら、yarn run startしてライブリローディングしながら編集作業を行うのですが、いちいちリロードのたびに最初のスライドに戻される。世の中の人は毎回こんなことしてんのか？嘘だろ？と思い、reveal.jsを使った形跡のあるリポジトリを見ていると、僕のファイルとの違いを発見。
Reveal.initialize({
history: true,
dependencies: [{
src: 'plugin/markdown/marked.js'
},
{
src: 'plugin/markdown/markdown.js'
},
{
src: 'plugin/notes/notes.js',
async: true
},
{
src: 'plugin/highlight/highlight.js',
async: true,
callback: function() {
hljs.initHighlightingOnLoad();
}
}
]
});
このhistory: true,を記述するのがキモでした。
reveal.jsは、1つのHTMLファイルに全スライドをDOM要素として生成したあとにJavaScriptで出し入れしてスライドっぽく見せています。 なので、リロードがかかると初期状態に戻る＝最初のスライドに戻されるというわけです。
しかし、上記の記述をすることで、スライドごとに固有のURLが発行されます。 なので、リロードしてもそのスライドのURLが更新されるので、最初のページに戻されません。
SPAでも、実際はJSがレンダリングしてるだけだけれど、それぞれの状態にURLを発行している、みたいなことをしているので、同じ原理ですね。
もちろんドキュメントには
// Push each slide change to the browser history
と書いているのですが、個別URLの発行というワードに結び付けられていなかった自分がいたりして、勉強不足でした。 スライド作りも佳境に迫ったところでこれに気づいてしまったのでもっと早く知りたかった感はありますが、ブラッシュアップに役立てたいと思います。
あと、Configurationはちゃんと読みましょう。ぐぐって情報があつまらない理由のほとんどは「そこに書いてあるから」だったりします。
誰かの役にたてば幸いです。
