aws-samples / aws-samples/sample-spec-driven-presentation-maker

スライド+スピーカーノート同時表示ビュー(発表者モード)の追加

Open
#20 0 comments 0 reactions 0 assignees View on GitHub
enhancement
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.