画像アップロード機能

Mon, 01 Jan 0001 00:00:00 +0000

画像アップロード機能#

ID#

ia001-upload

概要#

画像アップロード機能の相互作用設計を定義する

種別	ドキュメント
要件	req001-upload
UI	scr001-upload
API	api001-upload
API	api002-upload
API	api003-upload
API	api004-upload
インフラ	infra001-upload
セキュリティ	sec001-upload

ユースケース#

graph LR
 Actor((ユーザー))

 subgraph アップロード
 UC1[画像を選択してプレビューする]
 UC2[画像をアップロードする]
 end

 subgraph 閲覧
 UC3[アップロード済み画像の一覧をファイル名で確認する]
 UC4[ファイル名を選択して画像を閲覧する]
 end

 Actor --> UC1
 Actor --> UC2
 Actor --> UC3
 Actor --> UC4

シーケンス#

画像アップロード#

sequenceDiagram
 autonumber
 actor User as ユーザー
 participant FE as フロントエンド
 participant BE as バックエンド
 participant S3 as S3
 participant DB as DB

 User->>FE: ファイル選択
 FE->>FE: クライアントバリデーション
 FE->>FE: プレビュー表示

 User->>FE: アップロードボタン押下
 FE->>BE: api001-upload
 Note over FE,BE: X-Trace-ID ヘッダー付与

 BE->>BE: サーバーバリデーション
 BE->>S3: PutObject 署名付きURL生成
 S3-->>BE: uploadUrl
 BE-->>FE: uploadUrl, key

 FE->>S3: PUT uploadUrl（バイナリ直接送信）
 S3-->>FE: 200 OK

 FE->>BE: api002-upload
 BE->>S3: HeadObject（存在確認）
 BE->>BE: サーバーバリデーション
 BE->>DB: メタデータ保存
 DB-->>BE: 保存完了
 BE-->>FE: 201 Created（id, url）

 FE->>User: 成功メッセージ・リスト更新

画像閲覧#

sequenceDiagram
 autonumber
 actor User as ユーザー
 participant FE as フロントエンド
 participant BE as バックエンド
 participant DB as DB
 participant S3 as S3

 User->>FE: 初期表示
 FE->>BE: api003-upload
 Note over FE,BE: メタデータ（ID・ファイル名）のみ取得。画像実体は取得しない
 BE->>DB: 画像一覧取得
 DB-->>BE: [{id, fileName, createdAt}]
 BE-->>FE: リスト返却
 FE->>User: ファイル名リスト表示

 User->>FE: ファイル名クリック
 Note over FE,BE: 選択時に初めて画像実体（閲覧用URL）を取得
 FE->>BE: api004-upload
 BE->>S3: GetObject 閲覧用 Presigned URL 生成
 BE-->>FE: url
 FE->>User: プレビュー表示

相互作用設計 on 設計書

画像アップロード機能

画像アップロード機能#

ID#

概要#

関連仕様・設計#

ユースケース#

シーケンス#

画像アップロード#

画像閲覧#