スライド＋スピーカーノート同時表示ビュー（発表者モード）の追加

[okamoto-aws]

スライド＋スピーカーノート同時表示ビュー（発表者モード）の追加

概要

スライドプレビュー画面に、PowerPointの発表者モードのようなビューを追加する。現在のスライドPNGとスピーカーノートを同一画面に表示し、矢印キーまたは矢印ボタンでスライド間をめくれるようにする。

現在のビューモード

• Full: スライドを最大サイズで縦スクロール表示
• Grid: スライドサムネイルをグリッド表示

追加するビューモード

• Presenter: Full と Grid の間に配置

レイアウト

┌─────────────────────────────────┐
│  [← スライド 2/5 →]            │
├───────────────────┬─────────────┤
│                   │ Speaker     │
│   スライドPNG     │ Notes       │
│   (大きめ表示)    │             │
│                   │ テキスト    │
│                   │ 表示領域    │
│                   │ (スクロール)│
├───────────────────┴─────────────┤
│  ◀  ●●○●●  ▶                   │
└─────────────────────────────────┘

操作

• 左右矢印キー（←→）でスライド切り替え
• 画面上の矢印ボタンでも切り替え可能
• スライドインジケーター（ドットまたは番号）で現在位置を表示

データソース

• スライドPNG: 既存の previewUrl（presigned URL）
• スピーカーノート: presentation.json 内の各スライドの notes フィールド
  • 現在 GET /decks/{id}?include=slideJson で取得可能
  • slideJson 内に notes が含まれている

実装箇所

• web-ui/src/hooks/usePreferences.ts — viewMode に "presenter" を追加
• web-ui/src/components/deck/SlideCarousel.tsx — Presenterビューのレンダリング追加、ビュー切り替えボタン追加
• web-ui/src/services/deckService.ts — スピーカーノートの取得（slideJson パース）

考慮事項

• スピーカーノートがないスライドではノート領域を「No speaker notes」等で表示
• モバイルではスライドとノートを縦積みにするレスポンシブ対応
• slideJson の取得は初回のみ（ポーリングのたびに取得しない）