画像アップロード画面#

ID#

scr001-upload

関連仕様・設計#

種別ドキュメント
要件req001-upload
相互作用ia001-upload
APIapi001-upload / api002-upload / api003-upload / api004-upload

概要#

…

  • ユーザーがローカル端末から画像を選択・プレビューし、S3へアップロードする
  • アップロード済み画像のファイル名一覧を表示し、選択した画像をプレビュー閲覧できる

レイアウト#

画像アップロード画面

遷移#

単一画面（画面遷移なし）

項目#

No項目名種類説明初期状態制約備考
1画像選択ボタンButton / Inputローカルからファイル選択ダイアログを開く活性アップロード済み5枚時はDisabled上限到達時は項目4に「最大アップロード数に達しました」を表示
2選択画像プレビューImage現在選択されている（未アップロード）画像のプレビュー非表示—ファイル選択後に表示。アップロード完了後にクリア
3アップロードボタンButtonS3へのアップロードとDB登録を開始する非活性画像未選択時はDisabled—
4ステータスメッセージText成功・エラー・警告を表示する空—アクション結果に応じて動的に更新
5画像リストListアップロード済みのファイル名を一覧表示する画面表示時にDBから取得—画面初期表示時に api003 を呼び出す
6ギャラリープレビューImageリストで選択されたアップロード済み画像のプレビュー非表示—項目5のファイル名クリック時に api004 で取得したURLを表示

アクション#

Noアクション名トリガー処理概要期待結果API備考
1初期表示画面表示時（自動）アップロード済み画像のメタデータ一覧を取得項目5にファイル名リスト表示api003—
2ファイル選択画像選択ボタン押下ファイル形式・サイズをクライアントバリデーション後、プレビューを生成項目2にプレビュー表示、項目3を活性化—バリデーション違反時は項目4にエラー表示(MSG-UI-001/MSG-UI-002)
3アップロード実行アップロードボタン押下Presigned URL取得 → S3アップロード → メタデータ保存項目4に成功メッセージ(MSG-UI-C001)表示、項目5のリスト更新api001 → api002完了後にアクション5を実行。失敗時はMSG-UI-C004/MSG-UI-C005を表示
4リスト項目選択項目5のファイル名クリック選択画像の閲覧用Presigned URLを個別取得して表示項目6にプレビュー表示api004初期表示時は取得しない（遅延取得）
5プレビュークリアアップロード完了後（自動）選択状態と項目2のプレビューをリセット項目3を非活性化—アクション3の完了後に自動実行

バリデーション（クライアントサイド）#

アクション1（ファイル選択時）に実施する。違反時は項目4にエラーメッセージを表示し、リクエストを送信しない。

検証項目条件エラー時の挙動
ファイルサイズ5,242,880 バイト（5MB）超MSG-UI-002表示・項目3を非活性
ファイル拡張子.jpg .jpeg .png .gif .webp 以外MSG-UI-001表示・項目3を非活性
MIMEタイプ（file.type）image/jpeg image/png image/gif image/webp 以外MSG-UI-001表示・項目3を非活性

エラーハンドリング#

エラー種別発生箇所HTTPステータスメッセージID対応
Presigned URL有効期限切れS3アップロード時403 ForbiddenMSG-UI-004再度アップロードを促す
S3アクセス権限エラーS3アップロード時403 Access DeniedMSG-UI-005管理者連絡を促す
ネットワークタイムアウトS3アップロード時-MSG-UI-003リトライ処理実行
ファイルサイズ超過（S3制約）S3アップロード時400 Bad RequestMSG-UI-002クライアントバリデーション強化
API通信エラーapi001/api002呼び出し時-MSG-UI-C004リトライ処理実行
サーバーエラーapi001/api002呼び出し時500+MSG-UI-C005しばらく待って再試行を促す

懸案事項#

データ整合性の懸念#

  • S3とDBの不整合: API設計(api002)と同様の懸念事項
    • フロントエンドがS3アップロード完了後、バックエンド処理でエラー発生時の対応
    • 影響: S3に実態のみが残る状態
    • 要検討: クリーンアップ処理 or ロールバック機構

UI表示の懸念#

  • 大量データ時の表示性能: TBD
    • 画像リスト（項目5）の件数増加による画面表示の遅延
    • 対応方針: ページネーション導入 or 無限スクロール
    • 影響: ユーザー体験の低下、メモリ使用量の増加

エラーハンドリングの網羅性#

  • S3直接アップロード時のエラー: TBD

    • Presigned URL有効期限切れ（403 Forbidden）
    • S3アクセス権限エラー（403 Access Denied）
    • ネットワークタイムアウト
    • ファイルサイズ超過（S3制約）
    • 対応: 各エラーに応じたメッセージ表示、リトライ処理

  • その他エラーシナリオ: TBD

    • 現状定義外のエラーパターンの網羅
    • 影響: ユーザー体験の低下

TBD#

UI/UXの作り込み#

  • スケルトン表示

    • 初期表示時(api003呼び出し)のローディング表示
    • ギャラリープレビュー(api004呼び出し)のローディング表示
    • 実装方式: CSSアニメーション or ライブラリ利用

  • プログレスバー

    • S3アップロードの進捗表示
    • 実装方式: XMLHttpRequest.upload.onprogress or AWS SDK Progress
    • UI配置: 項目4のステータスメッセージ領域に統合 or 専用エリア

パフォーマンス最適化#

  • 画像プレビューの最適化

    • 大容量画像のプレビュー生成時のパフォーマンス
    • サムネイル生成のクライアントサイド実装
    • メモリ使用量の制御

  • リスト表示の仮想化

    • 大量アップロード時のパフォーマンス対策
    • 実装方式: react-window or react-virtualized
    • 導入閾値: 100件以上（検討中）
Backward 画面メッセージ一覧表 データベース Forward