インストール

reveal.js をインストールする方法は、ユースケースと技術的な経験に応じて3つあります。

  1. 基本的なセットアップは、最も簡単に始められる方法です。ビルドツールを設定する必要はありません。
  2. 完全なセットアップでは、reveal.jsのソースコードに変更を加えるために必要なビルドツールにアクセスできます。外部Markdownファイルをロードしたい場合に必要となるWebサーバーが含まれています(基本的なセットアップと、任意のローカルWebサーバーの組み合わせでも動作します)。
  3. reveal.jsをプロジェクトの依存関係として使用したい場合は、npmからインストールできます。

次のステップ

reveal.js がインストールされたら、マークアップ設定オプションのガイドを確認することをお勧めします。

基本セットアップ

reveal.js は、できるだけ多くの人に使用してもらえるように配布しています。基本的なセットアップは、最も広くアクセスできる開始方法であり、Webブラウザのみが必要です。ビルドプロセスを実行したり、依存関係をインストールしたりする必要はありません。

  1. 最新の reveal.js バージョンをダウンロードしてください https://github.com/hakimel/reveal.js/archive/master.zip
  2. 解凍し、index.htmlのサンプルコンテンツを自分のコンテンツに置き換えます
  3. ブラウザでindex.htmlを開いて表示します

以上です 🚀

完全なセットアップ - 推奨

外部Markdownなどのreveal.jsの一部の機能では、プレゼンテーションをローカルWebサーバーから実行する必要があります。以下の手順では、そのようなサーバーと、reveal.jsソースコードを編集するために必要なすべての開発タスクをセットアップします。

  1. Node.js(10.0.0以降)をインストールします

  2. reveal.jsリポジトリをクローンします

    $ git clone https://github.com/hakimel/reveal.js.git
  3. reveal.jsフォルダに移動し、依存関係をインストールします

    $ cd reveal.js && npm install
  4. プレゼンテーションをサーブし、ソースファイルの変更を監視します

    $ npm start
  5. https://:8000を開いてプレゼンテーションを表示します

開発サーバーポート

開発サーバーのデフォルトポートは8000です。port引数を使用して別のポートに切り替えることができます

npm start -- --port=8001

npmからインストールする

フレームワークは、npmに公開されており、そこからインストールできます。 reveal.jsはブラウザを対象としており、CSS、フォント、その他のアセットが含まれているため、npmの依存関係のユースケースは限られている可能性があることに注意してください。

npm install reveal.js
# or
yarn add reveal.js

インストールが完了したら、reveal.jsをESモジュールとして含めることができます

import Reveal from 'reveal.js';
import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js';

let deck = new Reveal({
  plugins: [Markdown],
});
deck.initialize();

reveal.jsのスタイルとプレゼンテーションテーマも含める必要があります。

<link rel="stylesheet" href="/node_modules/reveal.js/dist/reveal.css" />
<link rel="stylesheet" href="/node_modules/reveal.js/dist/theme/black.css" />