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

または、単純に `i...