Functional Requirements

機能要件

Functional Requirements

1. 用語一覧表示 — Term List Display

FR-001

テーブル形式での一覧表示 Term List in Table Format

AWS 用語をテーブル形式で表示するDisplay AWS terms in a table format.
表示カラム：No. / 用語名 / 略称 / カテゴリ / 説明 / 操作（管理者のみ）Columns: No. / Term name / Abbreviation / Category / Description / Actions (admin only)
1 ページあたり 20 件を表示するDisplay 20 items per page.

FR-002

ページング Pagination

用語が 21 件以上の場合はページングを表示するShow pagination when there are 21 or more terms.
前ページ・次ページ・ページ番号ボタンを表示するDisplay previous, next, and page number buttons.
現在のページ数と全ページ数を表示する（例: 全 60 件 / 3 ページ）Show current page and total count (e.g., 60 items / 3 pages).

2. 検索機能 — Search

FR-003

インクリメンタル検索（サジェスト式） Incremental Search (Suggestion-style)

検索バーに 1 文字入力するごとにリアルタイムで検索結果を更新するUpdate search results in real time with each keystroke.
入力値に基づいてテーブル・カード表示をフィルタリングするFilter the table and card view based on the input value.
デバウンス処理（300ms）により過剰なリクエストを抑制するSuppress excessive requests using a 300ms debounce.
検索バーのクリアボタン（×）でキーワードをリセットできるReset the keyword with the clear button (×) in the search bar.

FR-004

検索対象の切り替え Search Target Toggle

検索対象をスイッチ UI で切り替えられる Toggle the search target using a switch UI:
- 単語名（デフォルト）：name フィールドに対して部分一致検索Term name (default): partial-match search on the name field
- 説明文：description フィールドに対して部分一致検索Description: partial-match search on the description field
スイッチの状態は画面を維持している間は保持されるThe switch state is retained while the page remains open.
どちらのモードでも大文字・小文字を区別しない（case-insensitive）Both modes are case-insensitive.

FR-005

検索結果のページング Search Result Pagination

検索結果が 21 件以上の場合もページングを適用するApply pagination even when search results contain 21 or more items.
検索クエリ・カテゴリ・表示モード変更時はページを 1 に戻すReset to page 1 when the search query, category, or display mode changes.

3. 用語管理（CRUD）— Term Management (CRUD)

管理者専用：FR-006〜FR-009 は管理者ログイン済み状態でのみ実行可能。ゲスト（未ログイン）には操作ボタンが表示されない。 Admin only: FR-006 through FR-009 are available only when logged in as an admin. Action buttons are hidden for guests.

FR-006

用語の新規登録 Add New Term

「用語を追加」ボタンからモーダルを開く（管理者のみ表示）Open a modal from the "Add Term" button (visible to admins only).
入力項目：Input fields:

フィールド / Field	UI コントロール / Control	必須 / Req.	説明 / Description
用語名（name）Term name	テキスト入力Text input	◎	AWS サービス名や用語AWS service name or term
略称（abbreviation）Abbreviation	テキスト入力Text input	—	例: EC2, S3, IAM
カテゴリ（category）Category	Select（ドロップダウン）Select (dropdown)	—	固定値リストから選択Select from fixed value list
説明（description）Description	テキストエリアTextarea	◎	用語の意味・説明文Meaning and explanation of the term
説明画像Description image	画像アップロード UIImage upload UI	—	PNG / JPEG / GIF / WebP（5MB 以下）PNG / JPEG / GIF / WebP (max 5MB)

カテゴリは CATEGORIES 定数に定義された固定値から選択する（自由入力不可）Category must be selected from the fixed values defined in the CATEGORIES constant (free input not allowed).
バリデーション：用語名・説明は必須入力Validation: term name and description are required.
同一の用語名は登録不可（重複チェック）Duplicate term names are not allowed (uniqueness check).

FR-007

用語の編集 Edit Term

テーブル行・カードの「編集」ボタンからモーダルを開く（管理者のみ表示）Open the edit modal from the "Edit" button in a table row or card (admin only).
全フィールドを編集可能（カテゴリは Select から選択のみ）All fields are editable (category can only be selected from the dropdown).
保存後はテーブル・カードに反映されるChanges are reflected in the table and card view after saving.

FR-008

用語の削除 Delete Term

テーブル行・カードの「削除」ボタンから削除を実行する（管理者のみ表示）Execute deletion from the "Delete" button in a table row or card (admin only).
削除前に確認ダイアログを表示するShow a confirmation dialog before deletion.
削除後はテーブル・カードから該当行が消えるThe entry is removed from the table and card view after deletion.
削除時に紐付く R2 画像も合わせて削除されるThe associated R2 image is also deleted along with the term.

FR-009

用語詳細ダイアログ（閲覧） Term Detail Dialog (View)

テーブルの行またはカードをクリックすると、用語の詳細ダイアログが開く（全ユーザー）Clicking a table row or card opens the term detail dialog (all users).
詳細ダイアログでは以下を表示する：用語名・略称・カテゴリ・説明・説明画像（ある場合）The dialog displays: term name, abbreviation, category, description, and description image (if available).
Esc キーまたは閉じるボタンでダイアログを閉じるClose the dialog with the Esc key or the close button.

4. フィルタリング・表示 — Filtering & Display

