Delivery Manager

配送業務のすべてを、ひとつの画面で。

従業員5〜30名の配送会社向けの統合業務管理システムです。Excel・紙・ホワイトボードで管理されがちな配送案件・配車・ドライバー・車両・荷主・売上を一元管理し、ドライバーはスマートフォンから配送ステータスを更新できます。

▶ デモ：https://delivery-manager-azure.vercel.app（登録不要。ログイン画面の「管理者として体験」「ドライバーとして体験」からすぐに触れます）

• 「管理者として体験」「ドライバーとして体験」を押すと、訪問者ごとに専用のデモ会社（架空の配送会社・案件 約6,000件）がその場で作られます。登録は不要です
• 表示している数字はすべて DB の実データから集計しています（固定値の表示はありません）
• 設計資料：docs/ARCHITECTURE.md

画面

配車ボード（ドラッグで割り当て・時刻変更）	配送案件（検索・CSV 入出力）
売上・利益分析	荷主の請求・未請求
案件の詳細（ステータス履歴・担当）	設定（営業所・操作履歴）

ドライバー画面（スマートフォン）

スクリーンショットは、アプリを起動した状態で BASE_URL=http://localhost:3000 npm run screenshots を実行すると撮り直せます（新しいデモ環境を作って撮影します）。

主な機能

管理者（経営者・配車担当）

• ダッシュボード：本日の配送状況・売上見込み・今月の売上と粗利益・前月比、遅延や車検期限のアラート、配送先とドライバーの現在地の地図
• 配送案件：登録・編集・削除、条件検索（URL に保持）、CSV の書き出しと取り込み（Shift_JIS・UTF-8 対応、確認画面つき）
• 配車管理：時間 × ドライバーのボードでドラッグして割り当て、予定の重複は確認してから保存。地図表示に切り替えると、ドライバーの現在地（今どの案件に向かっているか）も確認できる
• ドライバー・車両・荷主の管理：実績・担当車両・車検と保険の期限・荷主ごとの請求と未請求
• 売上・分析：期間ごとの売上・経費・粗利益・遅延率、荷主別・ドライバー別ランキング、前の期間との比較
• 通知：ドライバーの完了・失敗、遅延、メモを受け取る（画面は30秒ごとに自動で最新になる）
• 設定：会社名・営業所、誰がいつ何を操作したかの操作履歴

ドライバー（スマートフォン）

• 本日の担当案件を時間順に表示し、「集荷完了 → 配送開始 → 配送完了」をワンタップで更新（失敗は理由を必須で記録）
• 集荷先・配送先への道案内（Google マップ）、荷主への電話、メモの送信
• 通信が切れたときは操作ボタンを止め、表示が何時の内容かを示す（送れていない操作が完了したように見せない）
• 位置情報の共有：本人がオンにしている間だけ、現在地を1分ごとに配車担当者の地図へ送る（画面上部に「共有中」を表示）

技術スタック

分類	採用	ライセンス
フレームワーク	Next.js 16（App Router・Server Actions）/ React 19 / TypeScript	MIT
UI	Tailwind CSS 4 / shadcn/ui（Radix UI）/ lucide-react / sonner	MIT・ISC
DB	PostgreSQL（公開環境は Neon）/ postgres.js	PostgreSQL License・MIT・Unlicense
ログイン	アプリ内で実装（Node.js 標準の scrypt・HttpOnly Cookie のセッション）	—
グラフ・地図	Recharts / Leaflet + OpenStreetMap	MIT・BSD-2-Clause（地図データ © OpenStreetMap contributors, ODbL）
フォーム・検証	React Hook Form + Zod	MIT
その他	@dnd-kit/core（ドラッグ）/ Papa Parse（CSV）	MIT
テスト	Vitest / Playwright	MIT・Apache-2.0

依存関係は必要なものに絞っています（API キーや有料契約が必要なライブラリ・サービスは使っていません）。

