プログラミング不要の「バイブコーディング」を活用して、いろいろなアプリやツールを作っている本連載ですが、今回は、2026年2月2日に公開されたばかりのCodexアプリを使って、AI対応のマインドマップエディタを作ってみましょう。

  • Codexアプリを使ってAI対応のマインドマップエディタを作ってみよう

    Codexアプリを使ってAI対応のマインドマップエディタを作ってみよう

Codexアプリとは？

Codexとは、ChatGPTの開発元であるOpenAIが開発したコーディングエージェントです。自然言語で指示をして、アプリの開発ができます。

本連載では、ターミナルから操作ができるCodex CLIを使って、「ボイスメモの文字起こし」や「読み上げ動画の作成ツール」など、いろいろなアプリを作ってきました。

ChatGPTのアカウントがあれば、Codex CLIも無料で使えるので便利です。とはいえ、実際、ターミナル操作が苦手という方も多くいたことでしょう。それもあり、OpenAIは、このたび、ターミナルではなくアプリから利用できるCodexのアプリ版をリリースしました。

これによりユーザーは、ターミナル(CLI)版、テキストエディタのプラグイン版に加えて、ネイティブアプリ版から使いたい方法を選べるようになりました。

  • Codexはアプリとエディタプラグインとターミナルで使えるようになった

    Codexはアプリとエディタプラグインとターミナルで使えるようになった

今回は、公開されたばかりのCodexアプリを使ってみます。なお、本稿執筆時点ではmacOS版のみが提供されており、Windows版は今後提供予定とのことです。Windowsの方は、ターミナル版(Codex CLI)や、Visual Studio CodeやJetBrainsなどのプラグイン版を利用すると良いでしょう。

Codexアプリはこちらからダウンロードできます。

Codexの仕組み

なお、Codexアプリ版も基本的には、Codex CLIと変わりません。フォルダ単位でプロジェクト(Project)を管理します。つまり、フォルダを切り替えると、プロジェクトが切り替わります。これは、Visual Studio Codeなどのプログラミング向けのエディタなどでも、同じ仕組みになっています。

そして、各プロジェクトでは複数のタスクを実行してアプリを完成させますが、Thread(スレッド)という単位で処理を分けて実行できます。この仕組みさえ理解してしまえば、Codexを使いこなすことができるでしょう。

  • Codexのプロジェクトの仕組み

    Codexのプロジェクトの仕組み

マインドマップエディタを作ろう

それでは、今回のお題であるマインドマップエディタの開発をはじめましょう。マインドマップとは、中心にテーマを置いて、そこから関連するアイデアや情報を枝分かれさせていく図のことです。アイデアの整理や発想の促進に役立ちます。

今回は、ChatGPTのAPIと組み合わせて、マインドマップを自動生成するエディタを作ってみましょう。ユーザーがテキストボックスでテーマを入力するとChatGPTが関連するアイデアを生成し、それをマインドマップとして表示する仕組みのものです。

このアイデアを実現するのに際して、OpenAIのAPIを利用します。OpenAIのAPIキーが必要になります。OpenAIの開発者サイトからAPIキーを取得して環境変数へ登録しましょう。具体的な取得方法や設定方法は、本連載の14回目をご覧ください。

プロジェクトを作成しよう

まずは、新しいプロジェクトを作成しましょう。デスクトップやドキュメントなど、わかりやすい場所にプロジェクトフォルダ「MindmapEdit」を作成してください。そして、そのフォルダをCodexアプリで開きます。初めてCodexアプリを使う場合には、「Select a project」というダイアログが表示されるので、「Add project」ボタンを押して、先ほど作成した「MindmapEdit」フォルダを選択します。既に起動したことがある方は、前回使った画面が表示されるので、メニューから「File > Open Folder...」をクリックして、先ほど作成した「MindmapEdit」フォルダを選択します。

すると、プロジェクトが切り替わり、下記のような画面が表示されます。

  • Codexアプリを起動したところ

    Codexアプリを起動したところ

マインドマップエディタを作成するプロンプト

今回は、アプリに次のようなプロンプト(指示文)を入力して、マインドマップエディタを作成してみましょう。

### プロジェクトの概要:
「MindEdit」という名前のAI対応マインドマップエディタを作成してください。
ユーザーがテキストボックスにテーマを入力すると、ChatGPTが関係するアイデアを生成し、
それをマインドマップとして表示するものです。編集機能や保存機能も作ってください。

### 利用技術:
- PythonとFlaskを使用して、バックエンドAPIを構築してください。
- フロントエンドはHTML/CSS/JavaScriptを使用してUIを作成してください。
- マインドマップの作成には、JSのライブラリ「jsMind」を利用してください。

### OpenAI APIの利用:
- ChatGPTのAPIを使用して、ユーザーが入力したテーマに関連するアイデアを生成してください。
- APIキーは環境変数から取得するようにしてください。
- APIのレスポンスを適切に処理して、マインドマップのノードとして表示できるようにしてください。

### 利用手順:
1. 最初にテーマを入力するテキストボックスを作成してください。
    ユーザーがテーマを入力してEnterキーを押すと、ChatGPTのAPIにリクエストを送信し、
    関連するアイデアを取得してマインドマップに表示してください。
