reveal.jsでF5で更新したときに表示位置をリセットさせない

はじめに

Markdownでさっとおしゃれなスライドを作りたいときによくreveal.jsを使っています．
index.htmlをエディタで編集しながらちょこちょこブラウザをF5で更新してレイアウトなどを確認しつつ書くことが多いのですが，この時に毎回表示位置が先頭のスライドに戻ってしまって面倒だったので回避方法を調べました．

解決策

index.htmlの末尾にあるReveal.initialize()の中でhistory: trueを指定すると解決です．これでF5で更新しても表示位置が先頭にリセットされません．

index.html

Reveal.initialize({
+   history: true,
    dependencies: [
        { src: 'plugin/markdown/marked.js' },
        { src: 'plugin/markdown/markdown.js' },

おまけ

せっかくなのでreveal.jsについて基本的な内容をまとめておきます．スライド作りでいつも時間がかかっている人は一度試してみてはどうでしょう．

reveal.jsとは

HTMLを使用してスライドを簡単に作成することができるフレームワークです。Markdownを使って書くこともできるので，手早く作成することができると思います．またスライドの切り替わりがアニメーションでかっこいいです．
デモページ

GitHubに公開されていますのでこちらからダウンロードしましょう．基本的にはindex.htmlを編集してスライドを作成します．
https://github.com/hakimel/reveal.js/releases

Markdownで記述

前述したとおりスライドの内容はMarkdownで書くことができます．<div class="slides">の中に<section data-markdown>と<textarea data-template>を追加して，その中にMarkdownでスライドの内容を記述します．自分は縦横のスライド切り替わりのセパレータに--と---を指定しています．

index.html

-<div class="reveal">
-    <div class="slides">
-        <section>Slide 1</section>
-        <section>Slide 2</section>
-    </div>
-</div>
+<div class="reveal">
+    <div class="slides">
+        <section data-markdown data-separator="^---$" data-separator-vertical="^--$">
+            <textarea data-template>
+                # hoge
+                ---
+                ## piyo
+                --
+                ## fuga
+            </textarea>
+        </section>
+    </div>
+</div>

テーマの変更

index.htmlで読み込むcssを変更します．css/theme/に何種類か用意されているので好きなものを使うといいです．

index.html

-<link rel="stylesheet" href="css/theme/black.css">
+<link rel="stylesheet" href="css/theme/sky.css">

また細かなところはお好みで修正してもいいかと思います．自分はフォントの変更とh1などの見出しタグが大文字に変換されるのを外したりしています．

sky.css

.reveal {
-   font-family: "Open Sans", sans-serif;
-   font-size: 40px;
+   font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "Open Sans", sans-serif;
+   font-size: 30px;
    font-weight: normal;
    color: #333; }

    font-weight: normal;
    line-height: 1.2;
    letter-spacing: -0.08em;
-   text-transform: uppercase;
    text-shadow: none;
    word-wrap: break-word; }

アニメーションの変更

スライド切り替え時のアニメーションも何種類か用意されておりReveal.initialize()で指定できます．

index.html

Reveal.initialize({
    history: true,
+   transition: 'convex', // none/fade/slide/convex/concave/zoom
    dependencies: [
        { src: 'plugin/markdown/marked.js' },
        { src: 'plugin/markdown/markdown.js' },

スライドをPDFに印刷

作ったスライドをPDFに出力したいときがあると思いますが，その時はURLの末尾に?print-pdfを追加するといいです．スライドが縦一列に並んで表示されるので，これをブラウザからPDFで印刷すればスライドごとにページが分かれて印刷できます．

デモページ（https://revealjs.com/?print-pdf）

GitHub Pagesで公開

reveal.jsを使って書いたスライドは，公開できる内容ならGitHub Pagesを使うと簡単にホスティングできて便利です．公開する方法は何種類かありますが，簡単なのはGitHubにリポジトリを作ってgh-pagesという名前のブランチでpushすると，それだけで静的なウェブページをホスティングすることができます．

https://www.google.com/search?q=github%20pages

おわりに

reveal.jsを使うとMarkdownで簡単にスライドを作ることができます．Markdownで書けるので画像やコードを入れるのも簡単に行えます．スライドをよく書く人はぜひ一度使ってみるといいかと思います．