概要

プレゼン資料を作ろうと思ったとき、PowerPoint がすぐに思い浮かびますが、使い勝手の面やソース管理との相性が悪いのが課題でした。

かっこいいプレゼン資料を手軽に作りたい！そんな時は reveal.js がおすすめです。

こんな感じのプレゼン資料がさくっと作れます。

使い方

reveal.js では HTML によるマークアップや markdown での作成に対応していますが、個人的には vscode から作成するのがおすすめです。

以下に簡単な作成手順について紹介します。

1. vscode のインストール

まずは vscode をダウンロードしてインストールします。

2019/10/09 現在、以下のバージョンの vscode で reveal.js が動作することを確認しています。

Version: 1.38.1 (system setup)
Commit: b37e54c98e1a74ba89e03073e5a3761284e3ffb0
Date: 2019-09-11T13:35:15.005Z
Electron: 4.2.10
Chrome: 69.0.3497.128
Node.js: 10.11.0
V8: 6.9.427.31-electron.0
OS: Windows_NT x64 10.0.17134

2. 拡張機能のインストール

vscode を起動し、拡張機能を表示します。

検索ボックスに vscode-reveal と入力して拡張機能を検索して Install ボタンでインストールします。

3. vscode-reveal のバージョンの切り替え

2019/10/09 現在、最新バージョンは 4.0.3 ですが、最新バージョンを使うとプレビュー機能が正しく動作しないので少し古いバージョンへ切り替えます。

検索結果の一覧の vscode-reveal にある歯車アイコンをクリックして Install Another Version... をクリックします。
リストから 4.0.2 をクリックします。

バージョンが切り替わると以下のように表示されます。

reveal.js の環境準備は以上です。

4. markdown によるプレゼン資料の作成

環境準備がととのいましたので、これからはプレゼン資料を作っていきます。
内容は markdown で記載していきます。

任意のフォルダーで sample.md ファイルを新規作成します。

左側のメニューに vscode-reveal のアイコンが追加されています。
拡張子が md のファイルを開くと自動的に表示されるようになっています。

sample.md に以下の内容を記載します。

sample.md

---
theme: "black"
transition: "slide"
slideNumber: false
title: "サンプル"
---

# はじめての reveal.js

---

## リスト

* りんご
* みかん
* もも

---

## 効果

大きくする {.fragment .grow}

小さくする {.fragment .shrink}

フェードアウト {.fragment .fade-out}

右フェード {.fragment .fade-right}

上フェード {.fragment .fade-up}

下フェード {.fragment .fade-down}

左フェード {.fragment .fade-left}

vscode-reveal ではファイルの先頭でテーマやタイトルなどの設定を記載するようになっています。

詳しい内容については vscode-reveal のサイトの Reveal.js Options から参照できます。

その下の行からがプレゼン資料の内容になっています。

一般的な markdown の記法に従って記載し、セクション(ページ)の区切りは --- で区切ります。
fragment というクラスを指定することでページに効果を与えることもできます。

それでは vscode でプレビューを見てみましょう。

左側のメニューにある vscode-reveal のアイコンをクリックし、左側の画面の上部にある一番右側の Revealjs: Show presentation by side のアイコンをクリックすると右側の画面にプレビューが表示されます。