FR-010

カテゴリフィルター Category Filter

カテゴリをチップ形式のボタン（CategoryChipFilter）で絞り込めるFilter by category using chip-style buttons (CategoryChipFilter).
「すべて」チップで全カテゴリを表示（デフォルト）The "All" chip shows all categories (default).
カテゴリ選択時は選択したカテゴリの用語のみを表示するWhen a category is selected, only terms in that category are shown.
検索キーワードとカテゴリフィルターは組み合わせて使用できるSearch keywords and category filters can be combined.

FR-011

テーブル / カード表示切替 Table / Card View Toggle

ViewToggle ボタンでテーブル表示とカード表示を切り替えられるToggle between table and card view using the ViewToggle button.
モバイル幅（768px 未満）ではデフォルトをカード表示とするCard view is the default on mobile (below 768px).
デスクトップ幅ではデフォルトをテーブル表示とするTable view is the default on desktop width.

FR-012

コマンドパレット Command Palette

コマンドパレットボタン（⌘K）またはキーボードショートカットでコマンドパレットを開けるOpen the command palette via the button (⌘K) or keyboard shortcut.
コマンドパレット内でキーワードを入力すると用語名でクイック検索できるTyping a keyword in the palette triggers a quick search by term name.
用語を選択すると詳細ダイアログが開くSelecting a term opens its detail dialog.

5. 画像機能 — Image Features

FR-013

説明画像のアップロード Upload Description Image

管理者は用語の追加・編集時に説明画像をアップロードできるAdmins can upload a description image when adding or editing a term.
対応形式：JPEG / PNG / GIF / WebPSupported formats: JPEG / PNG / GIF / WebP
ファイルサイズ上限：5MBMaximum file size: 5MB
アップロードした画像は Cloudflare R2 に保存される（terms/original/ キー）Uploaded images are stored in Cloudflare R2 under the terms/original/ key.
アップロード後に画像最適化 Worker が軽量版（terms/slim/）を非同期生成するAfter upload, the image optimization Worker asynchronously generates a lightweight version under terms/slim/.

FR-014

説明画像の表示 Display Description Image

詳細ダイアログ・カードビューで説明画像を表示するDisplay the description image in the detail dialog and card view.
軽量版（slim）が存在する場合は軽量版を優先して表示するPrefer the lightweight (slim) version when it exists.
画像は /api/media/[...path] エンドポイント経由でプロキシ配信するImages are served via the /api/media/[...path] proxy endpoint.

6. UI / UX

FR-015

レスポンシブ対応 Responsive Design

PC（1280px 以上）での表示を主対象とするPrimarily targets PC displays (1280px and above).
タブレット（768px 以上）でも使用できるAlso usable on tablets (768px and above).
モバイル（768px 未満）ではカード表示をデフォルトとし、モバイルシートで検索 UI を提供するOn mobile (below 768px), card view is the default and a mobile sheet provides the search UI.

FR-016

ローディング状態の表示 Loading State Display

検索・ページング操作中はスケルトンローディングを表示する（テーブル・カード両形式）Show skeleton loading during search and pagination operations (for both table and card formats).

FR-017

エラー表示 Error Display

API エラー発生時はエラーメッセージをトースト通知で表示するDisplay error messages as toast notifications when an API error occurs.

FR-018

ダークモード Dark Mode

ヘッダーの ThemeToggle ボタンでライトモード / ダークモードを切り替えられるToggle between light and dark mode using the ThemeToggle button in the header.
システム設定に応じた初期テーマを適用するApply the initial theme based on the system preference.

7. 管理者認証 — Admin Authentication

FR-019

管理者ログイン Admin Login

ヘッダーの「管理者ログイン」ボタンからログインダイアログを開く（ゲスト時のみ表示）Open the login dialog from the "Admin Login" button in the header (shown for guests only).
メールアドレス・パスワードを入力してログインするLog in by entering an email address and password.
認証成功後、HMAC 署名付き Cookie セッションが発行されるOn successful authentication, an HMAC-signed cookie session is issued.
認証失敗時はエラーメッセージを表示するDisplay an error message on authentication failure.

FR-020

管理者ログアウト Admin Logout

ヘッダーの「ログアウト」ボタンで Cookie セッションを破棄する（ログイン済み時のみ表示）Invalidate the cookie session using the "Logout" button in the header (shown when logged in).
ログアウト後はゲスト状態に戻り、CRUD 操作ボタンが非表示になるAfter logout, the user returns to guest state and CRUD buttons are hidden.

8. ユースケース図 — Use Case Diagram

👤 ゲスト（未ログイン）/ Guest

FR-001,002用語一覧を閲覧するBrowse the term list
FR-003,004,005用語を検索するSearch for terms
FR-010カテゴリで絞り込むFilter by category
FR-011テーブル / カード表示を切り替えるToggle table / card view
FR-012コマンドパレットで検索するSearch via command palette
FR-009用語の詳細を確認するView term details
FR-019管理者ログインを行うPerform admin login

🔑 管理者（ログイン済み）/ Admin

—上記ゲスト操作を全て実行できるAll guest actions available
FR-006用語を登録するAdd a new term
FR-007用語を編集するEdit a term
FR-008用語を削除するDelete a term
FR-013説明画像をアップロードするUpload a description image
FR-020ログアウトするLogout