# プレイヤー UI — 軌道修正（P1 完了時）

## 目指す体験

UGC モック（`../UGC/index.html`）と同様、**1 画面で 3D ダンス · 楽譜 · 実写カメラを切り替え**、ホームから **Explore を必須にせず `player.html?work=` へ直行**する。

Sitemap STEP 2「プレイヤー」が正本。P0〜P1 では PoC として Karaoke を別タブ起動していたが、**シェルは platform 側に集約**する。

## フェーズ

| Phase | 内容 | 状態 |
|-------|------|------|
| **UI-1** | `player.html` 一体レイアウト、ビュー切替 UI、アスペクト比、Work API メタデータ、**楽譜 = Karaoke iframe embed**（`muvicEmbed=1` → 自動ステージ） | **実装済（P1 直後）** |
| **UI-2** | 3D ダンス = CDS3D embed（player: transport 左 + 9:16 ステージ / studio: フル UI）、`cds3d-bridge.js` | **PoC 完了** |
| **UI-3** | カメラ / 録画 / Remote Singing 統合 | **一部済** — overlay・B1 完了モーダル・9:16 aspect 連携・ガイド紫スライダー。**カメラタブ**は自撮りプレビュー PoC のみ（歌唱・録画は **楽譜/Karaoke**）— **機能拡張は保留**（将来再精査） |
| **UI-4** | ホーム / Explore のビジュアルを UGC `cds3d_home.html` 級に拡張 | **PoC 強化（C 済）** — グリッドカード · Explore 空状態 · サイドナビ `?api=1` · G4 409 トースト · **`home-feature.js`**（ヒーロー / タイアップ同期 · Studio 条件表示）· ヘッダ検索 · ランキング行サムネ · カバー `onerror` フォールバック · サイド **準備中** プレースホルダ — [home-layout.md](./home-layout.md) |
| **UI-5 / Transport v3** | embed 内 transport → 親 **`muvic:transportRequest`** リレー · 3D `clockSync` / postMessage 修正 | **PoC 完了** — [transport-sync-v2.md](./transport-sync-v2.md#transport-v3embed--親--実装済) · `embedVersion` 10+ |
| **UI-6（P2）** | コンクール **ルーム参加** · WS カウントダウン · 分割プレビュー / バトン待機 | **S2〜S6 済** — [contest-sync.md](./contest-sync.md) |

## 技術メモ

- **楽譜:** `js/karaoke-bridge.js` → `iframe#karaokeFrame`（8790 + 8782）。重ね録り — [LEGACY-CLIENTS.md](../LEGACY-CLIENTS.md)。
- **3D:** `js/cds3d-bridge.js` → `iframe#cds3dFrame`（8765）。振付は Work API `assets.motion.url` または PoC `/poc/motion/:id`。**振付なし Work** は `hasMotion: false` — 3D タブ無効・CDS3D iframe は遅延ロードしない（[work-master-time.md](./work-master-time.md)）。
- **マスター尺 / BGM:** Work API `durationSec` + `assets.masterAudio.url`（PoC `/poc/bgm/:id`）。**Transport v2/v3:** [transport-sync-v2.md](./transport-sync-v2.md) · `js/player-transport.js` · iframe 送信 `js/embed-post-message.js`
- **9:16:** 楽譜 = 狭いセーフ枠 / 3D = platform 全幅 iframe + CDS3D 内レイアウト。親 → iframe `postMessage` `{ type: 'muvic:viewportAspect', aspect }`（Karaoke + CDS3D）。
- **兄弟アプリ:** マージせず embed — [LEGACY-CLIENTS.md](../LEGACY-CLIENTS.md)。
- **導線:** ホーム / Explore のグリッドカード — サムネ・タイトル・**観る・歌う** = `playerPageHref`、**Studio** = `studioPageHref`。リスト表示は submit 等で従来どおり。

## ローカル確認

1. 8780 / 8782 / 8790 / **8765**
2. `player.html?work=work_demo_001&api=1` → **楽譜** / **3Dダンス** / 9:16 切替
3. `GET http://127.0.0.1:8782/works/work_demo_001` で `assets.motion.url` / `assets.score.url` が付いていること
4. **3D 振付読込:** `motion.url` 先 JSON に `keyframes[]`。Player 3D でタイムライン **0:08.0** 等。CDS3D トースト「Muvic: 振付…」は VRM 読込トーストで上書きされうる