FLOW
商品が店舗に届き、本部へ請求されるまで
仕様書の運用フローを、そのまま画面にしています。

STEP 1
業務用米を発注1箱24kg(3kg袋×8)。箱数を入れると、重量・袋数へ自動換算します。
STEP 2
店舗は専用リンクで店舗名・住所・メール宛先は自動表示。毎回の入力はありません。
STEP 3
発送準備中 → 発送済み状態は2つだけ。更新日時と更新者を記録し、請求の対象になります。
STEP 4
本部へ月次で一括請求発送済みだけを当月末で締め、請求書・明細・領収証をPDFで出力します。TRY IT
3分で体験できるルート
上から順にクリックすると、仕様書の主なポイントをひと通り確認できます。データはこのブラウザの中だけに保存されるので、自由に操作してください。
HIGHLIGHTS
仕様書の「難しいところ」が、実際に動きます
画面の見た目だけでなく、判定やデータの整合性まで実装したうえでお見せしています。
店舗専用リンクで、入力ゼロ
推測できないランダムなURLから、店舗・発送先・メール宛先をサーバー側で判定。再発行すると旧リンクは即時に無効になります。
仕様書 第3章 / 受入 A-01・A-12
発送日から逆算する期限
「発送日の2営業日前17:00」を、祝日・国民の休日(今月のシルバーウィーク)を飛ばしてさかのぼって計算。日付を進めて締切超過も試せます。
仕様書 第4・7章
宛先ごとのメール到達
複数の宛先に1通ずつ送信し、宛先別に「到達・未達・確認中」を表示。未達の宛先だけ再送でき、メール障害でも注文は失われません。
仕様書 第6・11章 / 受入 A-04〜A-06
二重送信でも注文は1件
送信ごとの一意キー(冪等性キー)で、二重クリックや再試行でも同じ発注書番号を返します。デモ用の再現ボタン付き。
仕様書 第5章 / 受入 A-13
取消は関連データごと削除
発注・明細・メール履歴を1つの処理で削除し、発送一覧・請求集計・スプレッドシートからも除外。ログには番号と実行者だけを残します。
仕様書 第7章 / 受入 A-09
発送済みだけを月次請求
準備中が残っていると請求は確定できません。請求書・明細・領収証はPDF、明細はExcelでも出力。単価と税率は注文時点の値で固定されます。
仕様書 第9章 / 受入 A-10
STORE LINKS
店舗ごとの専用リンク
本部の店舗管理で発行されるリンクを、店舗ごとに開けます。休止中の店舗や、無効になったリンクの表示も確認できます。
SPEC MAP
仕様書とデモの対応表
| 仕様書 | デモの画面 | 確認できること |
|---|---|---|
| 第3章 店舗専用リンク | 店舗・宛先 / 店舗の発注画面 | リンクの発行・再発行・無効化、休止店舗の受付不可、メール宛先の管理 |
| 第4章 商品・発送日 | 商品管理 / 発送日設定 | 複数商品への拡張、発送日/休業日の登録、上限・公開の切替、期限の計算プレビュー |
| 第5章 店舗発注フロー | 店舗の発注画面 | 入力 → 確認 → 完了、期限表示、保存とメールの分離表示、二重送信対策 |
| 第6章 メール・到達状況 | 発注書一覧 / 連携・メール | 宛先別の到達状況、未達のみ再送、強制バウンスの試験 |
| 第7章 変更・取消 | 発注書一覧(詳細) | 取消時の削除範囲の確認、発送済みは取消不可、期限超過の警告 |
| 第8章 発送管理 | 発注書一覧 | 2状態の更新、一括更新、更新日時・更新者の記録 |
| 第9章 月次請求・領収証 | 月次請求 | 発送済みのみ集計、確定前の検証、請求書・明細・領収証のPDF、Excel出力 |
| 第11章 外部連携・障害時 | 連携・メール | Sheetsミラー、API停止の再現と再送、バックアップと復元テスト |
| 第15章 受入試験 | 受入試験 A-01〜14 | 14項目を自動チェックで実行、画面でも同じ操作を確認 |
NOTES
このデモについて
デモで再現していること
- 画面の構成・文言・状態表示は、仕様書 v0.3 と UI画面集に沿っています。
- 期限計算・二重送信防止・到達状態・請求集計などの判定は、実際にロジックが動いています。
- 店舗名・住所・メールアドレス・金額・振込先は、すべて仮のデータです。
- デモ日時は 2026/9/18 14:05 に固定しています(右上の時計から進められます)。
実際のWordPress版との違い
- データはこのブラウザ内だけに保存されます(実運用ではMySQL)。
- メールは実際には送らず、到達イベントを模擬しています(実運用は配信サービスのWebhook)。
- PDFはブラウザ上で画像化して作成します(実運用はサーバー側で日本語フォントを埋め込み)。
- 実装方針・確認したい点は WordPress実装設計 にまとめました。