HTML Presentation Generator Skill

HTMLベースのプレゼンテーションを生成するスキルです。reveal.jsを使用した美しく、インタラクティブなスライドショーを作成できます。

概要

このスキルは、マークダウン形式のコンテンツから、プロフェッショナルなHTMLプレゼンテーションを自動生成します。

主な機能

• reveal.jsベース: 業界標準のプレゼンテーションフレームワーク
• レスポンシブデザイン: あらゆる画面サイズに対応
• 豊富なテーマ: 複数のビルトインテーマ
• コードハイライト: プログラミングコードの美しい表示
• PDF出力対応: プレゼンテーションをPDFとしてエクスポート可能
• スピーカーノート: 発表者用のメモ機能
• アニメーション: スライド遷移とフラグメントアニメーション

使用方法

基本的な使い方

HTMLプレゼンテーションを作成してください。
タイトル: "C++のメモリ管理"
スライド内容:
1. イントロダクション
2. メモリリークの問題
3. スマートポインタ
4. まとめ

カスタマイズオプション

以下の設定でHTMLプレゼンテーションを作成:
- テーマ: black
- トランジション: slide
- コードハイライト: monokai
- タイトル: "技術プレゼンテーション"

生成されるファイル

presentation/
├── index.html          # メインのプレゼンテーションファイル
├── README.md           # 使い方ガイド
└── assets/             # カスタムアセット（オプション）
    ├── images/
    └── code/

サポートする機能

1. スライドの種類

• タイトルスライド: プレゼンテーションの表紙
• コンテンツスライド: 通常のコンテンツ
• コードスライド: シンタックスハイライト付きコード表示
• 2カラムレイアウト: 左右分割レイアウト
• 画像スライド: 画像メインのスライド

2. テーマオプション

利用可能なテーマ:

• black

  (デフォルト): ダークテーマ

• white

  : ライトテーマ

• league

  : グレーベース

• beige

  : ベージュ

• sky

  : ブルー系

• night

  : ダーク + コントラスト

• serif

  : セリフフォント

• simple

  : シンプル

• solarized

  : Solarizedカラー

3. トランジション効果

• none

  : トランジションなし

• fade

  : フェード

• slide

  : スライド（デフォルト）

• convex

  : 凸面

• concave

  : 凹面

• zoom

  : ズーム

4. コードハイライト

サポートする言語:

• C/C++
• C#
• Python
• JavaScript
• Java
• Rust
• Go
• その他多数

実装例

例1: 技術プレゼンテーション

入力:

C#とC++の相互運用についてのプレゼンテーションを作成。
スライド:
1. タイトル: "C# ⇔ C++ Interop"
2. なぜ相互運用が必要か
3. P/Invokeの基本
4. コード例
5. まとめ

生成される内容:

• reveal.jsベースのフルHTMLプレゼンテーション
• 各スライドが適切にフォーマットされている
• コード例がハイライトされている
• レスポンシブ対応

例2: データ可視化プレゼン

入力:

データ分析結果のプレゼンを作成。
テーマ: white
グラフや図を含むスライドを5枚

生成される内容:

• Chart.jsまたはD3.jsを統合したスライド
• データ可視化の実例
• インタラクティブな要素

プレゼンテーションの実行

生成されたプレゼンテーションを表示するには:

# ローカルサーバーを起動
cd presentation
python -m http.server 8000

# ブラウザで開く
# http://localhost:8000

または、単純に

index.html

をブラウザで開くだけでも動作します。

キーボードショートカット

プレゼンテーション実行時の操作:

• →

  /

  Space

  : 次のスライド

• ←

  : 前のスライド

• ↑

  /

  ↓

  : 縦方向のナビゲーション

• Home

  /

  End

  : 最初/最後のスライド

• ESC

  /

  O

  : スライド一覧表示

• S

  : スピーカーノート表示

• F

  : フルスクリーン

• B

  /

  .

  : 画面を黒く/白く（プレゼン中断時）

• ?

  : ヘルプ表示

PDF出力

プレゼンテーションをPDFとして保存:

1. ChromeまたはChromiumベースのブラウザで開く
2. URLに

   ?print-pdf

   を追加:

   index.html?print-pdf

3. ブラウザの印刷機能で「PDFとして保存」

カスタマイズ

CSSカスタマイズ

<style>
.reveal h1 {
    color: #42A5F5;
}

.reveal code {
    background: #272822;
    padding: 2px 6px;
}
</style>

JavaScriptカスタマイズ

Reveal.initialize({
    controls: true,
    progress: true,
    center: true,
    hash: true,
    transition: 'slide'
});

ベストプラクティス

1. 1スライド1メッセージ: 情報を詰め込みすぎない
2. 視覚的に: 図やコードを活用
3. コントラスト: テーマに合わせた配色
4. フォントサイズ: 最小でも24px以上
5. アニメーション控えめ: 過度なエフェクトは避ける

トラブルシューティング

reveal.jsが読み込まれない

CDNから読み込んでいるため、インターネット接続を確認してください。 オフライン使用の場合は、reveal.jsをローカルにダウンロードして参照を変更します。

コードハイライトが機能しない

highlight.jsが正しく読み込まれているか確認してください。 言語指定が正しいか確認（例:

language-cpp

）

スライドが表示されない

ブラウザの開発者コンソールでエラーを確認してください。 多くの場合、HTMLの構文エラーやJavaScriptのエラーです。

高度な使い方

縦方向のスライド

<section>
    <section>メイントピック1</section>
    <section>詳細1-1</section>
    <section>詳細1-2</section>
</section>

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

<ul>
    <li class="fragment">最初に表示</li>
    <li class="fragment">次に表示</li>
    <li class="fragment">最後に表示</li>
</ul>

スピーカーノート

<aside class="notes">
    これは発表者だけに見えるノートです。
    重要なポイントをメモしておけます。
</aside>

参考リンク

• reveal.js 公式ドキュメント
• reveal.js GitHub
• コード例集

制限事項

• インターネット接続が必要（CDN使用時）
• 最新のブラウザ推奨（IE11非対応）
• 大量の画像使用時はパフォーマンスに注意

バージョン情報

• reveal.js: 4.5.0
• highlight.js: 11.8.0

---

使用例:

次のトピックでプレゼンテーションを作成してください：
- タイトル: "Agentベース開発"
- テーマ: night
- スライド5枚
- コード例を含む

このプロンプトで、完全なHTMLプレゼンテーションが生成されます！