スピーカービュー

reveal.js には、スライドごとのメモを別のブラウザウィンドウに表示できるスピーカーノートプラグインが付属しています。ノートウィンドウには、次に表示されるスライドのプレビューも表示されるため、ノートを作成していない場合でも役立ちます。キーボードの「S」キーを押すと、ノートウィンドウが開きます。

スピーカービューを開くと、スピーカータイマーが開始されます。タイマーをクリックすると、タイマーをリセットできます。

ノートは、以下に示すように、スライドに <aside> 要素を追加することで定義されます。 Markdown を使用してノートを作成する場合は、aside 要素に data-markdown 属性を追加できます。

または、スライドの `data-notes` 属性にノートを追加することもできます。例: <section data-notes="重要なこと"></section> のようになります。

ローカルで使用する場合、この機能を使用するには、reveal.js がローカルWebサーバーから実行されている必要があります。

<section>
  <h2>Some Slide</h2>

  <aside class="notes">
    Shhh, these are your private notes 📝
  </aside>
</section>

Markdown プラグインを使用している場合は、特別な区切り文字を使用してノートを追加できます

<section data-markdown="example.md" data-separator="^\n\n\n"
         data-separator-vertical="^\n\n" data-separator-notes="^Note:">
# Title
## Sub-title

Here is some content...

Note:
This will only display in the notes window.
</section>

スピーカーノートプラグインの追加

プラグインは reveal.js に既にバンドルされています。スピーカーノートプラグインを有効にするには、プラグインソースを `index.html` に追加し、reveal.js の初期化にプラグインを追加します。

<script src="plugin/notes/notes.js"></script>
<script>
  Reveal.initialize({
    plugins: [RevealNotes],
  });
</script>

スピーカーノートの共有と印刷

ノートは、スピーカービュー内でスピーカーにのみ表示されます。ノートを他の人と共有する場合は、`showNotes` 設定値を `true` に設定して reveal.js を初期化できます。ノートは、プレゼンテーションの下部に表示されます。

`showNotes` が有効になっている場合、PDF にエクスポートする際にノートも含まれます。デフォルトでは、ノートはスライドの上にあるボックスに印刷されます。スライドの後に別のページに印刷する場合は、`showNotes: "separate-page"` を設定します。

スピーカーノートの時計とタイマー

スピーカーノートウィンドウには、次の情報も表示されます。

  • プレゼンテーション開始からの経過時間。このセクションの上にマウスを置くと、タイマーリセットボタンが表示されます。
  • 現在の時刻
  • (オプション) プレゼンテーションの現在のペースが適切なタイミング(緑色で表示)であるかどうか、そうでない場合は、発表者がスピードアップ(赤色で表示)するか、スローダウン(青色で表示)できるかを示すペースタイマー。

ペースタイマーは、`Reveal` 設定ブロックで `defaultTiming` パラメーターを設定することで有効にできます。このパラメーターは、スライドあたりの秒数を指定します。120 は妥当な目安です。または、プレゼンテーションの全長を設定する `totalTime` (秒単位) を設定することで、タイマーを有効にすることもできます。両方の値が指定されている場合、`totalTime` が優先され、`defaultTiming` は無視されます。ベースラインのタイミング方法に関係なく、`data-timing` 属性 (秒単位) を設定することで、スライド `<section>` ごとにタイミングを指定することもできます。

サーバーサイドスピーカーノート

場合によっては、プレゼンテーションを行っているデバイスとは別のデバイスでノートを実行することが望ましい場合があります。 Node.js ベースのノートプラグインを使用すると、クライアントサイドの対応するものと同じノート定義を使用してこれを行うことができます。 https://github.com/reveal/notes-server を参照してください。