Reveal.js - HTMLでプレゼン資料を作る時代が来ている話

はじめに

プレゼン資料を作るとき、みなさん何を使っていますか。PowerPointやGoogleスライドが定番だと思いますが、エンジニアとしてはもっとコードっぽく管理したいなと思うことがあるんですよね。

そこで今回紹介するのがReveal.jsです。GitHub Starが7万を超えている、HTMLベースのプレゼンテーションフレームワーク。15年前から開発されている老舗ライブラリで、今でも月間16万ダウンロードされている現役選手です。

個人的には、技術系のLTやカンファレンス発表ではこれ一択かなと思っています。

とはいえ、説明を読むより先に動くものを見た方が早いと思います。矢印キーでスライドが切り替わる様子や、クリックで段階的にテキストが表示されるフラグメント機能をブラウザ上でそのまま試せるようにしたので、先に挙動を見たい方はこちらからどうぞ。

＞＞＞まずはサンプルを確認＜＜＜

Reveal.jsの特徴・メリット

Web技術でスライドが作れる

HTMLとCSS、JavaScriptでスライドを作成できます。つまり、普段使い慣れたエディタとGitで管理できるということ。バージョン管理できるプレゼン資料、これ地味に便利なんですよね。

Markdownサポート

HTMLを書くのが面倒という人でも大丈夫。Markdown形式でコンテンツを書けます。正直なところ、普段READMEを書く感覚でスライドが作れるのは楽です。

主な機能

ネストされたスライド: 横方向だけでなく縦方向にもスライドを追加できる
Auto-Animate: スライド間で要素を自動的にアニメーション
スピーカーノート: 発表者用のメモとタイマー機能
PDFエクスポート: 印刷や配布用にPDF出力可能
コード構文ハイライト: エンジニア向けプレゼンに必須
LaTeX対応: 数式もきれいに表示できる
タッチ対応: タブレットでも操作可能

軽量

バンドルサイズは約30KB（minified + gzipped）。これ、意外と重要で、発表先のネット環境が悪くてもサクサク動きます。

インストール方法

基本的なセットアップ

npmでインストールする場合はこちら。

npm install reveal.js

HTMLだけで始める方法

最も簡単なのは、CDNを使う方法です。

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.2.1/dist/reveal.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.2.1/dist/theme/black.css">
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        <section>スライド1</section>
        <section>スライド2</section>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/reveal.js@5.2.1/dist/reveal.js"></script>
    <script>
      Reveal.initialize();
    </script>
  </body>
</html>

これだけで動きます。シンプルですね。

Reveal.jsのサンプルを動かす

Reveal.jsは<div class="reveal"><div class="slides">…</div></div>というHTML構造を用意し、new Reveal(options)でインスタンスを作ってinitialize()を呼ぶだけで動き出します。下のサンプルは、document.body.innerHTMLでスライド用のHTMLを組み立ててから初期化している点以外は、実際のプロジェクトと同じ書き方です。矢印キー（またはスライド下部の操作ボタン）でスライドを送ってみてください。2枚目ではfragmentクラスを付けた要素が、クリックのたびに1つずつ表示されます。

要点だけを抜き出すと、初期化まわりはこれだけのコードです。

import Reveal from 'reveal.js'
import 'reveal.js/dist/reveal.css'
import 'reveal.js/dist/theme/black.css'

const deck = new Reveal({
  transition: 'slide',
  controls: true,
  progress: true,
})

deck.initialize()

実際に動かせるものが下です。テーマのCSSは<link>タグで読み込み、スライドの中身はinnerHTMLで流し込んでいます。

transitionの値を'zoom'や'concave'に変えるとスライド送りの演出が変わりますし、fragmentクラスをfade-outやshrinkに変えると、フラグメントの見え方が変わります。progress: falseにすると、上部の進捗バーも消えます。

基本的な使い方

スライドの構造

<div class="reveal">
  <div class="slides">
    <!-- 横方向のスライド -->
    <section>
      <h1>タイトルスライド</h1>
      <p>サブタイトル</p>
    </section>

    <!-- 縦方向のネストスライド -->
    <section>
      <section>親スライド</section>
      <section>子スライド1</section>
      <section>子スライド2</section>
    </section>
  </div>
</div>

Markdownで書く場合

<section data-markdown>
  <textarea data-template>
    ## スライドタイトル

    - ポイント1
    - ポイント2
    - ポイント3

    ---

    ## 次のスライド

    コードも書けます

    ```javascript
    console.log('Hello, Reveal.js!');
    ```
  </textarea>
</section>

フラグメント（段階表示）

