mcpField
R
revealjs-slides

revealjs-slides

github.com/alahmadiq8ドキュメント073 回インストール30 週間前に更新
リポジトリ

revealjs-slides について

revealjs-slidesは、reveal.jsでHTMLプレゼンテーションを作成するスキルです。テンプレートを使ったスライド生成に加え、生成物の配信と表示手順を案内します。

主な機能

  1. 01テンプレートからのHTMLスライド生成
  2. 02カスタム16:9テーマ
  3. 03Markdownとコードハイライト
  4. 04Mermaid図と数式への対応
  5. 05発表者ノートとPDF出力

活用シーン

  1. 01テンプレートを使ったプレゼン作成
  2. 02図や数式を含むスライドの作成
  3. 03発表者ノートを使ったプレゼン
  4. 04プレゼンのPDF保存

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/alahmadiq8/skills --skill revealjs-slides

インストール後、Claude Code で/revealjs-slidesを入力して読み込まれたか確認します。

同梱ファイルassets/template.html

詳細

reveal.js スライドジェネレーター

ワークフロー

  1. assets/template.html のテンプレートをユーザーの指定したパス（デフォルト：cwd の slides.html）にコピーします
  2. {{TITLE}}、{{SUBTITLE}}、{{AUTHOR}}、{{DATE}} のプレースホルダーを置き換えます
  3. TITLE SLIDE と閉じコメントの間に、各スライドの <section> 要素を生成します
  4. プレゼンテーションを配信して開きます（以下の実行方法を参照）

実行方法

HTML ファイルを生成したら、必ず配信してユーザーが開けるようにします。

npx live-server --port=8765 --open=slides.html

プレゼンテーションのキーボードショートカット：

  • 矢印キー／Space — スライドを移動します
  • S — 発表者ノート表示を開きます
  • O — 概要／スライド一覧を開きます
  • F — 全画面表示にします
  • Esc — 概要表示または全画面表示を終了します
  • B／. — 一時停止します（黒画面）

テンプレートの場所

assets/template.html — CDN ベース（npm のインストールは不要）で、Inter フォントとカスタムテーマを使用し、Markdown、Highlight、Notes、Math、Mermaid のプラグインを含みます。

デフォルトテーマ：カスタムスタイル

テンプレートには、組み込みのカスタムテーマが用意されています。主な特徴は以下のとおりです。

  • Inter フォント（Google Fonts）と、Segoe UI／Calibri のフォールバック
  • 左揃えのコンテンツスライド。テキストは上揃え（center: false）
  • タイトル／クロージングスライドでは、class="title-slide" を使用して中央揃え・垂直方向中央配置のレイアウトにします
  • h2 スライドタイトルには、控えめな下線を付けます
  • 太字テキストは見出しのアクセントカラー（#1a3c6e）で表示されます
  • テーブルには濃紺のヘッダー行と、交互に色が付く行を使用します
  • 引用には、左側に青いアクセントバーと明るい背景を付けます
  • コードブロックは、控えめな枠線を付けたフラットなスタイルです（ドロップシャドウなし）
  • スライドサイズ：1280x720（16:9）。一般的なプレゼンテーションのアスペクト比に一致します
  • スライドの余白：上下 48px、左右 56px
タイトル／クロージングスライド（垂直方向中央配置）
<section class="title-slide">
  <h1>Presentation Title</h1>
  <p>Subtitle text here</p>
  <p class="small">Author &mdash; Date</p>
</section>
2 カラムレイアウト（.columns ヘルパーを使用）
<section>
  <h2>Comparison</h2>
  <div class="columns">
    <div><h3>Left</h3><p>Content</p></div>
    <div><h3>Right</h3><p>Content</p></div>
  </div>
</section>

ベーステーマの上書き

カスタムテーマは white.css を上書きします。ベーステーマを変更するには、CSS リンク内の white を black、league、beige、night、serif、simple、solarized、moon、dracula、sky、blood のいずれかに置き換えます。注：暗いベーステーマでは、CSS 変数 --r-heading-color やその他の色も更新してください。

スライドのパターン

基本スライド
<section>
  <h2>Title</h2>
  <p>Content here</p>
</section>
フラグメント付き箇条書き（1 項目ずつ表示）
<section>
  <h2>Key Points</h2>
  <ul>
    <li class="fragment">First point</li>
    <li class="fragment">Second point</li>
    <li class="fragment">Third point</li>
  </ul>
</section>
構文ハイライト付きコード
<section>
  <h2>Code</h2>
  <pre><code class="language-python" data-trim data-line-numbers>
