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>

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

基本的な使い方

スライドの構造

<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
});