どうも、株式会社ソフトクリエイト で情報屋やってます。山口です。
普段は企業様向けに Microsoft 365 活用のご支援をおこなっています。
OpenAI Codex の Windows Desktop アプリがリリースされたので、記念に航空機監視アプリ作っていきます！
OpenAI Codex の Windows Desktop アプリがリリースされたので航空機監視アプリ作るよ！
https://apps.microsoft.com/detail/9PLM9XGG6VKS?hl=neutral&gl=JP&ocid=pdpshare
ちなみに、プロファイル名が2バイト(日本語)表示だと、アプリの起動に失敗したので、プロファイル名の変更対応が必要だったりします・・・
※この点は、そのうち改善するでしょう、きっと
■ OpenAI Codex とは？
OpenAI Codex は、OpenAI が提供するソフトウェア開発特化型の AI エージェントで、従来の「コード補完 AI（例：GitHub Copilot）」と異なり、以下の特徴を持ちます。
- 自然言語の指示から タスクを分解・計画
- リポジトリ全体を理解したうえで 複数ファイルを編集
- テスト実行・失敗時の修正を 自律的に反復
- 最終的に Pull Request（PR）として成果物を提示
つまり、人は「何をやりたいか」を指示し、AI が「どう実装するか」を担います。
なお、ほぼ同じ時期に公開された、「GPT-5.4-Codex」は、CLI経由でしか利用できなかったので、今回は、「GPT-5.3-Codex」を利用していきます(^^;
■ 開発環境
Windows 11 25H2 ×64
Node.js v24.14.0
Python 3.13.12 ※今回のアプリだと不要です。
OpenAI Codex の Windows Desktop アプリ(Microsoft Store からインストール)
■ 今回のアプローチ
- 空のワークスペースから開始
- ローカル動作を優先（Azure Web Apps への公開とか認証機能は後回し）
- 日本の空域（羽田・成田周辺）を中心に表示
- リアルタイムっぽい演出を入れる
今回の Codex アプリに投入するプロンプトは、以前、作成した同種のアプリの内容を整理した版を利用していきます！利用するワークスペースは、空の状態で開始してるので、だいたい同じようなWEBアプリができるかなと思います！
※ 要は AGENTS.md や SKILL.md の事前配置せずにやってますよ。という話
また、Azure WEB アプリケーションとしての公開や認証系の実装までは行わずに、ローカル動作までです！
■ アプリ作成
では、以下のような内容を Codex に入力して、送信します。
入力：
========
目的
特定の航空シナリオをもとに、
航空機の位置変化、接近イベント、時系列の注釈情報を可視化し、分析できるWebアプリとして表現したいです。
実在の航空機追跡サービスを参考にしつつも、
特定サービスのコピーではないオリジナルの監視ダッシュボードUIにしてください。
商標・著作権に配慮し、実在サービスのロゴ・固有デザイン・画面構成をそのまま模倣しないでください。
対象地域は、**日本の東京都周辺（羽田空港・成田空港を含む空域）**を中心としてください。
ゴール
• ブラウザーで動作する
• ローカル環境で npm run dev により起動できる
• 初期データは固定 JSON で管理する
• 航空機や関連イベントを時系列で可視化できる
• 分析用途と技術デモ用途の両方で見栄えするUIにする
• 表記は日本語中心とし、必要に応じて一部英語を補助的に使う
技術スタック
• Next.js
• TypeScript
• React
• 地図ライブラリは Leaflet または MapLibre GL JS の使いやすい方
• スタイリングは Tailwind CSS
• 状態管理は React hooks 中心
• データは /data 配下の JSON で管理
• バックエンドは不要
実装してほしい機能
1. メイン画面
• 画面中央にマップ
• 左側に航空機一覧パネル
• 右側に選択中対象の詳細情報パネル
• 下部にタイムラインと再生コントロール
• 画面上にダークモード / ホワイトモード切替ボタンを配置
2. マップ表現
• オリジナルの航空監視ダッシュボード風UI
• ダークモードは「上品なSF航空管制UI」風
• ホワイトモードは視認性を重視した明るい業務向けUI
• 航空機アイコンを表示
• 軌跡ラインを表示可能
• 選択中対象を明確にハイライト
• 選択中以外の航空機ポインタ・経路は半透明表示にし、選択対象が判別しやすいようにする
• 必要に応じて、非選択対象はサイズ・明度・線幅も抑えて差を明確化する
3. 色分けルール
視認性を高めるため、対象ごとに以下の色分けを行ってください。
• 選択した航空機と経路情報：オレンジ基調
• 識別困難目標の航空機と飛行経路：赤色基調
• 補助観測機の航空機と飛行経路：黄緑基調
• それ以外の通常対象：ニュートラルカラーまたは控えめな寒色系
※ ダークモード / ホワイトモードの両方で見やすい配色にしてください。
4. 進行方向の表現
進行方向が分かる表現を実装してください。
単純なアイコン回転だけでなく、必要に応じて以下の代案も検討してください。
• 機体アイコンの向き変更
• 機体前方への短いベクトル線表示
• 機体の進行方向側にだけ伸びるヘディングインジケーター
• 軌跡ラインの先端形状や淡い方向ガイド
• 高ズーム時のみ方向表現を強め、低ズーム時は簡略化
※ 最も見やすい方法を優先し、必要なら複数手法を組み合わせてください。
5. 表示対象
最低限、以下を JSON 上で定義し表示できること
• 通常航空機
• 識別困難な航空目標、または注意対象
• 補助観測機
• 分析用補助マーカー（イベント地点、異常接近ポイントなど）
※ 名称は仮名でよく、後から差し替えしやすい設計にしてください。
6. タイムライン再生
• Play / Pause
• 再生速度変更（1x / 2x / 4x）
• シークバー移動
• 再生に応じて JSON の位置データを反映
• 特定時刻でイベント注釈を表示
7. イベントログ
• 時系列イベントリストを表示
• イベントクリックで該当時刻へジャンプできる
• 例：
o 接近イベントを検知
o 進路周辺で異常事象を確認
o 特異イベントを記録
8. 詳細パネル
選択した対象について以下を表示
• コールサイン風名称
• 状態
• 高度
• 速度
• 方位
• 最終更新時刻
• メモ / 補足情報
表記は日本語中心とし、状態名は必要に応じて日本語または英語併記でも構いません。
9. 分析モード
単なる再生ではなく、分析しやすいUIも含めてください。
• 推定情報であることが分かる表示
• 確定情報ではない注記
• イベントに対する短い分析コメント表示
• JSON 編集で注釈を追加しやすい構造
演出要件
可能であれば、以下の演出も取り入れてください。
ただし、過度に派手にせず、上品で業務デモにも使える範囲に留めてください。
• レーダースイープ風の弱いアニメーション
• 選択中ターゲットのパルス表示
• イベント発生時の控えめな警告表示
• 画面全体は過剰演出を避け、落ち着いたSF航空管制UIにする
データ構造要件
/data/scenario.json のような形で、以下を管理できるようにしてください。
• シナリオメタデータ
• 航空機一覧
• タイムスタンプごとの位置情報
• イベント注釈
• UI表示用ラベル
• 表示種別ごとの色設定
• 表示モード設定（ダーク / ホワイト）
TypeScript の型定義も作成してください。
UI/UX要件
• 1画面で全体を把握できるダッシュボード型
• 未来感はあるが読みにくくしない
• 実在サービスのコピーに見えない独自UI
• 日本語中心の分かりやすい表記
• PC最適化を優先
• 保守しやすい命名と構成にする
• 選択中対象と非選択対象の差が明確に分かること
• 情報密度は高めでも、視線誘導が分かりやすいこと
実装方針
• コンポーネントを適切に分割
• 読みやすいディレクトリ構成
• TypeScript の型を明確に付与
• ダミーデータでも見栄えよく仕上げる
• 今後シナリオ追加しやすい構成にする
• コメントは必要最小限で、意図が分かる程度に残す
改善提案として実装してよいこと
以下は、見やすさ向上のため有効であれば実装してください。
• 選択中対象のみ線幅や発光感を少し強める
• 非選択対象の軌跡線を細くする
• ホバー時に対象名を簡易表示する
• ズームレベルに応じて情報量を切り替える
• イベント発生地点に短時間だけ控えめな強調表示を出す
• パネル内の数値や状態表示に視認性の高いバッジ表現を使う
追加してほしいもの
• README.md
o セットアップ手順
o 起動手順
o データ編集方法
o 今後の拡張案
• 初期シナリオ JSON
• サンプルイベント約10件
• 最低限のエラーハンドリング
• eslint / prettier 相当の基本整備
最初にやってほしいこと
以下の順で進めてください。
1. プロジェクト全体構成案の提示
2. 採用技術の理由を簡潔に説明
3. ディレクトリ構成の提示
4. 必要ファイル一式の生成
5. ローカル起動手順の整理
注意事項
• 実在サービスのロゴ・配色・UI配置をそのまま複製しない
• 著作権・商標に配慮した独自表現にする
• あくまで航空状況の可視化と分析を目的とした技術デモとして設計する
• 認証、DB、サーバーAPIは不要
• まずは完成を優先する
========
Codex が、投入されたプロンプトを分析して、目的のアプリの設計から実装を自動で進めてくれます。
1.まずプロンプトを分析
• 「なるほど、航空機監視アプリですね」
• 「Next.js と TypeScript で作りますね」
• 「地図は Leaflet を使いましょうか」
2.設計案を提示
• ディレクトリ構成
• 使用するライブラリ
• データ構造の定義
3.実装開始
• コンポーネントを次々と生成
• JSON ファイルでダミーデータを作成
• スタイリングも自動で適用
途中で「このライブラリを使いますが、よろしいですか？」みたいな確認が入ることもあります。基本的には「お任せします」でOKです。
今回のアプリだと20~30分程度で、アプリの作成が完了し、最終フェーズとして、ローカル起動手順が案内されます。
ローカル実行で今回のパターンでは基本的にはこんな感じになります。
# Windows ターミナルで実行
cd "ワークスペースのフォルダーパス"
npm install
npm run dev
その他の行を表示するそして、ブラウザーで http://localhost:3000 を開く
次に、提示されたURLをWebブラウザーで開きます。アプリが依頼通り作成できているかを確認します(^^
#今回作成された航空機シュミレーションアプリの画面と確認ポイント
☑ 地図が表示される（東京周辺）
☑ 航空機アイコンが配置されている
☑ 左側に航空機一覧パネル
☑ 右側に詳細情報パネル
☑ 下部にタイムラインと再生コントロール
☑ ダークモード/ホワイトモード切替ボタン
入力したレイアウトが表示されているか、動作するかを確認します。
基本機能は動いたものの、やっぱり「ここはこうしたい」っていう内容があれば、Codex にて、修正点を入力して、修正をしていきます。また、エラー等の修正も同様の依頼を行います(^^
入力：
======== マップを3D的な立体感のある感じにしたいです。できれば飛行機の高低差を表現できればベストですが、おススメの方法があれば、それでも大丈夫
========
色々と Codex に依頼をしていくと、自分の好みな感じに仕上げてくれますが、ニュアンスが上手く伝わないことや実装が難しい部分については、色々と工夫が必要になります(^^;
・羽田空港周辺+ライブモード
・サンフランシスコ空港周辺+ライブモード
■ まとめ
アプリの作成をAIエージェントがここまでやってくれるのかと日々驚くばかりです(^^;
もちろんAIエージェントにお任せしたところで、実装できない機能や思い通りにならないことが多々ありますが、まずは、作れる!動く!を体験できるのは嬉しい体験ですね(^^!