<section>
  <p class="fragment">1番目に表示</p>
  <p class="fragment">2番目に表示</p>
  <p class="fragment">3番目に表示</p>
</section>

プレゼンでよくある「クリックしたら次の項目が出る」やつです。

コードのハイライト

<section>
  <pre><code data-trim data-line-numbers>
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('World'));
  </code></pre>
</section>

data-line-numbers属性をつけると行番号が表示されます。特定の行をハイライトしたい場合はdata-line-numbers="2,4"のように指定できます。

テーマの変更

<!-- デフォルトで用意されているテーマ -->
<link rel="stylesheet" href="dist/theme/black.css">
<!-- または -->
<link rel="stylesheet" href="dist/theme/white.css">
<link rel="stylesheet" href="dist/theme/league.css">
<link rel="stylesheet" href="dist/theme/beige.css">
<link rel="stylesheet" href="dist/theme/night.css">
<link rel="stylesheet" href="dist/theme/serif.css">
<link rel="stylesheet" href="dist/theme/simple.css">
<link rel="stylesheet" href="dist/theme/solarized.css">
<link rel="stylesheet" href="dist/theme/moon.css">
<link rel="stylesheet" href="dist/theme/dracula.css">
<link rel="stylesheet" href="dist/theme/sky.css">

カスタマイズ

Reveal.initialize({
  // トランジション効果
  transition: 'slide', // none/fade/slide/convex/concave/zoom

  // スライドの進行方向
  navigationMode: 'default',

  // スライド番号の表示
  slideNumber: true,

  // 進捗バー
  progress: true,

  // スピーカーノートの有効化
  showNotes: false,

  // 自動スライド（ミリ秒）
  autoSlide: 0,

  // ハッシュによるスライド位置の記録
  hash: true
});

実践的なユースケース

技術カンファレンスでの発表

コードを見せながら説明する場面が多い技術系カンファレンスでは、シンタックスハイライトが標準装備なのが助かります。しかもGitで管理できるので、チームメンバーとの共同編集も楽。

社内LT

5分くらいのLTなら、Markdownでサクッと書いてすぐ発表できます。PowerPointを起動する時間がもったいないときに重宝します。

ドキュメントとしての活用

作ったスライドはそのままWebサイトとして公開できます。GitHub Pagesに置けば、URLを共有するだけで誰でも見られる。QOL上がりますよ。

オフラインでのプレゼン

HTMLファイルなので、ネット環境がなくてもブラウザさえあれば動きます。発表先でWi-Fiがつながらないという最悪の事態でも安心。

Reveal.jsのトランジション効果をスライドごとに切り替える

全体の遷移演出はReveal.initialize({ transition: 'slide' })のように設定しますが、section要素にdata-transition属性を付けると、そのスライドへの遷移だけ個別に上書きできます。1枚だけ目立たせたいスライドがあるときに便利です。

<section data-transition="zoom">Zoomで登場するスライド</section>
<section data-transition="convex">Convexで登場するスライド</section>

実際に動かせるものが下です。矢印キーでスライドを送ると、zoom→convex→concaveと切り替わり方が変わるのが分かります。

data-transition="zoom"の値をfadeやnoneに書き換えると演出が変わります。data-transition-speed="fast"を追加すれば、切り替え速度だけを個別に速くすることもできます。

Reveal.jsのMarkdown記法でスライドを書く

HTMLのsectionを1枚ずつ書く代わりに、data-markdown属性を付けたsectionの中に<textarea data-template>を置くと、中身をMarkdownとして解釈してくれます。ただしRevealMarkdownプラグインをplugins配列に渡して読み込む必要があります。

<section data-markdown>
  <textarea data-template>
    ## Markdownスライド
    - 箇条書き
    - そのまま書ける
    ---
    ## 次のスライド
  </textarea>
</section>

実際に動かせるものが下です。---で区切った部分が、そのまま新しいスライドとして分割されます。

HTMLタグを1つも書かずに、READMEを書く感覚でスライドを増やせるのがdata-markdownの魅力です。見出しの##はそのままスライド内の<h2>になります。

Reveal.jsのAuto-Animateで要素をなめらかに繋げる

隣り合う2枚のスライドに同じdata-idを持つ要素があると、Reveal.jsはその要素の位置・サイズ・色の変化を自動で補間してアニメーションします。これがAuto-Animate機能で、sectionにdata-auto-animateを付けるだけで有効になります。

<section data-auto-animate>
  <div data-id="box" style="background:#e74c3c; width:100px; height:100px;"></div>
</section>
<section data-auto-animate>
  <div data-id="box" style="background:#3498db; width:300px; height:100px;"></div>
</section>