majiayu000 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として保存:
- 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>
参考リンク
制限事項
- インターネット接続が必要（CDN使用時）
- 最新のブラウザ推奨（IE11非対応）
- 大量の画像使用時はパフォーマンスに注意
バージョン情報
- reveal.js: 4.5.0
- highlight.js: 11.8.0
使用例:
次のトピックでプレゼンテーションを作成してください：
- タイトル: "Agentベース開発"
- テーマ: night
- スライド5枚
- コード例を含む
このプロンプトで、完全なHTMLプレゼンテーションが生成されます！