このデモについて

店舗ごとの在庫を一元管理し、地図から在庫のある店舗を探せるWebサービスのMVPを、実際に動く形で試作しました。店舗・商品・在庫数はすべて架空のデータです。

1. このページで商品名（例：「モバイルバッテリー」）を検索すると、地図上の店舗が在庫状況で色分けされます。
2. スマートフォンで下のQRコードを読み取り、スタッフ画面を開きます（デモ用PIN：1234）。
3. 「バーコードを読み取る」を押し、テスト用バーコードをPC画面に表示してカメラで読み取ります。手元の実際の商品のバーコードでも試せます（未登録の商品はその場で登録できます）。
4. 在庫数を変更して「更新する」を押すと、このページの地図と一覧に数秒で反映されます。

本番の推奨構成	Next.js（React）＋ Supabase（PostgreSQL・認証・リアルタイム配信）
地図	Leaflet ＋ 国土地理院の地図タイル（APIキー・従量課金なし。Google マップへの切替も可能）
バーコード読取	ブラウザ標準の BarcodeDetector ＋ ZXing（iPhone の Safari にも対応）。アプリのインストール不要
このデモの構成	Cloudflare Pages ＋ Functions（API）＋ D1（SQLite）。本番では同じテーブル設計を PostgreSQL に移行します