https://Hitamuki.github.io/image-upload/design/ui/Recent content in 画面 on 設計書Hugojahttps://Hitamuki.github.io/image-upload/design/ui/0_%E7%94%BB%E9%9D%A2%E4%B8%80%E8%A6%A7/Mon, 01 Jan 0001 00:00:00 +0000https://Hitamuki.github.io/image-upload/design/ui/0_%E7%94%BB%E9%9D%A2%E4%B8%80%E8%A6%A7/<h1 id="画面一覧">画面一覧<a class="anchor" href="#%e7%94%bb%e9%9d%a2%e4%b8%80%e8%a6%a7">#</a></h1> <table> <thead> <tr> <th style="text-align: left">ID</th> <th style="text-align: left">画面名</th> <th style="text-align: left">URI</th> <th style="text-align: left">概要</th> </tr> </thead> <tbody> <tr> <td style="text-align: left"><a href="https://Hitamuki.github.io/image-upload/design/ui/scr001-upload/">SCR001</a></td> <td style="text-align: left">画像アップロード画面</td> <td style="text-align: left"><code>/home</code></td> <td style="text-align: left">画像の選択・アップロード・閲覧を行う単一画面</td> </tr> </tbody> </table>https://Hitamuki.github.io/image-upload/design/ui/1_%E7%94%BB%E9%9D%A2%E5%85%B1%E9%80%9A%E4%BB%95%E6%A7%98/Mon, 01 Jan 0001 00:00:00 +0000https://Hitamuki.github.io/image-upload/design/ui/1_%E7%94%BB%E9%9D%A2%E5%85%B1%E9%80%9A%E4%BB%95%E6%A7%98/<h1 id="画面共通仕様">画面共通仕様<a class="anchor" href="#%e7%94%bb%e9%9d%a2%e5%85%b1%e9%80%9a%e4%bb%95%e6%a7%98">#</a></h1> <h2 id="トレーサビリティ">トレーサビリティ<a class="anchor" href="#%e3%83%88%e3%83%ac%e3%83%bc%e3%82%b5%e3%83%93%e3%83%aa%e3%83%86%e3%82%a3">#</a></h2> <h3 id="使い分け">使い分け<a class="anchor" href="#%e4%bd%bf%e3%81%84%e5%88%86%e3%81%91">#</a></h3> <table> <thead> <tr> <th style="text-align: left">ID</th> <th style="text-align: left">目的</th> <th style="text-align: left">生成場所</th> <th style="text-align: left">有効期間</th> <th style="text-align: left">主な用途</th> </tr> </thead> <tbody> <tr> <td style="text-align: left"><strong>trace_id</strong></td> <td style="text-align: left"><strong>横断的トレーサビリティ</strong></td> <td style="text-align: left">Frontend (セッション開始時)</td> <td style="text-align: left">セッション全体</td> <td style="text-align: left">ログ集約・障害調査</td> </tr> <tr> <td style="text-align: left"><strong>request_id</strong></td> <td style="text-align: left"><strong>操作的冪等性</strong></td> <td style="text-align: left">Frontend (各操作開始時)</td> <td style="text-align: left">単一操作</td> <td style="text-align: left">重複実行防止・キャンセル</td> </tr> </tbody> </table> <h3 id="trace_id-の生成と伝播">trace_id の生成と伝播<a class="anchor" href="#trace_id-%e3%81%ae%e7%94%9f%e6%88%90%e3%81%a8%e4%bc%9d%e6%92%ad">#</a></h3> <ul> <li><strong>用途</strong>: ユーザーセッション全体の追跡、横断的なログ検索</li> <li><strong>生成</strong>: アプリ初期化時に UUID v4 を一度だけ生成し、グローバル状態で保持</li> <li><strong>伝播</strong>: 全APIリクエストヘッダー <code>X-Trace-ID</code> に自動付与</li> <li><strong>可視化</strong>: 開発者ツールで表示し、障害調査時に CloudWatch Logs Insights で横断検索</li> </ul> <h3 id="request_id-の生成と管理">request_id の生成と管理<a class="anchor" href="#request_id-%e3%81%ae%e7%94%9f%e6%88%90%e3%81%a8%e7%ae%a1%e7%90%86">#</a></h3> <ul> <li><strong>用途</strong>: 操作の重複防止、非同期処理のキャンセル、リトライ制御</li> <li><strong>生成</strong>: 各操作開始時に UUID v4 を都度生成（ファイルアップロード、API呼び出しなど）</li> <li><strong>管理</strong>: 操作単位でローカルに管理し、処理完了まで保持</li> <li><strong>冪等性</strong>: 同一操作の重複実行を防止するため、request_id を生成して管理</li> <li><strong>キャンセル対応</strong>: 非同期処理のキャンセル時に request_id を使用して処理を特定</li> </ul> <h2 id="プログレスバー">プログレスバー<a class="anchor" href="#%e3%83%97%e3%83%ad%e3%82%b0%e3%83%ac%e3%82%b9%e3%83%90%e3%83%bc">#</a></h2> <h3 id="アップロードプログレスバー">アップロードプログレスバー<a class="anchor" href="#%e3%82%a2%e3%83%83%e3%83%97%e3%83%ad%e3%83%bc%e3%83%89%e3%83%97%e3%83%ad%e3%82%b0%e3%83%ac%e3%82%b9%e3%83%90%e3%83%bc">#</a></h3> <pre class="mermaid">stateDiagram-v2 [*] --&gt; Idle: アップロード開始 Idle --&gt; Uploading: ファイル選択 Uploading --&gt; Processing: アップロード完了 Uploading --&gt; Error: エラー発生 Processing --&gt; Success: 処理完了 Processing --&gt; Error: エラー発生 Error --&gt; Idle: リトライ or キャンセル Success --&gt; Idle: 完了</pre><h3 id="プログレスバーの仕様">プログレスバーの仕様<a class="anchor" href="#%e3%83%97%e3%83%ad%e3%82%b0%e3%83%ac%e3%82%b9%e3%83%90%e3%83%bc%e3%81%ae%e4%bb%95%e6%a7%98">#</a></h3> <ul> <li><strong>表示条件</strong>: ファイルアップロード時、API リクエスト時</li> <li><strong>進捗表示</strong>: パーセンテージと残り時間を表示</li> <li><strong>キャンセル機能</strong>: ユーザーがいつでもキャンセル可能</li> <li><strong>エラー表示</strong>: エラー発生時に詳細メッセージを表示</li> </ul> <h2 id="懸案事項">懸案事項<a class="anchor" href="#%e6%87%b8%e6%a1%88%e4%ba%8b%e9%a0%85">#</a></h2> <h3 id="技術的懸案">技術的懸案<a class="anchor" href="#%e6%8a%80%e8%a1%93%e7%9a%84%e6%87%b8%e6%a1%88">#</a></h3> <ul> <li><strong>ブラウザ互換性</strong>: AbortController の IE サポート</li> <li><strong>ネットワーク切断</strong>: オフライン時の処理方針</li> </ul> <h3 id="uiux-懸案">UI/UX 懸案<a class="anchor" href="#uiux-%e6%87%b8%e6%a1%88">#</a></h3> <ul> <li><strong>エラーメッセージ</strong>: ユーザーフレンドリーなエラー表現</li> <li><strong>アクセシビリティ</strong>: スクリーンリーダー対応</li> </ul> <h2 id="tbd">TBD<a class="anchor" href="#tbd">#</a></h2> <h3 id="機能仕様">機能仕様<a class="anchor" href="#%e6%a9%9f%e8%83%bd%e4%bb%95%e6%a7%98">#</a></h3> <ul> <li><input disabled="" type="checkbox"> <strong>ファイルサイズ制限</strong>: 具体的な上限値の決定</li> <li><input disabled="" type="checkbox"> <strong>同時アップロード数</strong>: 複数ファイル同時アップロードの制限</li> <li><input disabled="" type="checkbox"> <strong>プレビュー機能</strong>: アップロード前の画像プレビュー要否</li> </ul> <h3 id="技術仕様">技術仕様<a class="anchor" href="#%e6%8a%80%e8%a1%93%e4%bb%95%e6%a7%98">#</a></h3> <ul> <li><input disabled="" type="checkbox"> <strong>CDN 対応</strong>: 静的アセットの配信戦略</li> <li><input disabled="" type="checkbox"> <strong>PWA 対応</strong>: Service Worker の導入要否</li> <li><input disabled="" type="checkbox"> <strong>監視体制</strong>: エラーログ収集方法</li> </ul> <h3 id="セキュリティ仕様">セキュリティ仕様<a class="anchor" href="#%e3%82%bb%e3%82%ad%e3%83%a5%e3%83%aa%e3%83%86%e3%82%a3%e4%bb%95%e6%a7%98">#</a></h3> <ul> <li><input disabled="" type="checkbox"> <strong>CSP ポリシー</strong>: Content Security Policy の詳細</li> <li><input disabled="" type="checkbox"> <strong>XSS 対策</strong>: 入力値検証の範囲</li> <li><input disabled="" type="checkbox"> <strong>CSRF 対策</strong>: トークン管理方式</li> </ul> <h3 id="非同期処理の制御">非同期処理の制御<a class="anchor" href="#%e9%9d%9e%e5%90%8c%e6%9c%9f%e5%87%a6%e7%90%86%e3%81%ae%e5%88%b6%e5%be%a1">#</a></h3> <ul> <li> <p><input disabled="" type="checkbox"> <strong>キャンセル機構</strong></p>https://Hitamuki.github.io/image-upload/design/ui/2_%E7%94%BB%E9%9D%A2%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E4%B8%80%E8%A6%A7%E8%A1%A8/Mon, 01 Jan 0001 00:00:00 +0000https://Hitamuki.github.io/image-upload/design/ui/2_%E7%94%BB%E9%9D%A2%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E4%B8%80%E8%A6%A7%E8%A1%A8/<h1 id="画面メッセージ一覧表">画面メッセージ一覧表<a class="anchor" href="#%e7%94%bb%e9%9d%a2%e3%83%a1%e3%83%83%e3%82%bb%e3%83%bc%e3%82%b8%e4%b8%80%e8%a6%a7%e8%a1%a8">#</a></h1> <p>画面上に表示されるすべてのメッセージを管理する。<code>{変数名}</code> は動的に置換される。</p> <h2 id="共通メッセージ">共通メッセージ<a class="anchor" href="#%e5%85%b1%e9%80%9a%e3%83%a1%e3%83%83%e3%82%bb%e3%83%bc%e3%82%b8">#</a></h2> <p>操作結果に応じて汎用的に使用するメッセージ。</p> <table> <thead> <tr> <th style="text-align: left">メッセージID</th> <th style="text-align: left">種別</th> <th style="text-align: left">メッセージテンプレート</th> <th style="text-align: left">変数</th> </tr> </thead> <tbody> <tr> <td style="text-align: left">MSG-UI-C001</td> <td style="text-align: left">成功</td> <td style="text-align: left">{target}を登録しました</td> <td style="text-align: left"><code>target</code>: 対象名（例: 画像）</td> </tr> <tr> <td style="text-align: left">MSG-UI-C002</td> <td style="text-align: left">成功</td> <td style="text-align: left">{target}を更新しました</td> <td style="text-align: left"><code>target</code>: 対象名</td> </tr> <tr> <td style="text-align: left">MSG-UI-C003</td> <td style="text-align: left">成功</td> <td style="text-align: left">{target}を削除しました</td> <td style="text-align: left"><code>target</code>: 対象名</td> </tr> <tr> <td style="text-align: left">MSG-UI-C004</td> <td style="text-align: left">エラー</td> <td style="text-align: left">通信エラーが発生しました。再度お試しください</td> <td style="text-align: left">—</td> </tr> <tr> <td style="text-align: left">MSG-UI-C005</td> <td style="text-align: left">エラー</td> <td style="text-align: left">サーバーエラーが発生しました。しばらくしてから再度お試しください</td> <td style="text-align: left">—</td> </tr> </tbody> </table> <h2 id="個別メッセージ">個別メッセージ<a class="anchor" href="#%e5%80%8b%e5%88%a5%e3%83%a1%e3%83%83%e3%82%bb%e3%83%bc%e3%82%b8">#</a></h2> <table> <thead> <tr> <th style="text-align: left">メッセージID</th> <th style="text-align: left">種別</th> <th style="text-align: left">メッセージテンプレート</th> <th style="text-align: left">変数</th> <th style="text-align: left">発生条件</th> </tr> </thead> <tbody> <tr> <td style="text-align: left">MSG-UI-001</td> <td style="text-align: left">エラー</td> <td style="text-align: left">対応していないファイル形式です</td> <td style="text-align: left">—</td> <td style="text-align: left">ファイル拡張子・MIMEタイプが許可リスト外</td> </tr> <tr> <td style="text-align: left">MSG-UI-002</td> <td style="text-align: left">エラー</td> <td style="text-align: left">ファイルサイズが上限（{maxSize}）を超えています</td> <td style="text-align: left"><code>maxSize</code>: 上限サイズ（例: 5MB）</td> <td style="text-align: left">ファイルサイズが上限超過</td> </tr> <tr> <td style="text-align: left">MSG-UI-003</td> <td style="text-align: left">エラー</td> <td style="text-align: left">アップロードがタイムアウトしました。再度お試しください</td> <td style="text-align: left">—</td> <td style="text-align: left">S3アップロード時のネットワークタイムアウト</td> </tr> <tr> <td style="text-align: left">MSG-UI-004</td> <td style="text-align: left">エラー</td> <td style="text-align: left">アップロードに失敗しました。URLの有効期限が切れている可能性があります</td> <td style="text-align: left">—</td> <td style="text-align: left">Presigned URL有効期限切れ</td> </tr> <tr> <td style="text-align: left">MSG-UI-005</td> <td style="text-align: left">エラー</td> <td style="text-align: left">ファイルアクセス権限がありません</td> <td style="text-align: left">—</td> <td style="text-align: left">S3アクセス権限エラー</td> </tr> <tr> <td style="text-align: left">MSG-UI-006</td> <td style="text-align: left">警告</td> <td style="text-align: left">最大アップロード数に達しました</td> <td style="text-align: left">—</td> <td style="text-align: left">アップロード上限到達時</td> </tr> <tr> <td style="text-align: left">MSG-UI-007</td> <td style="text-align: left">エラー</td> <td style="text-align: left">署名付きURLの取得に失敗しました。再度お試しください</td> <td style="text-align: left">—</td> <td style="text-align: left">Presigned URL取得レスポンスにuploadUrlまたはkeyが含まれない</td> </tr> </tbody> </table>https://Hitamuki.github.io/image-upload/design/ui/scr001-upload/Mon, 01 Jan 0001 00:00:00 +0000https://Hitamuki.github.io/image-upload/design/ui/scr001-upload/<h1 id="画像アップロード画面">画像アップロード画面<a class="anchor" href="#%e7%94%bb%e5%83%8f%e3%82%a2%e3%83%83%e3%83%97%e3%83%ad%e3%83%bc%e3%83%89%e7%94%bb%e9%9d%a2">#</a></h1> <h2 id="id">ID<a class="anchor" href="#id">#</a></h2> <p>scr001-upload</p> <h2 id="関連仕様設計">関連仕様・設計<a class="anchor" href="#%e9%96%a2%e9%80%a3%e4%bb%95%e6%a7%98%e8%a8%ad%e8%a8%88">#</a></h2> <table> <thead> <tr> <th style="text-align: left">種別</th> <th style="text-align: left">ドキュメント</th> </tr> </thead> <tbody> <tr> <td style="text-align: left">要件</td> <td style="text-align: left"><a href="https://Hitamuki.github.io/image-upload/requirements/req001-upload/">req001-upload</a></td> </tr> <tr> <td style="text-align: left">相互作用</td> <td style="text-align: left"><a href="https://Hitamuki.github.io/image-upload/design/interaction/ia001-upload/">ia001-upload</a></td> </tr> <tr> <td style="text-align: left">API</td> <td style="text-align: left"><a href="https://Hitamuki.github.io/image-upload/design/api/images/api001-upload/">api001-upload</a> / <a href="https://Hitamuki.github.io/image-upload/design/api/images/api002-upload/">api002-upload</a> / <a href="https://Hitamuki.github.io/image-upload/design/api/images/api003-upload/">api003-upload</a> / <a href="https://Hitamuki.github.io/image-upload/design/api/images/api004-upload/">api004-upload</a></td> </tr> </tbody> </table> <h2 id="概要">概要<a class="anchor" href="#%e6%a6%82%e8%a6%81">#</a></h2> <p>&hellip;</p> <ul> <li>ユーザーがローカル端末から画像を選択・プレビューし、S3へアップロードする</li> <li>アップロード済み画像のファイル名一覧を表示し、選択した画像をプレビュー閲覧できる</li> </ul> <h2 id="レイアウト">レイアウト<a class="anchor" href="#%e3%83%ac%e3%82%a4%e3%82%a2%e3%82%a6%e3%83%88">#</a></h2> <img src="https://Hitamuki.github.io/image-upload/images/%E7%94%BB%E5%83%8F%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89%E7%94%BB%E9%9D%A2_hu_b975c7e0bc0b1922.png" alt="画像アップロード画面"> <hr> <h2 id="遷移">遷移<a class="anchor" href="#%e9%81%b7%e7%a7%bb">#</a></h2> <p>単一画面（画面遷移なし）</p> <hr> <h2 id="項目">項目<a class="anchor" href="#%e9%a0%85%e7%9b%ae">#</a></h2> <table> <thead> <tr> <th style="text-align: left">No</th> <th style="text-align: left">項目名</th> <th style="text-align: left">種類</th> <th style="text-align: left">説明</th> <th style="text-align: left">初期状態</th> <th style="text-align: left">制約</th> <th style="text-align: left">備考</th> </tr> </thead> <tbody> <tr> <td style="text-align: left">1</td> <td style="text-align: left">画像選択ボタン</td> <td style="text-align: left">Button / Input</td> <td style="text-align: left">ローカルからファイル選択ダイアログを開く</td> <td style="text-align: left">活性</td> <td style="text-align: left">アップロード済み5枚時はDisabled</td> <td style="text-align: left">上限到達時は項目4に「最大アップロード数に達しました」を表示</td> </tr> <tr> <td style="text-align: left">2</td> <td style="text-align: left">選択画像プレビュー</td> <td style="text-align: left">Image</td> <td style="text-align: left">現在選択されている（未アップロード）画像のプレビュー</td> <td style="text-align: left">非表示</td> <td style="text-align: left">—</td> <td style="text-align: left">ファイル選択後に表示。アップロード完了後にクリア</td> </tr> <tr> <td style="text-align: left">3</td> <td style="text-align: left">アップロードボタン</td> <td style="text-align: left">Button</td> <td style="text-align: left">S3へのアップロードとDB登録を開始する</td> <td style="text-align: left">非活性</td> <td style="text-align: left">画像未選択時はDisabled</td> <td style="text-align: left">—</td> </tr> <tr> <td style="text-align: left">4</td> <td style="text-align: left">ステータスメッセージ</td> <td style="text-align: left">Text</td> <td style="text-align: left">成功・エラー・警告を表示する</td> <td style="text-align: left">空</td> <td style="text-align: left">—</td> <td style="text-align: left">アクション結果に応じて動的に更新</td> </tr> <tr> <td style="text-align: left">5</td> <td style="text-align: left">画像リスト</td> <td style="text-align: left">List</td> <td style="text-align: left">アップロード済みのファイル名を一覧表示する</td> <td style="text-align: left">画面表示時にDBから取得</td> <td style="text-align: left">—</td> <td style="text-align: left">画面初期表示時に api003 を呼び出す</td> </tr> <tr> <td style="text-align: left">6</td> <td style="text-align: left">ギャラリープレビュー</td> <td style="text-align: left">Image</td> <td style="text-align: left">リストで選択されたアップロード済み画像のプレビュー</td> <td style="text-align: left">非表示</td> <td style="text-align: left">—</td> <td style="text-align: left">項目5のファイル名クリック時に api004 で取得したURLを表示</td> </tr> </tbody> </table> <hr> <h2 id="アクション">アクション<a class="anchor" href="#%e3%82%a2%e3%82%af%e3%82%b7%e3%83%a7%e3%83%b3">#</a></h2> <table> <thead> <tr> <th style="text-align: left">No</th> <th style="text-align: left">アクション名</th> <th style="text-align: left">トリガー</th> <th style="text-align: left">処理概要</th> <th style="text-align: left">期待結果</th> <th style="text-align: left">API</th> <th style="text-align: left">備考</th> </tr> </thead> <tbody> <tr> <td style="text-align: left">1</td> <td style="text-align: left">初期表示</td> <td style="text-align: left">画面表示時（自動）</td> <td style="text-align: left">アップロード済み画像のメタデータ一覧を取得</td> <td style="text-align: left">項目5にファイル名リスト表示</td> <td style="text-align: left">api003</td> <td style="text-align: left">—</td> </tr> <tr> <td style="text-align: left">2</td> <td style="text-align: left">ファイル選択</td> <td style="text-align: left">画像選択ボタン押下</td> <td style="text-align: left">ファイル形式・サイズをクライアントバリデーション後、プレビューを生成</td> <td style="text-align: left">項目2にプレビュー表示、項目3を活性化</td> <td style="text-align: left">—</td> <td style="text-align: left">バリデーション違反時は項目4にエラー表示(MSG-UI-001/MSG-UI-002)</td> </tr> <tr> <td style="text-align: left">3</td> <td style="text-align: left">アップロード実行</td> <td style="text-align: left">アップロードボタン押下</td> <td style="text-align: left">Presigned URL取得 → S3アップロード → メタデータ保存</td> <td style="text-align: left">項目4に成功メッセージ(MSG-UI-C001)表示、項目5のリスト更新</td> <td style="text-align: left">api001 → api002</td> <td style="text-align: left">完了後にアクション5を実行。失敗時はMSG-UI-C004/MSG-UI-C005を表示</td> </tr> <tr> <td style="text-align: left">4</td> <td style="text-align: left">リスト項目選択</td> <td style="text-align: left">項目5のファイル名クリック</td> <td style="text-align: left">選択画像の閲覧用Presigned URLを個別取得して表示</td> <td style="text-align: left">項目6にプレビュー表示</td> <td style="text-align: left">api004</td> <td style="text-align: left">初期表示時は取得しない（遅延取得）</td> </tr> <tr> <td style="text-align: left">5</td> <td style="text-align: left">プレビュークリア</td> <td style="text-align: left">アップロード完了後（自動）</td> <td style="text-align: left">選択状態と項目2のプレビューをリセット</td> <td style="text-align: left">項目3を非活性化</td> <td style="text-align: left">—</td> <td style="text-align: left">アクション3の完了後に自動実行</td> </tr> </tbody> </table> <hr> <h2 id="バリデーションクライアントサイド">バリデーション（クライアントサイド）<a class="anchor" href="#%e3%83%90%e3%83%aa%e3%83%87%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%af%e3%83%a9%e3%82%a4%e3%82%a2%e3%83%b3%e3%83%88%e3%82%b5%e3%82%a4%e3%83%89">#</a></h2> <p>アクション1（ファイル選択時）に実施する。違反時は項目4にエラーメッセージを表示し、リクエストを送信しない。</p>