#52スコア 4/5物流・倉庫

AI に配送追跡ボードを作らせてみた — 3回手組みされた「配送ストップ」を RouteStops に（やってみた #52）

ルート: /tracking
デスクトップ表示
モバイル表示

375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。

解説記事

AI に配送追跡ボードを作らせてみた — 3回手組みされた「配送ストップ」を RouteStops に（やってみた #52）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。物流/倉庫(WMS)6枚目——配送追跡 / 運行管理（便一覧 × 配送ストップの状態追跡 × 予定vs実績ETA × 現在地 × 遅延/不在/再配達）。

#51 の配車（出発前）に続く、運行中の監視ボード。各便の配送ストップを、完了/配送中(現在地)/不在/遅延/未配の状態と、予定ETA・実績到着・遅延分とともに追う。配送センターのオペレーターが一日中眺める画面。

結果 — 4/5

tsc/build 緑・console 0・375px・便一覧＋進捗・便を選ぶとストップ一覧・現在地が判別可能（aria-current="step"）・状態更新・不在→再配達で KPI 再計算・遅延読み上げ・h1 1個。

今回の本題 — 「配送ストップ」が3回目 → RouteStops に

物流の3画面が、順序付きの配送ストップ一覧を Timeline の中で手組みしていた（#47 ピッキングのウォークパス・#51 配送順・#52 追跡）。cold AI が最大の穴に名指しし、Timeline に何が足りないかを明確化:

Missing higher-order primitive: a RouteStops / Itinerary. Timeline は縦 <ol>・マーカー・variant をくれるが、追跡ルートには (a) 現在地 の概念が無い（aria-current を配線しない）・(b) 予定vs実績 の時刻ペアが無い（TimelineTime は単一）・(c) per-item status が無い（マーカー色を手で選ぶ）・(d) 末尾の actions slot が無い。~120行の per-stop markup を手組み。

3回ルール発火で RouteStops(#228)（PR #236）を出荷:

const stops: RouteStopItem[] = [
  { id: "1", title: "佐藤 一郎", status: "completed", plannedTime: "09:30", actualTime: "09:28" },
  { id: "3", title: "高橋 花子", status: "current", plannedTime: "10:15", actualTime: "10:21",
    actions: <Button size="sm">完了</Button> },
  { id: "4", title: "田中 工業", status: "failed", actions: <Button size="sm">再配達を設定</Button> },
  { id: "5", title: "山田 太郎", status: "delayed", delayMinutes: 18 },
]
<RouteStops stops={stops} />
  • 各ストップの status（pending/current/completed/failed/delayed）がマーカー（完了→check・不在→×・遅延→clock・他→番号）・状態 Badge・current は aria-current="step"＋ring＋現在地 を駆動
  • plannedTime/actualTime（"HH:MM"）が 予定/実績ペア と 符号付き遅延（Delta） を描画（遅れ→destructive・早着→success）——時刻から自動計算、または delayMinutes
  • per-stop actions slot・meta・コネクタ線
  • 出荷済みの Badge＋Delta を合成（また primitive が積み重なった）・トークン駆動でダークモード無料

ブラウザ実証: 6ストップ・current は1つだけ aria-current="step"・「2分 早着」(09:28 vs 09:30=success)・「8分 遅れ」(destructive)・明示 delayMinutes:18・per-stop ボタン。

複利も確認

  • Meter(前回 #51 build) — 便の進捗（完了/総数）に採用「role="meter"＋accessible name/valuetext が無料」。
  • Badge(#51 で span 修正) — 全状態バッジに採用「inline <span>・hydration 問題なし」＝前回の fix がこの画面でクラッシュを防いだ。
  • Delta（±分の早着/遅れ）・Statistic（6 KPI）・Progress tone・Alert(aria-live) も。

起票だけ / 軽微（3回ルール未達 or docs）

  • 🟡 Meter の自動トーンは"容量"意味（満載→warning/超過→destructive）で、"進捗"には逆（完了=good）。cold AI は進捗に Meter を使い tone を明示で上書き。進捗には Progress(tone)、容量には Meter が正しい住み分け（docs で明確化すべき）。
  • 🟡 EmptyState の headingLevel デフォルトが 2——<h2> を持つ section 内では headingLevel={3} を渡さないと飛ぶ（CardTitle as と同系の発見性）。

学び — primitive が primitive を積み上げる段

Badge + Delta（既存）→ RouteStops（合成）
ScanInput → ScanGate（合成）/ Progress tone → Meter（拡張）

50回を超えて、新しい primitive はゼロから作るのではなく、既に出荷した primitive を合成して作る段に入った。RouteStops は Badge と Delta を内部に持つ。ScanGate は ScanInput を、Meter は Progress の隣に。kit が厚くなると、穴を埋める部品自体が既存部品の合成になり、一貫性（トークン・a11y・ダークモード）が自動で乗る。cold テストが浮かび上がらせる穴は、もう"基礎部品の不在"ではなく"基礎部品の組み合わせ方"へ移った。

次回予告（やってみた #53）

  • 別業界へ（医療/不動産/製造など業界特有UI）。物流は6枚で十分育った（ScanInput/ScanGate/Meter/RouteStops/Delta を残した）。次の業界で、これらが発掘されるか観測。方針: 1業界3〜5枚・可能な限り違う内容・業界特有UI最優先。

試す

まだ alpha。3回手組みされた配送ストップを、既存の Badge＋Delta を合成した RouteStops に括り出した回。

<!-- 公開前: 相互URL差込／スクショ確定／EN(dev.to)ミラー -->

使用した @gunjo/ui コンポーネント

この画面のソースが直接 import している部品です。

AlertAlertDescriptionAlertTitleBadgeBadgePropsButtonCardCardContentCardDescriptionCardHeaderCardTitleDeltaEmptyStateMeterMeterToneProgressSelectSeparatorSheetSheetContentSheetDescriptionSheetHeaderSheetTitleStatisticTabsTabsListTabsTriggerTimelineTimelineItem

cold AI が組み上げた実コード

ファイル名をクリックでソースを展開できます。