aws-samples / aws-samples/sample-spec-driven-presentation-maker
スライド+スピーカーノート同時表示ビュー(発表者モード)の追加
- Dominant language
- Python
- Stars
- 128
- Forks
- 10
- Avg merge
- 4d 40m
- Merged PRs (30d)
- 8
Description
## スライド+スピーカーノート同時表示ビュー(発表者モード)の追加
### 概要
スライドプレビュー画面に、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` の取得は初回のみ(ポーリングのたびに取得しない)
Contributor guide
Assessment
This issue has not been assessed yet.