初期化

reveal.js の最も一般的なユースケースは、ビューポート全体をカバーする単一のプレゼンテーションを持つことです。4.0 以降では、同じページ上で複数のプレゼンテーションを並行して実行することと、ライブラリをES モジュールとして含めることもサポートしています。

ページ上に単一のプレゼンテーションしかない場合は、グローバルな Reveal オブジェクトを使用して reveal.js を初期化することをお勧めします。Reveal.initialize メソッドは、reveal.js の設定オブジェクトを1つの引数として受け取ります。

<script src="dist/reveal.js"></script>
<script>
  Reveal.initialize({ transition: 'none' });
</script>

initialize メソッドは、プレゼンテーションの準備が整い、API を介して操作できるようになるとすぐに解決される Promise を返します。

Reveal.initialize().then(() => {
  // reveal.js is ready
});

複数のプレゼンテーション 4.0.0

同じページ上に複数のプレゼンテーションを並べて実行するには、Reveal クラスのインスタンスを作成します。Reveal コンストラクタは、プレゼンテーションの .reveal HTML 要素のルートと、オプションの設定オブジェクトの2つの引数を受け取ります。

embedded 設定オプションを true に設定する必要があることにも注意してください。このフラグにより、プレゼンテーションはブラウザのビューポートではなく、.reveal ルート要素のサイズに従ってサイズが調整されます。表示させるには、各 .reveal .deck* 要素の width と height CSS プロパティを手動で定義する必要があります。

デフォルトでは、reveal.js はドキュメント内のすべてのキーボードイベントをキャプチャします。埋め込みプレゼンテーションの場合、視聴者がプレゼンテーションにフォーカスしたときのみキーボードイベントがキャプチャされるように、keyboardCondition: 'focused' で初期化することをお勧めします。

<div class="reveal deck1">...</div>
<div class="reveal deck2">...</div>

<script src="dist/reveal.js"></script>
<script>
  let deck1 = new Reveal(document.querySelector('.deck1'), {
    embedded: true,
    keyboardCondition: 'focused', // only react to keys when focused
  });
  deck1.initialize();

  let deck2 = new Reveal(document.querySelector('.deck2'), {
    embedded: true,
  });
  deck2.initialize();
</script>

ES モジュール 4.0.0

ユースケースに応じて、2つの JavaScript バンドルを提供しています。デフォルトのプレゼンテーションボイラープレートは、幅広いクロスブラウザサポート（ES5）を持ち、Reveal をグローバルウィンドウに公開する（UMD）dist/reveal.js を使用しています。

2番目のバンドルは dist/reveal.esm.js で、reveal.js を ES モジュールとしてインポートすることを可能にします。このバージョンは、<script type="module"> を使用してブラウザで直接使用することも、独自のビルドプロセスでバンドルすることもできます。

reveal.js の ES モジュールバージョンと Markdown プラグインをインポートして初期化する方法を次に示します。

<script type="module">
  import Reveal from 'dist/reveal.esm.js';
  import Markdown from 'plugin/markdown/markdown.esm.js';
  Reveal.initialize({
    plugins: [Markdown],
  });
</script>

npm から reveal.js をインストールしてバンドルする場合は、次を使用できます。

import Reveal from 'reveal.js';
Reveal.initialize();

reveal.js の初期化解除 4.3.0

reveal.js の初期化を解除する場合は、destroy API メソッドを使用できます。これにより、フレームワークが DOM に行ったすべての変更が元に戻り、すべてのイベントリスナーが削除され、すべてのプラグインが登録解除/破棄されます。

Reveal.destroy();