html-presentation

このスキルは、マークダウン形式のコンテンツから、プロフェッショナルな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として保存:

1. ChromeまたはChromiumベースのブラウザで開く
2. URLに ?print-pdf を追加: index.html?print-pdf
3. ブラウザの印刷機能で「PDFとして保存」

CSSカスタマイズ

```html

```

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

```

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

```html

• 最初に表示
• 次に表示
• 最後に表示

```

スピーカーノート

```html

```

• [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プレゼンテーションが生成されます！