#113スコア 4/5運輸：航空

AI に航空の運航管理を作らせてみた — 3画面で手組みされた「機材繰りバー」が、ついに Gantt に入った（やってみた #113）

ルート: /flight-operations
デスクトップ表示
モバイル表示

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

解説記事

AI に航空の運航管理を作らせてみた — 3画面で手組みされた「機材繰りバー」が、ついに Gantt に入った（やってみた #113）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。航空の事業者側（toB）1枚目——運航管理（OCC）/ 機材繰り（運航ボード・機材ローテーション・不正常運航アラート）。

航空 toC（フライト予約 #112）に続く事業者側。観測の本命——機材繰り（各機の1日＝便→折返し→整備の連なり）が、Gantt の rich-segment ギャップ（#354・現在2/3）の3回目になるか。

結果 — 4/5、そして Gantt segments の 3-confirm 発火

tsc/build 緑・375px・0 console error。KPI・運航ボード・機材繰り・不正常運航アラート。cold AI（群青を一度も触っていない設定）のレポート：

5/6 の面は turn-key。StatGroup（KPI）・ActionQueue（不正常運航＝「これが THE component・dispatch トリアージのために書かれている」）・DataTable（運航ボード・renderCard でモバイル）・Drawer+MetadataList+RouteStops（機材ローテを drawer に）。唯一の本当の穴＝機材繰りタイムライン。 Gantt は正しい部品族だが曲げる必要があった。segments[] が無い——GanttItem は単一の {start,end,tone,label} で、1本のバーが leg→ground→maint の内部分割を持てない。「各機の1日を複数の隣接バーで模した。rotation を native にやるには、1 item 内に segments:{start,end,tone,label,kind}[] と turnaround の概念が要る」。

3回連続——交番 #107（仕業＝出区/乗務/折返し/入区）・検査計画 #108（入場/検修/出場整備）・機材繰り #113（便/折返し/整備）、別々の3人 cold AI が独立に「1本のバーを分割したい」を手組み。3回ルール発火。Gantt を拡張した。

build — Gantt に segments[]

{ id, rowId, start, end, label, segments: [
  { start, end, tone: "info", label: "NH055 HND→CTS", kind: "便" },
  { start, end, tone: "muted", kind: "折返し" },        // 隙間はバーの track に
  { start, end, tone: "warning", label: "ライン整備", kind: "整備" },
]}
  • 1本のバーが内部 sub-span を tone 別に持つ＝**機材繰り（便→折返し→便→整備）・乗務員行路（出区→乗務→入区）・入出場（入場→検修→出場）**を1 item で表現。隙間（折返し）はバーの track として見える。
  • kind＋label をバーの読み上げ名に畳み込み。後方互換（segments 無し＝従来の単一塗り）。
  • #354 の segments 半分を解消（PR#360・実機で3機5/3/3 セグメント・時間計算どおり左→右配置・a11y に全セグメント畳み込み・0 error）。

残り半分＝時間軸（intraday hour axis）。 #113 は「Gantt の軸が日カラムで時ティックが無く、intraday の rotation には hour ruler を手組みした」とも指摘。axisUnit:"hour" は別の（確信度が一段低い）要望——交番 #107＋機材繰り #113 で 2/3。#354 に残して次の intraday 画面で確認する。

今回 src build = Gantt segments[]（3-confirm）。ActionQueue が不正常運航に5回連続再発掘。

学び — toB のモード固有の床も、3回ルールで結晶化する

universal な床（StatGroup/AmountBreakdown/ActionQueue/ListCard）は業種をまたいで一気に効く。一方 Gantt segments は「resource-timeline を持つ業種」のモード固有の床——鉄道の交番・車両検査、航空の機材繰り、で2業種3画面に渡って同じ「バーを分割したい」が出て、3回目で結晶化した。SeatMap（座席選択・2/3）・TransitItinerary（leg経路・1/3）・Stringline（運行図表・1/3）と同じ「モードまたいで証拠が貯まる」パターン。3回ルールは、universal な床も、モード固有の床も、同じ閾値で選り分け続けている。 そして cold AI が「segments[] が要る」と API まで設計してくれるから、結晶化は推測でなく転記。

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

  • 航空 toB 2枚目（クルーペアリング・スポット管理）or 次モード（バス/タクシー/トラック配送の toB/toC）。SeatMap 3回目・Stringline/TransitItinerary 2回目の観測も継続。

試す

3画面で手組みされた機材繰りバーが、その場で Gantt に。モード固有の床も、3回ルールで結晶化する。

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

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

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

ActionItemActionQueueBadgeButtonCardCardContentCardHeaderCardTitleColumnDefDataTableDrawerDrawerCloseDrawerContentDrawerDescriptionDrawerFooterDrawerHeaderDrawerTitleGanttGanttItemGanttItemToneGanttRowMetadataListRouteStopItemRouteStopsSeparatorStatGroupTabsTabsContentTabsListTabsTriggerTag

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

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