インストール
reveal.js をインストールする方法は、ユースケースと技術的な経験に応じて3つあります。
- 基本的なセットアップは、最も簡単に始められる方法です。ビルドツールを設定する必要はありません。
- 完全なセットアップでは、reveal.jsのソースコードに変更を加えるために必要なビルドツールにアクセスできます。外部Markdownファイルをロードしたい場合に必要となるWebサーバーが含まれています(基本的なセットアップと、任意のローカルWebサーバーの組み合わせでも動作します)。
- reveal.jsをプロジェクトの依存関係として使用したい場合は、npmからインストールできます。
次のステップ
reveal.js がインストールされたら、マークアップと設定オプションのガイドを確認することをお勧めします。
基本セットアップ
reveal.js は、できるだけ多くの人に使用してもらえるように配布しています。基本的なセットアップは、最も広くアクセスできる開始方法であり、Webブラウザのみが必要です。ビルドプロセスを実行したり、依存関係をインストールしたりする必要はありません。
- 最新の reveal.js バージョンをダウンロードしてください https://github.com/hakimel/reveal.js/archive/master.zip
- 解凍し、index.htmlのサンプルコンテンツを自分のコンテンツに置き換えます
- ブラウザでindex.htmlを開いて表示します
以上です 🚀
完全なセットアップ - 推奨
外部Markdownなどのreveal.jsの一部の機能では、プレゼンテーションをローカルWebサーバーから実行する必要があります。以下の手順では、そのようなサーバーと、reveal.jsソースコードを編集するために必要なすべての開発タスクをセットアップします。
Node.js(10.0.0以降)をインストールします
reveal.jsリポジトリをクローンします
$ git clone https://github.com/hakimel/reveal.js.gitreveal.jsフォルダに移動し、依存関係をインストールします
$ cd reveal.js && npm installプレゼンテーションをサーブし、ソースファイルの変更を監視します
$ npm starthttps://:8000を開いてプレゼンテーションを表示します
開発サーバーポート
開発サーバーのデフォルトポートは8000です。port引数を使用して別のポートに切り替えることができます
npm start -- --port=8001npmからインストールする
フレームワークは、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" />