revealjs

Reveal.js プレゼンテーション

reveal.js を使用して HTML プレゼンテーションを作成します。ビルド手順は不要です。HTML をブラウザーで開くだけです。

作成するもの

reveal.js プレゼンテーションは、次のもので構成されます。

1. HTML ファイル - スライドを含み、CDN から reveal.js を読み込みます
2. CSS ファイル - レイアウト、色、タイポグラフィ、コンポーネントのカスタムスタイルを定義します

デザイン原則

重要：プレゼンテーションを作成する前に、内容を分析し、適切なデザイン要素を選んでください。

1. テーマを考慮する：このプレゼンテーションのテーマは何ですか？ どのようなトーン、業界、雰囲気が適切ですか？
2. ブランドを確認する：ユーザーが会社や組織に言及している場合は、そのブランドカラーやアイデンティティを考慮してください
3. 内容に合った配色を選ぶ：テーマを反映した色を選択してください
4. デザイン方針を説明する：コードを書く前に、デザインの選択理由を説明してください

要件：

• ✅ コードを書く前に、内容を踏まえたデザイン方針を説明する
• ✅ Web セーフフォント（Arial、Helvetica、Georgia、Verdana など）または CSS の @import を介した Google Fonts を使用する
• ✅ サイズ、太さ、色で明確な視覚的階層を作る
• ✅ 読みやすさを確保する：十分なコントラスト、適切な文字サイズ、整った配置にする
• ✅ 一貫性を保つ：スライド全体でパターン、間隔、視覚表現を統一する
• ✅ フォントサイズには必ず pt（ポイント）を使用する - スライドは固定サイズなので、pt は予測しやすく、PowerPoint／Keynote のようになじみのある単位です。フォントサイズに em、rem、px は使用しないでください。

カラーパレットの選択

創造的に色を選ぶ：

• 既定の選択肢にとらわれない：このテーマに本当に合う色は何かを考えてください。考えずに選ぶのは避けてください。
• 複数の観点から検討する：テーマ、業界、雰囲気、活気、対象者、ブランドアイデンティティ（言及されている場合）
• 大胆に試す：意外な組み合わせも試してください。医療のプレゼンテーションに必ずしも緑を使う必要はなく、金融に必ずしもネイビーを使う必要もありません
• パレットを組み立てる：相性のよい色を3～5色選びます（基調色＋補助色＋アクセントカラー）
• コントラストを確保する：背景に対してテキストがはっきりと読めるようにしてください

カラーパレットの例（創造性を広げるために活用してください。いずれかを選ぶ、アレンジする、または独自に作成できます）。

