html-ppt-presenter-mode

HTML PPT · プレゼンターモード（演讲者模式）

html-ppt マスタースキルへの専用エントリーポイントです。ユーザーが presenter-mode-reveal の全スライド用テンプレートを直接利用できます。

このカードを選ぶとき

Examples ギャラリーでは、「Use this prompt」が上記の example_prompt に設定されています。このプロンプトを受け入れたとき、ユーザーが presenter-mode-reveal のビジュアルアイデンティティそのものを求めている場合は、このカードを選んでください（スクリーンショットと採用理由については、上流の全スライドカタログをご覧ください）。

デッキの作成方法

1. まずマスタースキルを読みます。 作成ルールはすべて skills/html-ppt/SKILL.md に記載されています。内容と対象読者のチェックリスト、 トークンのルール、レイアウトの再利用、プレゼンターモード、キーボードランタイム、 「スライドにプレゼンター専用のテキストを表示しない」というルールを確認してください。
2. 対応するテンプレートフォルダーを使います。 skills/html-ppt/templates/full-decks/presenter-mode-reveal/ から index.html と style.css をプロジェクトにコピーし、.tpl-presenter-mode-reveal の body クラスはそのままにします。
3. 共有ランタイムもテンプレートと一緒に配置します。 上流の index.html は、skills/html-ppt/templates/full-decks/ 内で3階層下にあるため、 ../../../assets/... 経由で共有 CSS／JS にリンクしています。 index.html をプロジェクトにコピーすると、これらの親フォルダー基準の URL は 解決できなくなり、base.css、animations.css、runtime.js が 404 となります。その結果、デッキが有効にならず、スライドの移動も 機能しません。プロジェクトごとに次のいずれかの方法を選んでください。
   • 方法 A — コピーして書き換える（推奨）： skills/html-ppt/assets/fonts.css、skills/html-ppt/assets/base.css、 skills/html-ppt/assets/animations/animations.css、skills/html-ppt/assets/runtime.js を プロジェクト内の assets/（assets/animations/animations.css を含む）にコピーし、 index.html の4つの <link>／<script> タグのパスを ../../../assets/... から、対応するプロジェクト内のパス （assets/fonts.css、assets/base.css、 assets/animations/animations.css、assets/runtime.js）に書き換えます。
   • 方法 B — インライン化： 同じ4つのファイルを読み込み、 <link rel="stylesheet" href="../../../assets/..."> をそれぞれファイルの内容を含む <style>...</style> に置き換え、<script src="../../../assets/runtime.js"> を runtime.js の内容を含む <script>...</script> に置き換えます。 これにより、単体で動作する index.html ができます。 いずれの方法でも、上流の ../../../assets/... URL をそのまま プロジェクトの成果物に含めないでください。これらの URL はリポジトリ内でのみ機能します。
4. テーマを選びます。 デフォルトのトークンで問題ありません。違う雰囲気にしたい場合は、 <link id="theme-link"> 経由で skills/html-ppt/assets/themes/*.css にある36種類のテーマのいずれかを指定し、 T キーで切り替えられるようにします。
5. クラスではなく、デモコンテンツを置き換えます。 .tpl-presenter-mode-reveal のスコープ付き CSS が認識するのは、 テンプレートに含まれる構造クラスだけです。これらはそのまま残してください。
6. 発表者ノートは <aside class="notes"> または <div class="notes"> の中に記述します。 スライド上に表示されるテキストとして記述しないでください。

クレジット

ビジュアルシステム、レイアウト、テーマ、ランタイムのキーボード操作モデルは、 上流の MIT ライセンス lewislulu/html-ppt-skill に基づいています。skills/html-ppt/LICENSE にある LICENSE ファイルは、再配布時もそのまま残してください。