slideshow

プラグインのインストール： このスキルが HyperFrames プラグイン内にある場合、セットアップや最新状態の確認を行う前に、プラグインの実行ルールに従ってください。

HyperFrames スライドショー

スライドショーは、通常のコンポジション（/hyperframes の契約が適用されます）に、どのシーンがスライドで、どのようにつながるかを示す JSON アイランドを 1 つ加えたものです。成果物は実行中のデッキであり、MP4 ではありません。

動画プロジェクトからの変更点

• 各スライドはコンポジションファイル内の最上位シーンです：data-composition-id、data-start、data-duration、data-label、data-width、data-height を指定します。スライドを囲むマスターのルートコンポジションはありません。
• コンポジションごとにアイランドを 1 つ、<body> の上部付近に HTML で記述します（スクリプトで生成してはいけません。present はファイルを静的に読み取ります）。

<script type="application/hyperframes-slideshow+json">
  {
    "slides": [
      { "sceneId": "hook", "notes": "Pause on the number." },
      {
        "sceneId": "problem",
        "fragments": [11.0, 15.0],
        "hotspots": [
          {
            "id": "h1",
            "label": "Where does $40B come from?",
            "target": "market-detail",
            "region": { "x": 55, "y": 60, "w": 40, "h": 20 }
          }
        ]
      }
    ],
    "slideSequences": [
      { "id": "market-detail", "label": "Market sizing", "slides": [{ "sceneId": "mkt-math" }] }
    ]
  }
</script>

• sceneId はシーンの data-composition-id と一致します（または startTime／endTime を指定します）。notes は発表者専用です。ttsScript、ttsAudioUrl、ttsDurationMs は予約済みですが、まだ接続されていません。
• フラグメントは絶対タイムライン時刻（data-start と同じクロック）で、スライドの [start, end] 内に配置します。ナビゲーションではシークのみを行い、再生はしません。各ホールド状態は、その時刻へタイムラインを直接シークしたときに正しく表示される必要があります。フラグメントのないスライドは、そのスライド内の静止フレームから始まります。
• 分岐スライドは通常のシーンで、メインの slides 配列には含めず、slideSequences のみに記載します。ホットスポットの target はシーケンスの id です。region はパーセンテージで指定するボックスです（全画面ボタンにする場合は省略します）。戻ると、ホットスポットがあったスライドに戻ります。
• 観客が読む必要のあるテキストは、1920×1080 で少なくとも 40 px にしてください。名前の付いたビジュアルを手作業で作成する前に、npx hyperframes catalog --query "<the visual, in English>" --json を検索してください。インストールされていないものも含め、レジストリ全体を順位付けして表示します。

既存ページの移植

• 元の見た目、動き、インタラクション、メディアの挙動を維持し、ウィジェット、プレーヤー、ビジュアライザーを近似で置き換えずに移植してください。
• ページ上のスクロール、ホイール操作、カメラレイヤーによって動いていたものは、スライドナビゲーション時に次の焦点へカメラを移動させます。ページが目に見えてスクロールしてはいけません。元の動きにない反転は加えず、各移動を直接的なものにしてください。
• スクリーンショット、投稿、グラフ、コード、読み取れるテキストを含む画像は証拠として扱います。アスペクト比を維持し（object-fit: contain）、四辺すべてで切り抜きがないか確認してください。
• コピーした <video>／<audio> にはすべて data-start と data-duration が必要です（音声を再生する場合は data-has-audio="true" を指定します）。また、preload="none" は指定しないでください。カスタムのメディアコントロールは、独自のタイマーではなく、ネイティブ要素のイベントと currentTime を読み取ります。
• 重ねて配置した非表示のスライドには、opacity: 0、visibility: hidden、pointer-events: none をすべて同時に設定してください。そうしないと、見えないレイヤーがクリックを妨げます。

提示して引き渡す

• デッキを MP4 にレンダリングしないでください：render は最初のシーンだけを残し、通知なしに途中で切り詰めます。静止画の場合は、各スライドで snapshot --at を実行します。
• npx hyperframes check --json の結果が問題なしになるまで実行します。スライドショーのルールでは、すべての sceneId が解決されること、すべてのホットスポットの target が存在すること、フラグメントがスライド内に収まること、メインラインのスライドが重複しないことを確認します。
• npx hyperframes present <project-dir> で配信し、表示された URL を引き渡します：「Present をクリックするか、P キーを押すと、視聴者用タブが開きます。」
• プロジェクトのルートにある index.html は、動作するデッキとして開ける必要があります。<hyperframes-player src="…"> を <hyperframes-slideshow> で囲み、必要に応じて元のコンポジションをサブフォルダーに配置します。このコンポーネントは、Present（P）、前へ／次へ、カウンター、全体のミュート、全画面表示、スワイプ、ホットスポット、プレゼンターノート（編集可能で、デッキごとに保持）、スライド終了時のメディア停止を管理します。これらを独自に実装しないでください。
• 画面共有：Google Meet では視聴者用のタブを共有します。これにより、バックグラウンドでもレンダリングが続きます。Zoom では視聴者用タブを別ウィンドウにドラッグして、そのウィンドウを共有します。ウィンドウが完全に覆われると、描画が停止します。
• present を使わずにプレーヤーバンドル単体から開いたデッキには、回避策が必要です：references/standalone-harness.md。