画像アップロード機能#

ID#

ia001-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: プレビュー表示