以前に、プレゼンツール調査まとめ
で取り上げたReveal.jsですが、実際に使ってみましていろいろと詳しい使い方が分かったので、まとめます。
何より、子供向けにプレゼン資料を作成するときにルビをふる作業がパワーポイントを使うケースと比べ格段に楽になります。ぜひ活用下さい！
サンプルを見る
https://revealjs.com
ここにすべてのケースが見れますので、確認しておくと良いかと思います。
基本は、HTMLですので、HTMLでできることは何らかの方法で実現可能です。ルビ振り、音声再生、動画再生、youtube埋め込み、…..など
ちなみにプレゼンするときは全画面表示にすることでHTMLでやっていること自体も隠せます
ダウンロード
https://github.com/hakimel/reveal.js からダウンロードします。一旦ダウンロードしてしまえば通常の利用にはインターネットにつなぐ必要はありません。
マークダウンで記載する
通常、以下の タグ内に記入します
ですが、ここはMarkdown形式で記入したいところですので、上記のsectionタグ部分を例えば以下のようにします。これで、—を行頭に書くことでスライドの区切りとなります。»>を行頭に書くとバーチカルの区切りとなります。
背景を指定
文字だけでなく、背景を指定するには以下のようにします。通常のHTMLで記載する場合と、Markdownでの場合を両方書いておきます。
展示会場などでずっと表示し続ける
自動ページめくりや、最終ページに行ったら最初のページに戻すことも簡単です。
まず、一番うしろに以下のような記述がある部分があります。
デフォルトだと、抜けている部分も多くあるかと思います。
この中で、 autoSlide:””, という部分を加えると自動的にページめくりがなされます。単位はミリ秒ですので、4000とすると4秒となります。
また、ページによって長く表示させたいページがあるかと思います。この場合は、ページの属性に以下のように設定します。
もしくは
最終ページには以下を入れておき
以下のようなプログラムをscriptタグに記載しておけば、最終ページに行ったら、トップから表示してくれます。これで自動スライドショーが可能です
映像ページは再生している間は自動でページが変わらないようにする {.wp-block-heading} 以下のようなページを用意しておきます
これについて、以下のスクリプトで制御します