HTML Presentation Generator Skill
HTMLベースのプレゼンテーションを生成するスキルです。reveal.jsを使用した美しく、インタラクティブなスライドショーを作成できます。
概要
このスキルは、マークダウン形式のコンテンツから、プロフェッショナルなHTMLプレゼンテーションを自動生成します。
主な機能
-
reveal.jsベース: 業界標準のプレゼンテーションフレームワーク
-
レスポンシブデザイン: あらゆる画面サイズに対応
-
豊富なテーマ: 複数のビルトインテーマ
-
コードハイライト: プログラミングコードの美しい表示
-
PDF出力対応: プレゼンテーションをPDFとしてエクスポート可能
-
スピーカーノート: 発表者用のメモ機能
-
アニメーション: スライド遷移とフラグメントアニメーション
使用方法
基本的な使い方
HTMLプレゼンテーションを作成してください。 タイトル: "C++のメモリ管理" スライド内容:
- イントロダクション
- メモリリークの問題
- スマートポインタ
- まとめ
カスタマイズオプション
以下の設定でHTMLプレゼンテーションを作成:
- テーマ: black
- トランジション: slide
- コードハイライト: monokai
- タイトル: "技術プレゼンテーション"
生成されるファイル
presentation/ ├── index.html # メインのプレゼンテーションファイル ├── README.md # 使い方ガイド └── assets/ # カスタムアセット（オプション） ├── images/ └── code/
サポートする機能
- スライドの種類
-
タイトルスライド: プレゼンテーションの表紙
-
コンテンツスライド: 通常のコンテンツ
-
コードスライド: シンタックスハイライト付きコード表示
-
2カラムレイアウト: 左右分割レイアウト
-
画像スライド: 画像メインのスライド
- テーマオプション
利用可能なテーマ:
-
black (デフォルト): ダークテーマ
-
white : ライトテーマ
-
league : グレーベース
-
beige : ベージュ
-
sky : ブルー系
-
night : ダーク + コントラスト
-
serif : セリフフォント
-
simple : シンプル
-
solarized : Solarizedカラー
- トランジション効果
-
none : トランジションなし
-
fade : フェード
-
slide : スライド（デフォルト）
-
convex : 凸面
-
concave : 凹面
-
zoom : ズーム
- コードハイライト
サポートする言語:
-
C/C++
-
C#
-
Python
-
JavaScript
-
Java
-
Rust
-
Go
-
その他多数
実装例
例1: 技術プレゼンテーション
入力:
C#とC++の相互運用についてのプレゼンテーションを作成。 スライド:
- タイトル: "C# ⇔ C++ Interop"
- なぜ相互運用が必要か
- P/Invokeの基本
- コード例
- まとめ
生成される内容:
-
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として保存:
-
ChromeまたはChromiumベースのブラウザで開く
-
URLに ?print-pdf を追加: index.html?print-pdf
-
ブラウザの印刷機能で「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メッセージ: 情報を詰め込みすぎない
-
視覚的に: 図やコードを活用
-
コントラスト: テーマに合わせた配色
-
フォントサイズ: 最小でも24px以上
-
アニメーション控えめ: 過度なエフェクトは避ける
トラブルシューティング
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プレゼンテーションが生成されます！