OpenAI Codex CLIで残暑を乗り切る風鈴をブラウザ上に作り上げよう

Claude CLI、Gemini CLIとコマンドラインから使えるコーディング用のAIエージェントが話題ですが、GPT-5の登場でOpenAIのCodex CLIも話題になっています。そこで、残暑を乗り切るのに役立つかもしれない「風鈴アプリ」を作ってみましょう。

• 

  Codex CLIを使って風鈴をブラウザ上に再現したところ

Codex CLIについて

「Codex CLI」は、ChatGPTを開発しているOpenAIが発表した、コーディングエージェントです。ユーザーの指示により、自律的にプログラムの開発を自動化できます。Codexを使えば、ソースコードを理解して編集したり、テストやビルドなどのコマンド実行を対話的に行うことができます。

本連載のテーマである「バイブコーディング」によって、プログラミングができない人でも、自然言語で作成したいプログラムを指示できるのが良い所です。

ただし、Codexを利用するには、ChatGPTの有料プラン（Plus / Pro / Team / Enterprise / Education）あるいは、APIキーを取得して従量課金で利用するプランが必要です。残念ながら無料プランでは利用できません。

また、macOS/Ubuntu/Windowsをサポートしていますが、WindowsではWSL2（Windows Subsystem for Linux 2）を介して利用する必要があります。

• 

  Codex CLIのGitHubサイト

WindowsにCodexをインストールする方法

コーディング・エージェント全般に言えることですが、誰もが気軽に使えるAIツールというよりは、開発者向けのコーディング支援ツールという側面が強いものとなっています。そもそも、開発ツールなので、開発者向けの環境設定が必要となるのは仕方がないことでしょう。

それでは、WindowsにCodexをインストールする手順を紹介します。WindowsでCodex CLIを使おうと思った場合には、次のステップで環境を整えていくと良いでしょう。

• WSL2のインストール(Microsoft StoreからUbuntuをインストール)
• Node.jsのインストール
• Codex CLIのインストール

まず、WSL2のインストールについては、こちらの記事が参考になります。

次に、Node.jsをインストールしましょう。Ubuntuのターミナルを起動します。WindowsメニューからUbuntuを起動しましょう。その後、次のコマンドを実行すると、Node.jsの最新安定版がインストールされます。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
source ~/.bashrc
nvm install --lts

最後に、Codex CLIをインストールしましょう。

npm install -g @openai/codex

macOSにCodexをインストールする方法

macOSの場合は、HomebrewでCodexがインストールできるようになっています。Homebrewをインストールしていない人は、こちらからインストールコマンドをコピーしてターミナルに貼り付けて実行してください。

そして、次のコマンドで、Codex CLIをインストールできます。

brew install codex

Web風鈴を作成してみよう

それでは、Codex CLIを利用して、風鈴を作成してみましょう。

# プロジェクトフォルダを作成
mkdir fuurin
cd fuurin
codex .

はじめてCodexを起動した時には、ChatGPTにサインインするか(Sign in with ChatGPT)、あるいは、APIキーを使うか(Continue using API key)を選択する画面が表示されます。後者のAPIキーを使う場合は、こちらから、APIキーを発行して従量課金モデルでCodexを利用することもできます。なお、Codex CLIの認証でトラブルが出る方は、こちらを参考にしてください。

それで、「Sign in with ChatGPT」を選択して[Enter]キーを押すと、ブラウザが起動するので、ChatGPTにログインすると、Codexを利用できるようになります。

その後、フォルダがバージョン管理されているかどうかがチェックされます。もし、バージョン管理されていない場合、次のようなメッセージが表示されます。

> Since this folder is not version controlled, we recommend requiring approval of all edits and commands. (このフォルダはバージョン管理されていないため、すべての編集やコマンドに承認を求めることを推奨します。)

それで、選択肢として、「1. 承認なしに編集などを行う(1. Allow Codex to work in this folder without asking for approval)」そして、「編集やコマンドには承認を求める(2. Require approval of edits and commands)」を選択します。ここでは、2の編集やコマンドに承認を求めることを選択してみましょう。

「AGENTS.md」を作成しよう

なお、Codex CLIでは、「AGENTS.md」というファイルに、プロジェクト全体で必要となる指示を書いておくことになっています。そこで、日本語で会話したり、ここで作成するプロジェクトのフォルダ構成や、どんなツールを使うのかといった情報を、記述しておくと良いでしょう。

Codex CLIで、「/init」を実行すると、自動的に「AGENTS.md」を作成してくれます。それなりに良いひな形が作成されるのですが、すべて英語で記述されるため、「日本語にして」などと指示すると、このファイルを日本語で生成してくれます。

ただし、風鈴アプリを作るだけのために、大げさな内容だったので、今回は、次のような簡単な「AGENTS.md」を用意しました。

# ガイドライン

HTML/JavaScriptを利用して、風鈴アプリを開発します。

## プロジェクト構成:
- `fuurin.html`:  風鈴のメインプログラム

## 言語:
- 常に日本語で答えてください。

理想の風鈴を目指してターミナル上で指示を与えていこう

このようなファイルを用意した後は、ターミナルで理想の風鈴について語っていけば良いのです。筆者はターミナルで、次のような指示を与えました。

• SVGで風鈴を描画して、動かしてください。
• 風鈴を10個ほど描画してください。
• 風鈴はランダムな位置に配置してください。
• もっと風鈴を色鮮やかにしてください。
• 風鈴の角度が変わるたびに、カランと鳴るようにしてください。
• 風鈴の音が、カランカラン鳴るようにしてください。
• 風鈴の音が反響するようにリバーブ効果を与えてください。
• 風鈴が揺れる様子のアニメーションも追加してください。

与える指示が断片的であるせいか、なかなか理想の風鈴を作ってもらえなかったのですが、繰り返し上記のような指示を与えることで、風鈴アプリを完成させることができました。

Codexにより作成された「fuurin.html」をブラウザにドラッグ＆ドロップすると、風鈴アプリが動き出します。

• 

  Codex CLIが作成した風鈴アプリ

完成したHTMLファイルは、こちらにアップしています。ご自身で作らせたものと、筆者の作ったものと比較してみても面白いでしょう。

まとめ

以上、今回は、OpenAIのCodex CLIを利用して、ブラウザで動く風鈴アプリを作ってもらいました。プロジェクト全体の規則を記述する「AGENTS.md」や、ターミナルで与える指示によって、異なる内容のプログラムが生成されます。いろいろ試してみて、思い通りの風鈴を作成してみると良いでしょう。

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