Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

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

Open
  • Is something wrong?
#20 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
72/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Quiet
Tech stack
typescript
Domain
frontend

Research direction

Start with web-ui/src/hooks/usePreferences.ts and web-ui/src/components/deck/SlideCarousel.tsx to trace the existing Full and Grid modes, then inspect web-ui/src/services/deckService.ts for the GET /decks/{id}?include=slideJson response and notes parsing. Done means Presenter appears between Full and Grid, shows the current previewUrl slide with its notes, supports arrow keys and buttons with an indicator, handles missing notes and mobile stacking, and fetches slideJson only once.

Written by the indexing model from the issue text.

Description

enhancement

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

概要

スライドプレビュー画面に、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 の取得は初回のみ（ポーリングのたびに取得しない）
Dominant language
Python
Stars
129
Forks
10
Avg merge
2h 44m
Merged PRs (30d)
46

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

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

All issues in aws-samples/sample-spec-driven-presentation-maker

Similar issues

More Python issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.