2. その後、ノードを選択して[Enter]キーで編集できるようにしてください。
3. ノードを追加する場合は、ノードを選択して、[Shift]+[Enter]キーで新しいノードを追加できるようにしてください。
4. ノードをダブルクリックすると、ChatGPTがそのノードに関連するアイデアを子ノードとして追加するようにしてください。
    その際、ノードの親子関係を指定して、より意味のあるマインドマップを作成してください。

### 注意点:
- 日本語入力を考慮してください。IME入力中はEnterキーを無視するように修正してください。

しばらく待つと、Codexがプロジェクトの構成を考えて、必要なファイルを自動生成してくれます。生成されたファイルは、プロジェクトのフォルダ内に保存されます。毎回実行にかかる時間は異なりますが、この時は1分42秒でアプリ一式を作成しました。

  • Codexがプログラムを作成したところ

    Codexがプログラムを作成したところ

そして、生成されたコードを実行するためのコマンドも表示されます。今回は、Flaskを使用しているので、次のようなコマンドが表示されるでしょう。ターミナルを起動して、次のコマンドを一つずつ実行しましょう。

# アプリの起動手順(デスクトップに配置した場合)
cd ~/Desktop/MindmapEdit
python3 -m venv .venv && source .venv/bin/activate
pip install -r requirements.txt
python3 app.py

コマンドの入力が面倒だという方は、Codexアプリに対して「コマンドを実行してください」と依頼して、実行してもらうことも可能です。

そして、無事にアプリが起動したら、ブラウザで「http://127.0.0.1:5000」にアクセスしましょう。すると、テーマを入力するテキストボックスが表示されます。テーマを入力してEnterキーを押すと、ChatGPTのAPIにリクエストが送信され、関連するアイデアがマインドマップとして表示されます。

  • マインドマップエディタが起動したところ

    マインドマップエディタが起動したところ

なお、筆者が試したところ、JavaScriptのエラーが出たので、Codexのスレッドの続きに、エラーが出た旨とエラーメッセージをコピーして貼り付けました。すると、Codexがエラーを修正してくれます。この辺りのやりとりは、Codex CLIを使っていた時と同じでした。

ここまで作成したアプリを、こちらにアップしています。参考にしてみてください。

気軽に改造してみよう

実際に使ってみると、たくさんの改善点を思いつくことでしょう。例えば、マインドマップのノードをドラッグ&ドロップで移動できるようにしたり、ノードの色や形を変更できるようにしたり、ノード同士を線で結べるようにしたりなど、いろいろな機能を追加してみると良いでしょう。

筆者が特に改善したいと思ったのは、マインドマップに対するノードの追加です。この操作は、人によって大きく好みが分かれる部分です。例えば、伝統的なエディタのviとかEmacsライクに操作したいという人もいるでしょうし、マウス主体で操作したいという人もいるでしょう。そういった細かい部分も、Codexに指示して修正してもらうことができます。

Codexを使うことで、自分の好みに合わせて、アプリを育てていくことができるのは、バイブコーディングの大きな魅力の一つです。ぜひ、気軽に改造してみてください。

まとめ - Codexアプリの便利なところ

今回は、Codexアプリを使って、AI対応のマインドマップエディタを作成してみました。Codex CLIと同様に、プロジェクトの構成やコードの生成、エラーの修正などが簡単にできることがわかりました。

なお、筆者が実際に使ってみての感想ですが、Codexアプリは、ChatGPTと似たインターフェイスで、気軽にチャットしながら開発を進められる点が良いと思いました。

ターミナルのCodex CLIやエディタのプラグインと比べて、スレッド下部にあるテキストボックスが広く、視認性が高く、長文テキストが入力しやすいのが特徴です。ChatGPTのインターフェイスと似ているため、ChatGPTを使い慣れている人にとっては、違和感なく使えるのも良い点です。

特に、アプリを開発したい際に長文が入力しやすいのは大きなメリットで、バイブコーディングでは単純な指示を指定するだけでは、なかなか思い通りのアプリが作成されないことが多く、今回紹介したような少し長めのプロンプトを入力する必要があります。その点で、ターミナルだと入力しづらく感じており、いつもテキストエディタでプロンプトを書いて、ターミナルにコピペしていました。ちょっとしたことですが、Codexアプリ版の使い勝手の良さを実感したポイントでした。

また、今回は紹介しませんでしたがバージョン管理ツールのGitを使った場合、コードの変更履歴を追跡しやすくなります。Codexアプリは、Gitと連携しているため、コードの変更を簡単にコミットして管理できます。これも、アプリ版の便利なところの一つです。

アプリ、エディタのプラグイン、CLIと、用途に応じて使い分けていくと良いでしょう。

自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」 、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2004年度未踏ユース スーパークリエータ認定、2010年 OSS貢献者章受賞。これまで50冊以上の技術書を執筆した。直近では、「大規模言語モデルを使いこなすためのプロンプトエンジニアリングの教科書(マイナビ出版)」「Pythonでつくるデスクトップアプリ(ソシム)」「実践力を身につける Pythonの教科書 第2版」「シゴトがはかどる Python自動処理の教科書(マイナビ出版)」など。