当初は Supabase（PostgreSQL・Auth・Realtime）で作り、公開の段階で Neon（PostgreSQL）＋アプリ内のログインに切り替えました。DB の設計（RLS・DB 関数・マイグレーション）はそのままで、auth.uid() などの関数を db/bootstrap.sql で用意しています。

設計のポイント

• 権限は DB で守る：すべての表に会社 ID を持たせ、PostgreSQL の RLS（行レベルセキュリティ）で会社・ドライバーごとにデータを分けています。サーバーは操作のたびにログインユーザーの権限で SQL を実行するため、画面の表示制御やサーバー処理に漏れがあっても他社・他のドライバーのデータには触れられません
• 最小限の権限：ブラウザに渡す鍵や接続情報はありません（DB にはサーバーからだけ接続）。表の権限は必要な操作だけを許可し（会社は名前の変更のみ、操作履歴は追加のみなど）、ステータス更新や請求はルールを検証する DB 関数を経由させています
• 数字が画面ごとに食い違わない：売上・粗利益・遅延の定義は DB の集計関数に一本化し、ダッシュボード・分析・ドライバー・荷主の画面で同じ関数を使っています（DB テストで一致を確認）
• 業務ルールを3か所で守る：画面（選べないようにする）→ サーバー（理由を返す）→ DB（トリガーで拒否）。例：休職中のドライバーへの割り当て、集荷後の担当変更、請求済み案件の料金変更
• 同時操作と通信の切断：編集を開いた時点の「更新の印」と画面に表示していた状態を一緒に送り、その後に誰かが更新していたら上書きしません
• 大量データ：一覧はサーバー側で20件ずつ取得し、3,000件以上の案件をブラウザへ一度に送りません

性能

会社を19社（案件 118,714件）に増やした状態で、各画面のデータ取得を管理者・ドライバーの権限で計測しました（ローカルの PostgreSQL 16、scripts/dev/perf.ts）。

画面	データ取得
すべての画面	2〜50 ms
配送案件の一覧（検索・件数を含む）	44 ms
CSV 書き出し（1社の全案件 約6,000件）	122 ms

セキュリティ

• 入力はすべて画面とサーバーで同じ Zod スキーマで検証。URL の検索条件も検証し、不正な値は無視します
• Content Security Policy（nonce 付き）、X-Frame-Options: DENY などのセキュリティヘッダー
• CSV の書き出しは表計算ソフトで数式として実行されないよう、= + - @ で始まる値を無害化
• ログイン：パスワードは scrypt（salt 付き）で保存し、照合は一定時間で比較します。利用者がいないときも同じだけ時間をかけ、登録の有無を応答時間から推測できないようにしています
• セッション：Cookie には推測できないランダムな値（HttpOnly・SameSite=Lax・本番では Secure）を入れ、DB にはその SHA-256 だけを保存します。毎回 DB で確かめるので、ログアウトや期限切れはすぐに効きます
• 回数の制限：ログインの失敗（同じメールアドレスで15分に10回、同じ接続元で15分に30回）とデモの作成（同じ接続元で1時間に30回、DEMO_CREATE_LIMIT_PER_HOUR）
• 公開デモは訪問者ごとに別の会社を作るため、第三者が他の閲覧者のデータを変更できません。同時に存在できるデモの数に上限（DEMO_MAX_ACTIVE、既定 30）を設け、24時間後に自動削除します。「デモを終了する」を押すとその場で削除します
• 案件の登録・配車・削除、マスタの変更、CSV の入出力、請求、設定の変更を操作履歴（audit_logs）に記録します

ローカルで動かす

PostgreSQL 16 と Node.js 22 があれば動きます。

npm install
cp .env.example .env.local      # DATABASE_URL をローカルの PostgreSQL に合わせる
npm run db:local:reset          # DB 作成 → ロールと auth スキーマ（db/bootstrap.sql）→ マイグレーション
npm run db:seed                 # デモデータ（Seed 値で再現可能）
npm run db:verify               # データの整合性チェック（21項目）
npm run dev                     # http://localhost:3000