def hello():
    print("Hello, world!")
  </code></pre>
</section>

data-line-numbers="1-2|3-4" を使うと、行のハイライトを順番に表示できます。

画像スライド
<section>
  <h2>Architecture</h2>
  <img src="diagram.png" alt="Architecture" style="max-height: 500px;">
</section>
発表者ノート
<section>
  <h2>Topic</h2>
  <p>Audience content</p>
  <aside class="notes">Speaker-only notes here. Press 's' to open speaker view.</aside>
</section>
背景色／画像
<section data-background-color="#4d7e65">
  <h2>Green Background</h2>
</section>
<section data-background-image="photo.jpg" data-background-size="cover">
  <h2>Photo Background</h2>
</section>
引用
<section>
  <blockquote>"Quote text here." &mdash; Author</blockquote>
</section>
2 カラムレイアウト
<section>
  <h2>Comparison</h2>
  <div style="display: flex; gap: 2em;">
    <div style="flex: 1;"><h3>Left</h3><p>Content</p></div>
    <div style="flex: 1;"><h3>Right</h3><p>Content</p></div>
  </div>
</section>
数式（KaTeX）
<section>
  <h2>Equation</h2>
  <p>\[ E = mc^2 \]</p>
</section>
Markdown スライド
<section data-markdown>
  <script type="text/template">
    ## Markdown Title
    - Point **one**
    - Point *two*

    Notes:
    Speaker notes in markdown.
  </script>
</section>

図のパターン（Mermaid.js）

テンプレートには Mermaid プラグインが含まれています。スライド内で <div class="mermaid"> ブロックを使うと、図を表示できます。Mermaid が自動的に SVG に変換するため、画像は不要です。

フローチャート
<section>
  <h2>User Flow</h2>
  <div class="mermaid">
    flowchart LR
      A[Visit Site] --> B{Logged in?}
      B -- Yes --> C[Dashboard]
      B -- No --> D[Login Page]
      D --> E[Enter Credentials]
      E --> C
  </div>
</section>
シーケンス図
<section>
  <h2>API Request Flow</h2>
  <div class="mermaid">
    sequenceDiagram
      participant Client
      participant API
      participant DB
      Client->>API: POST /users
      API->>DB: INSERT user
      DB-->>API: user record
      API-->>Client: 201 Created
  </div>
</section>
クラス図
<section>
  <h2>Domain Model</h2>
  <div class="mermaid">
    classDiagram
      class Animal {
        +String name
        +int age
        +makeSound()
      }
      class Dog {
        +fetch()
      }
      class Cat {
        +purr()
      }
      Animal <|-- Dog
      Animal <|-- Cat
  </div>
