Feature / File 08

FW JS 管理側 公開側

画像アップロード

プロフィール、商品、現場写真、証票画像を登録します。

画像アップロードは、人物、商品、施工状況、本人確認、領収書、証票などの画像を、レコードに紐付けて保存する機能です。Roundtableでは「何の画像を、誰が、どの画面で登録し、どこで確認するか」を先にそろえると、発注者、実装者、AIに指示する人が同じ前提で画像管理を設計できます。

商品画像、現場写真、証票画像をアップロードし、登録前にプレビューしている業務画面例

この機能でできること

プロフィール写真、商品写真、現場写真、証票画像、本人確認画像などを画面から登録し、一覧、詳細、公開ページ、帳票用データとして利用できます。アップロード前後にプレビューを表示し、画像の種類、撮影日、説明、公開可否、確認状態をあわせて管理できます。

文字だけでは伝わりにくい状態や証跡を、業務データと一緒に残します。 画像はファイルそのものだけでなく、登録者、対象レコード、用途、公開範囲、確認済みかどうかを一緒に決めると運用しやすくなります。

よくある利用場面

商品やメニューの写真を登録する 商品マスタや公開ページに表示する画像を登録し、一覧や詳細画面で確認できるようにします。
現場写真を案件に残す 施工前、施工中、施工後の写真を案件や作業報告に紐付け、担当者間で状況を共有します。
証票や本人確認画像を確認する 領収書、許可証、身分証などの画像を受け取り、管理側で確認状態や差し戻し理由を管理します。

プロンプト例

アップロード対象、画像の用途、登録できる画面、プレビュー表示、削除可否、公開範囲、容量や形式の制限をまとめて伝えると、実装範囲を決めやすくなります。

プロンプト 商品管理に画像アップロードを追加してください。商品登録と編集画面でメイン画像と補足画像を登録できるようにし、保存前にプレビューを表示します。一覧ではメイン画像をサムネイル表示し、詳細画面では大きめに確認できるようにしてください。公開ページには公開可の画像だけを表示し、管理者は画像の差し替えと削除ができるようにしてください。

この機能を使うときのポイント

画像の用途表示用、確認用、証跡用、帳票用など、後でどう使う画像なのかを分けて考えます。
登録できる人管理者だけか、顧客や会員も公開側から登録できるかを決め、削除や差し替え権限も確認します。
公開範囲社内だけで見る画像、顧客へ見せる画像、公開ページに出す画像を混在させないようにします。
容量と形式スマホ写真の大きさ、PNG/JPEGの扱い、サムネイル表示、保存容量の増え方を先に確認します。

この機能を実装するときのコツ

画像アップロードは、DB上の画像項目、保存ファイル、プレビュー表示、公開可否、削除処理を分けて設計します。FBPでは画像型やファイル型の項目と標準の保存処理を使い、一覧ではサムネイル表示、詳細では大きめの確認表示につなげます。公開側で受け付ける場合は、対象レコードを特定するURLやログイン状態を確認し、不要な画像が外部から見えないようにします。画面側では内蔵JavaScriptのファイル選択やプレビューの挙動を使い、登録前に利用者が画像を確認できる導線にします。