ログイン画面の「管理者として体験」「ドライバーとして体験」から操作できます。Seed で作るアカウント：[email protected] / demo-admin-2026、[email protected] / demo-driver-2026。

テスト

npm run typecheck
npm run lint
npm test            # 単体テスト・DB テスト（220件）
npm run test:e2e    # ブラウザでの E2E テスト（PC 15件・スマートフォン 8件）

種類	主な内容
DB テスト	管理者とドライバー・会社間の権限分離（RLS と表の権限）、ステータス遷移、画面間の数字の一致、マスタと請求のルール、CSV 入出力、通知、同時編集、デモデータの整合性、現在地の送信・停止と見える範囲、ログインの情報（セッション等）が利用者の権限から見えないこと、マイグレーションの再実行
単体テスト	ステータス遷移、配車ボードの配置計算、CSV の解析、入力チェック、CSP、デモデータの配車（予定が重ならない）、パスワードの保存と照合、公開環境の設定の確認、デモ用の模擬位置の計算
E2E テスト	ログイン・ログアウト（ログアウトした Cookie が使えないこと）、デモの終了、案件の登録・編集・削除、配車ボードでの割り当て、ドライバーのステータス更新と売上への反映、権限（未ログイン・ドライバー・他のドライバーの案件）、CSV の書き出しと取り込み、スマートフォンのメニュー操作と横はみ出し、位置情報の共有から管理者の地図への表示、離席中の自動更新の停止

E2E テストはテストごとに専用のデモ会社を作り、終わったら削除します。画面で JavaScript のエラー（CSP の違反を含む）が出たテストは失敗にします。GitHub Actions では、型チェック・Lint・マイグレーションとデモデータの検証・単体テストと DB テスト・ビルド・E2E テスト（ビルドしたアプリを next start で起動）を順に実行します。

デプロイ（Vercel + Neon）

Vercel・Neon のプランや利用規約（商用利用の可否、無料プランの制限）は、公開前にご確認ください。どちらも無料プラン（クレジットカード不要）で動きます。

作業は Vercel の画面だけで完結します。DB の準備（マイグレーション・見本の会社の作成・整合性チェック）は、本番の公開（Production デプロイ）のたびにビルドの前で自動的に行います（npm run vercel-build → scripts/deploy/vercel-build.ts）。プレビュー（ブランチごとの公開）では DB を変更しません。

1. Vercel で GitHub のリポジトリをインポートする。最初のデプロイは DB がまだないため、必要な設定を一覧にして失敗します
2. プロジェクトの Storage から Neon を追加し（リージョンは Singapore、プランは Free）、このプロジェクトにつなぐ（Connect Project。環境は Production と Preview、Custom Prefix は空のまま）。DATABASE_URL・DATABASE_URL_UNPOOLED が自動で設定されます
3. Settings → Environment Variables に次を追加する

変数	内容	公開範囲
SEED_LOGIN_PASSWORD	見本の会社にログインするアカウント（[email protected]・[email protected]）のパスワード。12文字以上。README の既定パスワードは使えない	サーバー専用
CRON_SECRET	期限切れデモの削除（Vercel Cron）の認証用。16文字以上のランダムな文字列	サーバー専用
NEXT_PUBLIC_MAP_TILE_URL	地図タイルの URL（任意。アクセスの多い本番では契約したタイル配信を推奨）	ブラウザに公開してよい

4. Deployments から最新のデプロイを Redeploy する。ビルドのログに「DB の準備ができました」と出れば完了です
5. ログイン画面から「管理者として体験」を開いて確認する。期限切れのデモは毎日 3:00（日本時間）に削除されます（vercel.json の crons）
6. GitHub の Actions タブの 「公開環境の E2E テスト」 に公開した URL を入力して実行すると、公開環境に対して E2E テスト（PC・スマートフォン）を行えます（.github/workflows/production-e2e.yml）。テストで作ったデモは画面の「デモを終了する」で削除します。リポジトリの Secrets に E2E_LOGIN_PASSWORD（SEED_LOGIN_PASSWORD と同じ値）を登録すると、メールアドレスとパスワードでのログインも確かめます

