reveal.jsプレゼンツール徹底活用術

以前に、プレゼンツール調査まとめで取り上げたReveal.jsですが、実際に使ってみましていろいろと詳しい使い方が分かったので、まとめます。
何より、子供向けにプレゼン資料を作成するときにルビをふる作業がパワーポイントを使うケースと比べ格段に楽になります。ぜひ活用下さい！

サンプルを見る

https://revealjs.com
ここにすべてのケースが見れますので、確認しておくと良いかと思います。
基本は、HTMLですので、HTMLでできることは何らかの方法で実現可能です。ルビ振り、音声再生、動画再生、youtube埋め込み、…..など
ちなみにプレゼンするときは全画面表示にすることでHTMLでやっていること自体も隠せます

ダウンロード

https://github.com/hakimel/reveal.jsからダウンロードします。一旦ダウンロードしてしまえば通常の利用にはインターネットにつなぐ必要はありません。

マークダウンで記載する

通常、以下の <section> タグ内に記入します

<body>
  <div class="reveal">
    <div class="slides">
      <section>
      <!-- ここに記入  -->
      </section>
    </div>
  </div>
</body>

ですが、ここはMarkdown形式で記入したいところですので、上記のsectionタグ部分を例えば以下のようにします。これで、—を行頭に書くことでスライドの区切りとなります。>>>を行頭に書くとバーチカルの区切りとなります。

<section data-markdown="" 
         data-separator="^---$"  
         data-separator-vertical="^\n>>>$">
  <script type="text/template">
　　<!-- ここに記入 -->
    # タイトル
    ## サブタイトル
      </section>
    </script>
  </section>

背景を指定

文字だけでなく、背景を指定するには以下のようにします。通常のHTMLで記載する場合と、Markdownでの場合を両方書いておきます。

<section 
  data-background-image="image/example.jpg"
  data-background-size="100%" >
  <!-- ここにページ内容 -->
</section>

<!-- .slide: data-background-image="image/entrance.png" -->
<!-- .slide: data-background-size="100%" -->

展示会場などでずっと表示し続ける

自動ページめくりや、最終ページに行ったら最初のページに戻すことも簡単です。
まず、一番うしろに以下のような記述がある部分があります。
デフォルトだと、抜けている部分も多くあるかと思います。

		<script>
			// More info about config & dependencies:
			// - https://github.com/hakimel/reveal.js#configuration
			// - https://github.com/hakimel/reveal.js#dependencies
			Reveal.initialize({
				dependencies: [
					{ src: 'plugin/markdown/marked.js' },
					{ src: 'plugin/markdown/new_markdown.js' },
					{ src: 'plugin/notes/notes.js', async: true },
					{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
				],
				history: true,
				width: "100%",
				height: "100%",
				autoSlide: 4000,
				autoSlideStoppable: false
			});
		</script>

この中で、 autoSlide:””, という部分を加えると自動的にページめくりがなされます。単位はミリ秒ですので、4000とすると4秒となります。
また、ページによって長く表示させたいページがあるかと思います。この場合は、ページの属性に以下のように設定します。

<section data-autoslide="2000">

もしくは

<!-- .slide:  data-autoslide="2000" -->

最終ページには以下を入れておき

以下のようなプログラムをscriptタグに記載しておけば、最終ページに行ったら、トップから表示してくれます。これで自動スライドショーが可能です

Reveal.addEventListener('last_page', function() {

                Reveal.slide(0);

});

映像ページは再生している間は自動でページが変わらないようにする

以下のようなページを用意しておきます

<!-- .slide: data-autoslide="0" -->
<!-- .slide: data-state="videopage" -->
<video id="video_v" src="movie/sample.mp4" controls="controls" width="300" height="150"></video>

これについて、以下のスクリプトで制御します

<script>
            Reveal.addEventListener('videopage', function() {
                var v=document.getElementById("video_v");
                v.currentTime=0;
                v.play();
                v.onended = function(e){
                    Reveal.next();
                };
            } );
</script>