---
name: html-presentation
description: Generate HTML-based presentations with reveal.js or similar frameworks. Use when creating web-based presentations.
---

# 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を統合したスライド
- データ可視化の実例
- インタラクティブな要素

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

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

```bash
# ローカルサーバーを起動
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カスタマイズ

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

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

### JavaScriptカスタマイズ

```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のエラーです。

## 高度な使い方

### 縦方向のスライド

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

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

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

### スピーカーノート

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

## 参考リンク

- [reveal.js 公式ドキュメント](https://revealjs.com/)
- [reveal.js GitHub](https://github.com/hakimel/reveal.js)
- [コード例集](https://revealjs.com/demo/)

## 制限事項

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

## バージョン情報

- reveal.js: 4.5.0
- highlight.js: 11.8.0

---

**使用例:**

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

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