</section>
ER 図
<section>
  <h2>Database Schema</h2>
  <div class="mermaid">
    erDiagram
      USER ||--o{ ORDER : places
      ORDER ||--|{ LINE_ITEM : contains
      PRODUCT ||--o{ LINE_ITEM : "ordered in"
  </div>
</section>
状態遷移図
<section>
  <h2>Order Lifecycle</h2>
  <div class="mermaid">
    stateDiagram-v2
      [*] --> Pending
      Pending --> Processing : payment received
      Processing --> Shipped : packed
      Shipped --> Delivered : arrived
      Delivered --> [*]
      Processing --> Cancelled : refund
  </div>
</section>
マインドマップ
<section>
  <h2>Project Overview</h2>
  <div class="mermaid">
    mindmap
      root((Project))
        Frontend
          React
          Tailwind
        Backend
          Node.js
          PostgreSQL
        DevOps
          Docker
          CI/CD
  </div>
</section>
タイムライン
<section>
  <h2>Project Milestones</h2>
  <div class="mermaid">
    timeline
      title Release Timeline
      Q1 2025 : Alpha release
                : Core features
      Q2 2025 : Beta release
                : API launch
      Q3 2025 : GA release
  </div>
</section>
ガントチャート
<section>
  <h2>Sprint Plan</h2>
  <div class="mermaid">
    gantt
      title Sprint 12
      dateFormat YYYY-MM-DD
      section Backend
        API endpoints :a1, 2025-01-06, 5d
        Database migration :a2, after a1, 3d
      section Frontend
        UI components :b1, 2025-01-06, 7d
        Integration :b2, after b1, 3d
  </div>
</section>
円グラフ
<section>
  <h2>Traffic Sources</h2>
  <div class="mermaid">
    pie title Traffic Sources
      "Organic Search" : 45
      "Direct" : 25
      "Social Media" : 20
      "Referral" : 10
  </div>
</section>
Git グラフ
<section>
  <h2>Branching Strategy</h2>
  <div class="mermaid">
    gitGraph
      commit
      branch feature
      checkout feature
      commit
      commit
      checkout main
      merge feature
      commit
  </div>
</section>
カスタムテーマの図（暗いプレゼンテーション）

暗いテーマ（black、night、dracula、league）では、テーマディレクティブを追加します。

<div class="mermaid">
  %%{init: {'theme': 'dark'}}%%
  flowchart LR
    A --> B --> C
</div>

Mermaid で利用可能なテーマ：default、dark、forest、neutral、base。

タイトルと説明を並べた図
<section>
  <h2>Architecture</h2>
  <div class="columns">
    <div>
      <div class="mermaid">
        flowchart TD
          LB[Load Balancer] --> S1[Server 1]
          LB --> S2[Server 2]
          S1 --> DB[(Database)]
          S2 --> DB
      </div>
    </div>
    <div>
      <ul>
        <li>Horizontally scalable</li>
        <li>Single database with replicas</li>
        <li>Health-check based routing</li>
      </ul>
    </div>
  </div>
</section>

図のデザインガイドライン

  • スライドごとに図は1つ — 図を読みやすく保ち、詰め込みすぎないでください
  • ノード数は15～20未満に抑える — 複雑なシステムは複数のスライドに分けてください
  • 意味のあるラベルを使う — A、B、Cではなく、User、Databaseを使ってください
  • テーマに合わせる — ダークなプレゼンテーションテーマでは、%%{init: {'theme': 'dark'}}%%を使ってください
  • フローチャートの向き — 横長のスライドではLR（左から右）、縦長の図ではTD（上から下）を使ってください
  • テキストを添える — 2列レイアウトを使って、図の横に背景情報を追加してください
  • 次の用途にはフローチャートを推奨：プロセス、意思決定ツリー、アーキテクチャ
  • 次の用途にはシーケンス図を推奨：API フロー、リクエスト／レスポンス、プロトコルのやり取り
  • 次の用途にはクラス図／ER図を推奨：データモデル、データベーススキーマ、OOP の階層構造
  • 次の用途にはマインドマップを推奨：ブレインストーミング、トピックの概要、プロジェクト構成
  • 次の用途にはタイムライン／ガントチャートを推奨：ロードマップ、プロジェクト計画、スプリントのスケジュール

スライドデザインガイドライン

  • タイトルスライド：必ず最初に配置し、h1、サブタイトル、作成者を含むclass="title-slide"を使ってください
  • 締めくくりのスライド：中央揃えの「ご質問はありますか？」または「ありがとうございます」スライドにはclass="title-slide"を使ってください
  • コンテンツスライド：スライドタイトルにはh2を使ってください（下部の区切り線が自動的に表示されます）
  • スライドごとにアイデアは約1つ：内容の焦点を絞ってください
  • 箇条書きにはフラグメントを推奨し、内容が段階的に表示されるようにしてください
  • コードブロック：空白を除去するにはdata-trimを使い、language-*クラスを設定してください
  • テキストを制限する：段落よりも、ビジュアル、短いフレーズ、キーワードを優先してください
  • 強調には太字を使う：<strong>のテキストは自動的にネイビーのアクセントカラーで表示されます
  • .columnsヘルパーを使う：インラインのflexスタイルの代わりに、横並びのレイアウトに使用してください
  • 縦方向のスライドは使わないでください：<section>の中に<section>をネストしないでください。すべてのスライドをフラットな横方向の構成にしてください

設定のカスタマイズ

HTML の末尾にあるReveal.initialize({...})ブロックを変更してください。

オプションデフォルト目的
transition'slide'none、fade、slide、convex、concave、zoom
slideNumbertrueスライド番号を表示します
centerfalseコンテンツを上部から表示します（title-slideクラスがこれを上書きします）
hashtrueURL のハッシュによるナビゲーション
progresstrue進行状況バーを表示します
controlstrueナビゲーション矢印を表示します
width1280スライドの幅（ピクセル単位、16:9）
height720スライドの高さ（ピクセル単位、16:9）
margin0外側の余白はありません（パディングはCSSで設定します）

PDF エクスポート

URL に?print-pdfを追加し、ブラウザーの印刷機能（Cmd/Ctrl+P）を使ってPDFとして保存してください。

コメント

Markdown 対応