reveal.jsでWebサイトへスライドを埋め込む ​

スライドのタイトル

HTMLやMarkdownでスライドの内容を作成

スライド2

スマホの縦型でも縦スクロールで綺麗に表示

スライド3

Googleフォント、背景、画像、コードなどデザイン自由

スライド4

reveal.js https://revealjs.com を使うと、上のようなリッチなスライドをWebサイトに埋め込みできます。 スマホ表示のときは、縦型スクロールビューになり、ページ送りの操作感も良いです。

本サイトのようにVitePress(/Node.js)に埋め込む場合のコードを解説します。

reveal.jsをインストールします。

npm install reveal.js

インポートして使えるようにします。CSSについてのみです。import 'reveal.js'はここでは読み込みません。

import 'reveal.js/dist/reveal.css';
import 'reveal.js/dist/theme/black.css'; // blackのテーマを使う場合

ここでポイントとなるのが、VitePress,Viteにおいて、onMounted()で、reveal.jsをインポートし、インスタンス化することです。Webブラウザクライアントサイドで、実行されるようにしましょう。

<script setup>
import { onMounted } from 'vue';
import 'reveal.js/dist/reveal.css';
import 'reveal.js/dist/theme/black.css';
// import Reveal from 'reveal.js'; // ここではエラーになる

onMounted(() => {
  import('reveal.js').then(Reveal => {
    let slideReveal = new Reveal.default(document.querySelector('.reveal .slide-reveal'));
    slideReveal.initialize({ embedded: true });
  });
});
</script>

もし、onMounted()の前で実行すると、Node.jsのビルド時／サーバーサイドでのレンダリング(SSR)となり、Webブラウザ特有の機能（navigator等）へアクセスするreveal.jsにおいては、ReferenceError: navigator is not defined エラーとなり、ビルドが通りません。

他の回避策としては、HTMLのhead内でCDNから読み込んで、その後インスタンス化する方法もあります。

次に、埋め込みたい箇所に、スライドの内容をHTMLやマークダウンで書きます。

div class="reveal" 配下がスライド内容となります。親の要素に幅と高さを定義することがMustになります。

<div class="w-full h-72 mt-8"> <!-- Tailwind CSS使用 -->
  <div class="reveal slide-reveal">
    <div class="slides">
      <section>
        <h3>スライドのタイトル</h3>
        <p>
          <small>HTMLやMarkdownでスライドの内容を作成</small>
        </p>
      </section>
      <section>
        <h3>スライド2</h3>
        <p>
          <small>スマホの縦型でも縦スクロールで綺麗に表示</small>
        </p>
      </section>
      <section>
        <h3>スライド3</h3>
        <p>
          <small>Googleフォント、背景、画像、コードなどデザイン自由</small>
        </p>
      </section>
      <section>スライド4</section>
    </div>
  </div>
</div>

このページ（VitePress、マークダウン）の全てのコードは以下となります。

---
titleTemplate: ":title / つじユウキ"
description: reveal.jsで、ウェブサイトへスライドを埋め込む。VitePressサイトで埋め込んだ例を解説。Webサイトをリッチにしよう。
---

<script setup>
import { onMounted } from 'vue';
import 'reveal.js/dist/reveal.css';
import 'reveal.js/dist/theme/black.css';

onMounted(() => {
  import('reveal.js').then(Reveal => {
    let slideReveal = new Reveal.default(document.querySelector('.reveal .slide-reveal'));
    slideReveal.initialize({ embedded: true });
  });
});
</script>

# reveal.jsでWebサイトへスライドを埋め込む

<div class="w-full h-72 mt-8">
  <div class="reveal slide-reveal">
    <div class="slides">
      <section>
        <h3>スライドのタイトル</h3>
        <p>
          <small>HTMLやMarkdownでスライドの内容を作成</small>
        </p>
      </section>
      <section>
        <h3>スライド2</h3>
        <p>
          <small>スマホの縦型でも縦スクロールで綺麗に表示</small>
        </p>
      </section>
      <section>
        <h3>スライド3</h3>
        <p>
          <small>Googleフォント、背景、画像、コードなどデザイン自由</small>
        </p>
      </section>
      <section>スライド4</section>
    </div>
  </div>
</div>

プレゼンテーション・スライドの見せ方を、サイト訪問者に提供するもの良いですね。

Copyright © 2024-present つじユウキ