■ reveal.jsとは
HTMLでプレゼンテーション用のスライドを作成するツール。
■ 導入
本家からダウンロードする。
中身のindex.htmlがスライドとなる。
■ 基本構成
<!--↓ここから開始 -->
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<!--↓sectionごとに各スライドが切り替わる -->
<section data-markdown>
<!--↓scriptの中にスライドの内容をmarkdownで記載する -->
<script type="text/template">
スライド1
</script>
</section>
<section data-markdown>
<script type="text/template">
スライド2
</script>
</section>
</div>
■ スライドの属性
- data-markdown : スライドの内容を記載した外部markdownファイルのパスを指定
- data-separator : 同じsection内でのスライドを区切るときの区切り文字を正規表現で指定(次のスライドは横方向)
- data-separator-vertical : 同じsection内でのスライドを区切るときの区切り文字を正規表現で指定(次のスライドは縦方向)
- data-transition : スライド内コンテンツのアニメーションの指定
- data-background-transition : スライド自体のアニメーションを指定
- data-background : 背景色または、背景画像の指定
- data-separator-notes : スピーカーノートの区切り文字を正規表現で指定
<section data-markdown="md/test.md"
data-separator="---$"
data-separator-vertical=">>>$"
data-transition="zoom"
data-background-transition="slide"
data-background="green"
data-separator-notes="^Note:">
<script type="text/template">
</script>
</section>
markdownファイルは、下記のように書くと区切られる。
※markdownファイルを本体の HTML から切り離して外部ファイルとして参照する場合、作ったコンテンツをWeb サーバー上で動かさなければならないので、オフラインでは使用できない。
https://gist.github.com/masakielastic/9d15ee8f46488183f8c0
スライド1
---
スライド2
>>>
スライド3
■ スピーカーノート
発表者用のカンペなどを表示する機能。
<aside class="notes">
スピーカーノートウィンドウを's'で表示。
ここに書いた内容はスライドには表示されないないが、
スピーカーウィンドウ上に表示される。
</aside>
data-separator-notesを使用した場合は、
Note:
ここからスピーカーノートにできる
■ テーマの変更
下記のcssファイルを変更する。
<link rel="stylesheet" href="lib/css/zenburn.css">
■ 色の変更
<section data-markdown>
<script type="text/template">
# <span style="color:green">色</span>
<span style="color:red">タグ</span>を使って<span style="color:blue">色</span>を変える
</script>
</section>
■ スライドの操作
| コマンド | 内容 |
|---|---|
| o または ESC | スライド一覧(オーバービュー) |
| f | フルスクリーンモード |
| s | スライドノート表示 |
| Alt + | マウスクリックでズーム |
| .(ピリオド) | スライドをブラックアウト |