1. クラシックブルー：ディープネイビー (#1C2833)、スレートグレー (#2E4053)、シルバー (#AAB7B8)、オフホワイト (#F4F6F6)
2. ティール＆コーラル：ティール (#5EA8A7)、ディープティール (#277884)、コーラル (#FE4447)、ホワイト (#FFFFFF)
3. 大胆なレッド：レッド (#C0392B)、ブライトレッド (#E74C3C)、オレンジ (#F39C12)、イエロー (#F1C40F)、グリーン (#2ECC71)
4. 温かみのあるブラッシュ：モーブ (#A49393)、ブラッシュ (#EED6D3)、ローズ (#E8B4B8)、クリーム (#FAF7F2)
5. バーガンディのラグジュアリー：バーガンディ (#5D1D2E)、クリムゾン (#951233)、ラスティック (#C15937)、ゴールド (#997929)
6. ディープパープル＆エメラルド：パープル (#B165FB)、ダークブルー (#181B24)、エメラルド (#40695B)、ホワイト (#FFFFFF)
7. クリーム＆フォレストグリーン：クリーム (#FFE1C7)、フォレストグリーン (#40695B)、ホワイト (#FCFCFC)
8. ピンク＆パープル：ピンク (#F8275B)、コーラル (#FF574A)、ローズ (#FF737D)、パープル (#3D2F68)
9. ライム＆プラム：ライム (#C5DE82)、プラム (#7C3A5F)、コーラル (#FD8C6E)、ブルーグレー (#98ACB5)
10. ブラック＆ゴールド：ゴールド (#BF9A4A)、ブラック (#000000)、クリーム (#F4F6F6)
11. セージ＆テラコッタ：セージ (#87A96B)、テラコッタ (#E07A5F)、クリーム (#F4F1DE)、チャコール (#2C2C2C)
12. チャコール＆レッド：チャコール (#292929)、レッド (#E33737)、ライトグレー (#CCCBCB)
13. 鮮やかなオレンジ：オレンジ (#F96D00)、ライトグレー (#F2F2F2)、チャコール (#222831)
14. フォレストグリーン：ブラック (#191A19)、グリーン (#4E9F3D)、ダークグリーン (#1E5128)、ホワイト (#FFFFFF)
15. レトロレインボー：パープル (#722880)、ピンク (#D72D51)、オレンジ (#EB5C18)、アンバー (#F08800)、ゴールド (#DEB600)
16. ヴィンテージアースカラー：マスタード (#E3B448)、セージ (#CBD18F)、フォレストグリーン (#3A6B35)、クリーム (#F4F1DE)
17. コースタルローズ：オールドローズ (#AD7670)、ビーバー (#B49886)、エッグシェル (#F3ECDC)、アッシュグレー (#BFD5BE)
18. オレンジ＆ターコイズ：ライトオレンジ (#FC993E)、グレイッシュターコイズ (#667C6F)、ホワイト (#FCFCFC)

スライド内容の原則

多様な見せ方が重要です。 スライドの内容の種類が似ている場合でも、視覚的な見せ方に変化をつけます。

• スライドごとに異なるレイアウトを使います。あるスライドでは段組み、別のスライドではボックスを縦に配置し、さらに別のスライドではアイコン付きのコールアウトを使います
• コンテナーのスタイルを組み合わせます。通常のテキスト、ボックス、コールアウト、引用ブロックなどを使います
• 視覚的な階層を使います。重要な用語には<strong>を使い、カテゴリーを区別するには色を変えます
• 引用、コールアウト、段組みなどの要素を使って、リストが続くのを避けます
• 連続するスライドで同じレイアウトパターンを繰り返さないでください

ざっと見て内容を把握できるようにします。

• 段落ではなく、短い箇条書きにします
• 可能な場合は、スライドごとに主なアイデアを1つに絞ります
• アイコン（Font Awesome）を使って、見た目に変化を加えます

ワークフロー

ステップ 1：構成を計画する

ユーザーのコンテンツに基づいて、以下を決定します。

• 必要なスライドの枚数
• セクション区切りにするスライド（中央揃え、大きなテキスト）
• 詳細な内容の説明に縦方向のスライドスタックを使う場所

ステップ 2：テンプレートを抽出する

create-presentation.jsスクリプト（このSKILL.mdファイルと同じディレクトリにある scripts/ディレクトリ内）を使って、template.zipからプレゼンテーションのテンプレートを抽出し、カスタマイズします。

node <path-to-skill>/scripts/create-presentation.js --structure 1,1,d,3,1,d,1 --title "My Presentation" --output-dir ./presentations

スクリプトのパスの確認： スクリプトは、このSKILL.mdファイルの場所からの相対パスでscripts/create-presentation.jsにあります。一般的な場所は次のとおりです。

• プロジェクトのスキル：.claude/skills/revealjs/scripts/create-presentation.js
• ユーザーのスキル：~/.claude/skills/revealjs/scripts/create-presentation.js

オプション：

• --slides N - 横方向のスライドをN枚作成します（シンプルモード）
• --structure <list> - カンマ区切りの値でレイアウトを組み合わせます。
  • 1 = 横方向のスライドを1枚
  • N（N > 1）= N枚の縦方向のスライドスタック
  • d = セクション区切りスライド（中央揃え、コンテンツのラッパーなし）
• --output-dir, -o <dir> - デッキフォルダーの出力先ディレクトリ（デフォルト：現在のディレクトリ）
• --title <text> - プレゼンテーションのタイトル（デフォルト：Presentation）
• --slug <text> - デッキフォルダーのカスタムスラッグ（デフォルト：ランダムな16進数）

作成されるもの： スクリプトはtemplate.zipをdeck-{slug}/という名前のフォルダーに展開し、次のものを格納します。

• index.html - プレゼンテーションのHTMLファイル
• lib/ - reveal.jsライブラリ、プラグイン、フォント、CSS（すべての依存関係が含まれているため、CDNは不要です）
• assets/ - 画像、ドキュメント、その他のアセット用フォルダー（自動的に作成されます）

例：

# 10 horizontal slides in ./presentations directory
node <path-to-skill>/scripts/create-presentation.js --slides 10 --output-dir ./presentations

# Mixed structure: intro, 2 content slides, divider, 3-slide vertical stack, divider, closing
node <path-to-skill>/scripts/create-presentation.js --structure 1,1,1,d,3,d,1 --title "Q4 Review" --output-dir ./decks

# Custom slug
node <path-to-skill>/scripts/create-presentation.js --structure 1,1,1,d,3,d,1,1 --title "My Deck" --slug mydeck

ステップ 3：CSS をカスタマイズする

テンプレートには、必要な CSS がすべて lib/offline-v2.css に含まれています。スタイルは次の方法でカスタマイズできます。

1. lib/offline-v2.css を直接編集する - このファイルには、reveal.js のスタイルとテーマ変数がすべて含まれています
2. カスタム CSS ファイルを追加する - index.html でメインのスタイルシートの後に独自の CSS ファイルをリンクします

テンプレートにはローカルフォントが lib/fonts/ に含まれているため、Google Fonts CDN は必要ありません。利用可能なフォントには次のものがあります。

• Montserrat（デフォルトのテーマフォント）
• Overpass、Overpass2
• Lato
• Open Sans
• その他多数（lib/fonts/ ディレクトリを参照）

Google Fonts を使用する場合（任意）： Google Fonts を使う場合は、カスタム CSS ファイルに @import を追加します。

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Lato:wght@300;400;600&display=swap');

.reveal {
  font-family: "Lato", Helvetica, sans-serif;
}

.reveal h1, .reveal h2, .reveal h3 {
  font-family: "Playfair Display", Georgia, serif;
}

タイポグラフィのガイドライン：

• フォントサイズには必ず pt（ポイント）を使用します - スライドは固定サイズなので、pt は予測しやすく、PowerPoint／Keynote と同様に使い慣れた単位です
• 読みやすさを確保するため、本文の基本サイズは 16～18pt 程度にします
• スライドのコンテンツが少ない場合は、余白を適切に埋めるようにフォントサイズを大きくします
• 見出しには階層に応じて、大きめのサイズ（24pt、32pt、48pt）を使用します

カスタム CSS の例： デッキフォルダーに custom.css ファイルを作成し、index.html に追加します。

<link rel="stylesheet" type="text/css" href="lib/offline-v2.css">
<link rel="stylesheet" type="text/css" href="custom.css">

次に、custom.css でカスタマイズします。

.reveal .slides section {
  padding: 40px 60px;
  text-align: left;
}

.reveal h1 { font-size: 48pt; }
.reveal h2 { font-size: 36pt; }
.reveal h3 { font-size: 24pt; }
.reveal p, .reveal li { font-size: 16pt; }

重要 - CSS の統合： custom.css などのカスタム CSS ファイルを作成すると、最終化スクリプト（ステップ 7）の実行時に lib/offline-v2.css へ自動的に統合されます。最終化スクリプトは次の処理を行います。

• すべてのカスタム CSS ファイルを lib/offline-v2.css に追加します
• index.html から外部 CSS ファイルへの参照を削除します
• 個別のカスタム CSS ファイルを削除します

これにより、配布しやすい単一の統合 CSS ファイルが作成されます。

ステップ 4：HTML コンテンツを入力する

デッキフォルダーの index.html ファイルを編集し、各スライドにコンテンツを追加します。必ず HTML マークアップを使用し、Markdown は使用しないでください（テンプレートに Markdown プラグインが含まれていても同様です）。次のパターンに従ってください。

標準的なスライド構成：

<section id="unique-slide-id">
  <h2>Slide Title</h2>
  <div class="content">
    
  </div>
</section>

複数列のレイアウト - 必ずインラインの CSS グリッドを使用します（.grid-2 のようなユーティリティクラスは作成しないでください）。

<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;">
  <div>Column 1</div>
  <div>Column 2</div>
</div>


<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px;">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>


<div style="display: grid; grid-template-columns: 1fr 2fr; gap: 30px;">
  <div>Narrow sidebar</div>
  <div>Wide main content</div>
</div>

グリッドにインラインスタイルを使用する理由：スライドごとに必要なレイアウト（列の比率や間隔など）は異なります。インラインスタイルを使えば、多数のユーティリティクラスを作成せずに、各スライドを自由に調整できます。

重要な HTML のパターン：

• すべての <section> に、安定した識別のための一意な id 属性を設定します
• セクションタイトルを中央に配置するスライドには class="section-divider" を使用します
• 一貫した間隔を確保するため、メインコンテンツを <div class="content"> で囲みます。これは、タイトルの下に残る縦方向のスペースを埋め、コンテンツが適切に配置されるようにするフレックスボックスコンテナです。
• スライド下部の帰属表示や出典テキストには <div class="footnote"> を使用します

ステップ 5：コンテンツのはみ出しを確認する

はみ出しチェッカーを実行し、スライドの境界を越えるコンテンツがないことを確認します。

node <path-to-skill>/scripts/check-overflow.js deck-{slug}/index.html

注： deck-{slug} は、実際のデッキフォルダー名に置き換えてください。

スクリプトは各スライドについて、次の項目を確認します。

• 縦方向のはみ出し： コンテンツがスライドの高さを超えていないか
• 横方向のはみ出し： コンテンツがスライドの幅を超えていないか

はみ出しが検出された場合は、該当するスライドのコンテンツを減らすか、フォントサイズを調整してください。

ステップ 6：スクリーンショットで目視確認する

重要：すべてのスライドのスクリーンショットを必ず確認してください。 スライドを飛ばしたり、一部のサンプルだけを確認したりしないでください。視覚的な問題はよく発生し、各スライドを個別に確認しなければ見つけられません。

すべてのスライドのスクリーンショットを撮影します。

cd deck-{slug}
npx decktape reveal "index.html?export" output.pdf \
  --screenshots \
  --screenshots-directory "screenshots/$(date +%Y%m%d_%H%M%S)"

注： ?export クエリパラメーターは、PDF のレンダリングをより見やすくするため、グラフのアニメーションを無効にします。HTML をブラウザーで直接表示した場合、グラフは引き続きアニメーションします。

これにより、タイムスタンプ付きのフォルダー（例：screenshots/20241210_143052/）が作成されるため、バージョンを追跡し、修正前後を比較できます。

次に、Read ツールを使って、各スクリーンショットの画像ファイルを確認します。

確認するポイント

オーバーフロースクリプトでレイアウトの問題のほとんどを検出できますが、次の問題は目視で確認する必要があります。

1. コンテナー内の色の継承：ボックスやコールアウト内のテキストが、親要素から誤った色を継承することがあります。ページの背景が暗く、テキストが明るい色の場合、明るい色の .box や .callout 内のテキストは、そのコンテナーに暗い文字色を明示的に設定しないと読めなくなります。

   修正パターン - 明るい色のコンテナーにはテキストと箇条書きの色を明示的に設定します：

   .box-light p,
   .box-light li {
     color: var(--text-dark);
   }
   
   .box-light ul li::before {
     background: var(--primary-color);  /* bullet color */
   }
   

2. 箇条書き／リストのカスタムスタイル：デフォルトのリストスタイルを上書きすると、すべてのコンテナーの背景で箇条書きが十分なコントラストを保てないことがあります。

3. アイコンが表示されない：Font Awesome の読み込みに失敗すると、アイコンが表示されるはずの場所に空の四角形が表示されたり、何も表示されなかったりします。

4. オーバーフローの例外的なケース：スクリプトでオーバーフローのほとんどを検出できますが、複雑な入れ子のレイアウトでは、まれに検出されないことがあります。

5. 予期しないテキストの折り返し：1 行に収まると思っていたテキストが、実際には 2 行に折り返されてオーバーフローすることがあります。特に列レイアウトでよく起きます。ある列のヘッダーだけが折り返され、ほかの列は折り返されないため、レイアウトが不均一になることがあります。

修正後、該当するスライドを再キャプチャします：

npx decktape reveal "presentation.html?export" output.pdf \
  --screenshots \
  --screenshots-directory "screenshots/$(date +%Y%m%d_%H%M%S)" \
  --slides 2,5,7-9

その後、更新されたスクリーンショットを再確認して、修正が反映されていることを確認します。タイムスタンプ付きの新しいフォルダーを使うと、以前のバージョンと簡単に比較できます。

ステップ 7：プレゼンテーションを仕上げる

重要： プレゼンテーションのコンテンツとカスタム CSS が完成したら、スタイルを統合して不要なファイルを整理するため、必ず仕上げスクリプトを実行してください。

仕上げスクリプトを実行します：

node <path-to-skill>/scripts/finalize.js deck-{slug}

仕上げスクリプトの処理内容：

1. assets/ フォルダーを作成 - 画像、ドキュメント、その他のアセットを格納する標準ディレクトリです（create-presentation.js によっても自動的に作成されます）。
2. カスタム CSS を統合 - デッキのルートにあるすべての *.css ファイル（lib/offline-v2.css を除く）を検出し、次の処理を行います。
   • 内容を明確なマーカーとともに lib/offline-v2.css に追加します。
   • 個別の CSS ファイルを削除します。
   • index.html から外部 CSS の <link> タグを削除します（lib/offline-v2.css のみ残します）。
3. ビルド成果物を整理 - 次の一時ファイルを削除します。
   • screenshots/ ディレクトリ（decktape によるスクリーンショット生成で作成）
   • output.pdf（decktape による PDF エクスポートで作成）

仕上げが重要な理由：

• CSS ファイルを 1 つに集約：配布しやすいように、すべてのスタイルを lib/offline-v2.css にまとめます。
• HTML を整理：ファイルの移動によって壊れる可能性がある外部 CSS への参照をなくします。
• 本番環境に対応：一時的なビルド成果物を削除します。
• 標準的な構成：画像やドキュメントを整理するための assets/ フォルダーがあることを確認します。

仕上げを実行するタイミング：

• すべてのスライドコンテンツを完成させた後
• カスタム CSS ファイルを追加した後
• プレゼンテーションを共有またはデプロイする前
• スクリーンショットや PDF の生成後（成果物を整理するため）

注： assets/ フォルダーは create-presentation.js によって自動的に作成されますが、仕上げスクリプトを実行すると、古いデッキを仕上げる場合にもフォルダーが存在することを確認できます。

CSS コンポーネントのリファレンス

ボックス

.box {
  background: var(--box-bg);
  border: 1px solid var(--box-border);
  border-radius: 8px;
  padding: 20px;
}

.box-outlined {
  border: 1px solid var(--box-border);
  border-radius: 8px;
  padding: 20px;
  background: transparent;
}

コールアウト

.callout {
  border-left: 6px solid var(--primary-color);
  padding: 15px 20px;
  margin: 15px 0;
  background: #f9f9f9;
  border-radius: 8px;
}

/* Color variants */
.callout-blue { border-left-color: #2196F3; background: #e3f2fd; }
.callout-orange { border-left-color: #ff9800; background: #fff3e0; }
.callout-green { border-left-color: #4caf50; background: #e8f5e9; }
.callout-gray { border-left-color: #666; background: #f5f5f5; }

引用

.reveal blockquote {
  border-left: 4px solid var(--primary-color);
  padding-left: 20px;
  margin: 20px 0;
  font-style: italic;
  background: none;
  box-shadow: none;
  width: 100%;
}

.reveal blockquote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  color: var(--muted-color);
}

アイコン（Font Awesome）

Font Awesome はひな形に含まれています。使い方：

<i class="fa-solid fa-lightbulb"></i>
<i class="fa-solid fa-check"></i>
<i class="fa-solid fa-gears"></i>

テンプレートの構成

template.zip ファイルには、slides.com からエクスポートした reveal.js プレゼンテーション一式が含まれています。内容は次のとおりです。

• reveal.js コア（lib/reveal.js、lib/reveal.css）- プレゼンテーション用フレームワーク
• プラグイン（lib/reveal-plugins.js）：
  • RevealZoom - 要素を拡大します（Alt+クリック／Ctrl+クリック）。
  • RevealNotes - 発表者ノートを表示します（S キーを押します）。
  • RevealMarkdown - Markdown に対応します（利用できますが、このスキルでは HTML マークアップを優先します）。
  • RevealHighlight - コードの構文をハイライトします。
• フォント（lib/fonts/）- オフライン利用のためのローカルフォントファイル
• スタイル（lib/offline-v2.css）- テーマを含む CSS 一式
• オフライン対応（lib/offline.js）- インターネット接続なしで動作します。

注： このテンプレートは slides.com 形式を使用していますが、抽出時に標準の reveal.js <section> 形式に変換します。すべてのプラグインは事前に設定されており、そのまま使用できます。

高度な機能

フラグメント（段階的な表示）、スピーカーノート、カスタム背景、自動アニメーション、トランジションについては、references/advanced-features.md を参照してください。

Reveal.js の設定

Reveal.initialize({
  controls: true,          // Show navigation arrows
  progress: true,          // Show progress bar
  slideNumber: true,       // Show slide numbers
  hash: true,              // Update URL hash for each slide
  transition: 'slide',     // none/fade/slide/convex/concave/zoom
  center: false,           // Vertical centering of slide content
  autoSlide: 0,            // Auto-advance (ms), 0 to disable
  loop: false,             // Loop presentation
});

center に関する注意： デフォルトは false（コンテンツは上部に配置）で、コンテンツの多いスライドに最適です。コンテンツを垂直方向に中央揃えにしたい、シンプルなプレゼンテーションやクリエイティブなプレゼンテーションでは、true に設定してください。

Reveal.js の組み込みクラス

カスタム CSS を使わずに、以下を直接使用できます。

• r-fit-text - テキストのサイズを自動調整してスライドいっぱいに表示
• r-stretch - 要素を伸ばして、残りの垂直スペースいっぱいに表示
• r-stack - 要素を重ねて配置

<h1 class="r-fit-text">BIG TEXT</h1>
<img class="r-stretch" src="image.jpg">

チャートの追加

重要：チャートを追加する前に、必ず references/charts.md を読んでください。 チャートを適切なサイズにし、はみ出しを防ぐには、特定のフレックスボックス／グリッドのパターンが必要です。ドキュメント全体を先に読まずに、チャートを追加しないでください。

注意： テンプレートには、デフォルトで Chart.js は含まれていません。チャートを追加するには、Chart.js と reveal.js のチャートプラグインを含める必要があります。詳しくは references/charts.md を参照してください。

必須パターン - チャートには、フレックスボックスのコンテナーと maintainAspectRatio: false が必要です。

<section style="display: flex; flex-direction: column; height: 100%;">
  <h2>Chart Title</h2>
  <div style="flex: 1; position: relative; min-height: 0;">
    <canvas data-chart="bar">
    
    </canvas>
  </div>
</section>

references/charts.md の内容（必読）：

• レイアウトパターン：スライド全体、半分（水平／垂直）、4分の1、比率の異なる分割（1fr 2fr、1fr 3fr）
• フレックスボックスのパターンが必要な理由（Chart.js のアスペクト比の動作）
• すべてのチャートタイプ（棒グラフ、折れ線グラフ、円グラフ、ドーナツグラフ、散布図など）
• スタイルと色のオプション
• CSV データ形式（JSON よりシンプルな代替形式）

依存関係

スクリプトに必要なもの：

• Node.js（スクリプトの実行用）
• adm-zip（テンプレートの展開用）：npm install adm-zip
• cheerio（HTML の解析用）：npm install cheerio
• Puppeteer（はみ出しのチェック用）：npm install puppeteer
• Decktape（スクリーンショット用）：npx decktape（そのまま実行できます）