アプリのサーバー（Vercel Functions）は DB と同じシンガポール（sin1）で動かします（vercel.json）。Neon には東京のリージョンがないため、DB との往復を短くするほうを優先しています。

Neon の無料プランは計算時間が月 100 CU 時間（最小の 0.25 CU なら約 400 時間）で、5 分間問い合わせがなければ DB が止まり、その間は計算時間を使いません。画面を開いたまま席を離れても DB が止まるよう、10 分操作がなければ自動更新（30秒ごとの再取得・現在地・遅延の確認）を止め、操作すると再開します。

地図について

• 地図は Leaflet と OpenStreetMap のタイルを使います（API キー・契約は不要）
• 配送先のマーカーの位置は住所から求めた架空の位置です（GPS ではありません）。画面にも「デモ表示」と明記しています

ドライバーの現在地

• ドライバーがスマートフォンで「位置情報の共有」をオンにすると、ブラウザの位置情報（GPS）を1分ごとに送り、管理者の地図（ダッシュボード・配車管理の地図）に表示します。地図は20秒ごとに取り直します
• 送るのはアプリを開いている間だけです（ブラウザの制約。画面を閉じている間も送るにはネイティブアプリが必要です）。位置情報の利用には HTTPS が必要です
• 保存するのはドライバーごとの最新の1件だけで、移動の履歴は残しません。停止すると削除し、1日以上更新のない位置は毎日の定期処理で削除します。共有の開始・停止は操作履歴に残ります
• 書き込みは DB の関数だけで行い、送れるのはドライバー本人の位置だけです。見られるのは自社の管理者と本人だけです（RLS）
• 地図の印は、GPS の位置は塗りつぶし、10分以上更新がない位置は薄く表示します。2時間以上更新がなければ表示しません
• デモ・見本の会社では、共有していないドライバーの位置を本日の予定とステータスから求めた模擬位置（破線の印・「模擬位置」と表示）で表示します。実在の会社のデータでは模擬位置は使いません
• Google マップなどの有料 API や契約は使っていません
• OpenStreetMap の公開タイルには利用方針があり、アクセスの多い本番運用には向きません。本番で使う場合は NEXT_PUBLIC_MAP_TILE_URL に契約したタイル配信サービスの URL を設定してください

デモ環境の仕組み

• 「体験」ボタンを押すと一時的な利用者としてログインし、訪問者ごとに専用の配送会社をその場で生成します。他の閲覧者の操作は見えません
• データは「今」を基準に作るので、いつ開いても稼働中の配送会社に見えます（過去6か月の実績・本日の進行中の配送・今後1週間の予定）
• デモ会社でのみ、管理者 ⇔ ドライバーの画面を切り替えられます（切り替え後は DB の権限もドライバーになります）
• 24時間後に自動で削除します（ユーザーメニューの「デモを終了する」でその場で削除することもできます）。上限に達したときは期限切れのデモを先に片付け、それでも空きがなければ「しばらくしてから」と案内します

開発の経緯

フェーズ	内容
Phase 1 基盤	レイアウト・DB 設計（RLS）・デモデータ・ログインとデモ体験
Phase 2 コア	ダッシュボード・配送案件・配車ボード・ドライバー画面・連携
Phase 3 管理	ドライバー・車両・荷主（請求・未請求）・売上と利益の分析・経費
Phase 4 付加価値	配送マップ・通知・CSV 入出力・同時編集とオフライン対策
Phase 5 仕上げ	権限の締め直しとセキュリティヘッダー・設定画面と操作履歴・エラー処理・性能確認・レスポンシブ・E2E テスト