AI に航空の運航管理を作らせてみた — 3画面で手組みされた「機材繰りバー」が、ついに Gantt に入った(やってみた #113)
/flight-operations375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。
解説記事
AI に航空の運航管理を作らせてみた — 3画面で手組みされた「機材繰りバー」が、ついに Gantt に入った(やってみた #113)
やってみたシリーズ: 自作のデザインシステム
@gunjo/ui(群青)を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。航空の事業者側1枚目——運航管理(OCC)/ 機材繰り(運航ボード・機材ローテーション・不正常運航アラート)。
航空の利用者向け(フライト予約 #112)に続く事業者側。観測の本命——機材繰り(各機の1日=便→折返し→整備の連なり)が、Gantt の区切り付きバーの欠落(#354・現在2/3)の3回目になるか。
結果 — 4/5、そして Gantt segments の3回目が発火
tsc/build 緑・375px・0 console error。KPI・運航ボード・機材繰り・不正常運航アラート。予備知識ゼロの AI(群青を一度も触っていない設定)のレポート:
6面のうち5面はそのまま使えた。
StatGroup(KPI)・ActionQueue(不正常運航=「これがまさにそのコンポーネント・運航整理の選別のために書かれている」)・DataTable(運航ボード・renderCard でモバイル)・Drawer+MetadataList+RouteStops(機材ローテを drawer に)。唯一の本当の欠落=機材繰りタイムライン。 Ganttは正しいコンポーネント族だが、曲げる必要があった。segments[]が無い——GanttItem は単一の {start,end,tone,label} で、1本のバーが 便→折返し→整備 の内部分割を持てない。「各機の1日を複数の隣り合うバーで模した。機材繰りを標準で扱うには、1 item の中にsegments:{start,end,tone,label,kind}[]と 折返し(turnaround)の概念が要る」。
3回連続——交番 #107(仕業=出区/乗務/折返し/入区)・検査計画 #108(入場/検修/出場整備)・機材繰り #113(便/折返し/整備)、別々の3人の予備知識ゼロの AI が独立に「1本のバーを分割したい」を手組み。3回ルール発火。Gantt を拡張した。
作る — 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本のバーが内部の小区間を tone 別に持つ=機材繰り(便→折返し→便→整備)・乗務員行路(出区→乗務→入区)・入出場(入場→検修→出場)を1 item で表現。隙間(折返し)はバーの土台部分として見える。
kind+labelをバーの読み上げ名に畳み込み。後方互換(segments 無し=従来の単一塗り)。- #354 の segments 半分を解消(PR#360・実機で3機5/3/3 セグメント・時間計算どおり左→右配置・アクセシビリティに全セグメント畳み込み・0 error)。
残り半分=時間軸(日中の時刻軸)。 #113 は「Gantt の軸が日カラムで、時刻の目盛りが無く、日中の機材繰りには時刻ルーラーを手組みした」とも指摘。axisUnit:"hour" は別の(確信度が一段低い)要望——交番 #107+機材繰り #113 で 2/3。#354 に残して、次の日中の時間軸画面で確認する。
今回 src で作ったもの = Gantt segments[](3回目)。ActionQueue が不正常運航に5回連続で再発掘。
学び — 事業者向けのモード固有の土台も、3回ルールで固まる
全業種共通の土台(StatGroup/AmountBreakdown/ActionQueue/ListCard)は業種をまたいで一気に効く。一方 Gantt segments は「リソースのタイムラインを持つ業種」のモード固有の土台——鉄道の交番・車両検査、航空の機材繰り、で2業種3画面に渡って同じ「バーを分割したい」が出て、3回目で固まった。SeatMap(座席選択・2/3)・TransitItinerary(区間中心の経路・1/3)・Stringline(運行図表・1/3)と同じ「モードをまたいで証拠が貯まる」パターン。3回ルールは、全業種共通の土台も、モード固有の土台も、同じ閾値で選り分け続けている。 そして予備知識ゼロの AI が「segments[] が要る」と API まで設計してくれるから、コンポーネント化は推測でなく転記。
次回予告(やってみた #114)
- 航空の事業者向け 2枚目(クルーペアリング・スポット管理)or 次のモード(バス/タクシー/トラック配送の事業者向け/利用者向け)。SeatMap 3回目・Stringline/TransitItinerary 2回目の観測も継続。
試す
- gunjo.jp / ガント Gantt / 対応キュー ActionQueue / 逆引き索引 /docs/by-use-case / npm
@gunjo/ui/ GitHub / 前回まで #1〜#112 - GunjoUI by UIXHERO
3画面で手組みされた機材繰りバーが、その場で Gantt に。モード固有の土台も、3回ルールで固まる。
この連載は、作者が AI(Claude と Codex)と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。
使用した @gunjo/ui コンポーネント
この画面のソースが直接 import しているコンポーネントです。
cold AI が組み上げた実コード
ファイル名をクリックでソースを展開できます。