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

1 Mins read
ライフハック

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

以前の記事

パワーポイント的なプレゼンツール調査まとめ | 橋本雄の日々の記録

サンプルを見る

The HTML presentation framework | reveal.js

Documentation and demos for the open source reveal.js HTML presentation framework.

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

ダウンロード

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

マークダウンで記載する

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

<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">
　　<!-- ここに記入 -->
    # タイトル
    ## サブタイトル
  </script>
</section>

背景を指定

文字だけでなく、背景を指定するには以下のようにします。通常のHTMLで記載する場合。

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

もちろん、Markdownでも記載できます。

<!-- .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" -->

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

<!-- .slide: data-state="last_page" -->

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

Reveal.addEventListener('last_page', function() {
  Reveal.slide(0);
});

映像ページは再生している間は自動でページが変わらないようにする {.wp-block-heading} 以下のようなページを用意しておきます

<!-- .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>