View on GitHub

AIエージェントでWebサイトをつくろう

Codex Appを使ってみる

ここまでは、GitHub Codespaces上でCodex CLIを使ってWebサイトを作ってきました。 この章は本編の必須手順ではなく、同じような開発をCodex Appで行う場合の紹介です。

Codex Appは、自分のPCにインストールして使うOpenAIのデスクトップアプリです。 Codespacesを使わず、自分のPC上のフォルダーを直接開いて、Codexにファイル作成・編集・コマンド実行を任せられます。

Codex CLIとの違い

Codex CLIとCodex Appは、どちらもOpenAIのコーディングエージェントです。 大きな違いは、使う場所と画面の見え方です。

項目 Codex CLI Codex App
使う場所 ターミナル、Codespaces、ローカルPC macOS / Windows のデスクトップアプリ
操作方法 文字ベースで指示する アプリ画面でプロジェクトやスレッドを選びながら指示する
向いている場面 Codespaces上で手軽に始める、ターミナル操作に慣れる 自分のPCのフォルダーで継続的に開発する
変更確認 ターミナルやエディターで確認 アプリ内の差分表示やGit機能で確認しやすい

この講習の本編はCodespacesとCodex CLIで完結します。 Codex Appは、今後も自分のPCで開発を続けたい人向けの選択肢として捉えてください。 Appを使うと、作業フォルダーや変更内容を画面上で確認しやすくなります。

公式ドキュメントでは、Codex AppはmacOSとWindows向けに提供されています。この講習では、Codex Appを細かくセットアップする時間は取らないので、使ってみたい人向けの紹介として読んでください。

Codex Appって何？

Codex Appは、OpenAIが提供する AIコーディングエージェント のデスクトップアプリです。 日本語で「こんなものを作りたい」と伝えるだけで、AIが実際にコードを書いてくれます。

何ができるの？

プログラミングの知識が少なくても使い始められますが、「何を作りたいか」を言葉で伝える力が大事です。

ChatGPTとの違い

ChatGPTは、ブラウザーやアプリで使うAIツールです。 対話しながら情報を得たり、文章や画像を作ったりできます。

Codex Appは、より開発作業に寄ったツールです。 ローカルのフォルダーを開き、その中のファイルを作成・編集し、必要に応じてコマンドを実行できます。 つまり、会話するだけでなく、実際の開発作業まで進められるAI です。

Codex Appで使う場合の初期セットアップ

自分のPCにCodex Appを入れて作業する場合は、以下のように準備します。 講義中に全員で実施する手順ではないので、興味がある人向けの参考として読んでください。

Windows版・macOS版の両方が提供されています。 以下の公式ページからダウンロードできます。

Codex App配布ページ

0. 事前に必要なもの

1. Codex Appをダウンロードする

  1. ブラウザーで Codex App公式ドキュメント を開きます。
  2. 自分のPCのOS（WindowsまたはmacOS）に合ったものを選んでダウンロードします。
  3. macOSでIntel Macを使っている場合は、Intel向けのビルドを選びます。
  4. ダウンロードが終わったら、ダウンロードしたファイル（インストーラー）を開きます。

2. Codex Appをインストールして起動する

  1. インストーラーの案内に従ってインストールします。
  2. インストールが終わったらCodex Appを起動します。
  3. 初回画面が開いたら、そのまま次へ進みます。

3. Codexにログインする

ChatGPTアカウントでサインインしてください。 使えるモデルや利用枠は、契約プランやその時点の提供状況によって変わることがあります。 講義中にCodex Appを使わない場合は、この手順は読み物として眺めるだけで大丈夫です。

4. 作業フォルダーを作る

Codex Appでゼロから何かを作る場合は、まず空のフォルダーを作ります。

  1. デスクトップなど、見つけやすい場所に新しいフォルダーを作ります。
  2. フォルダー名は自由でOKです。例: codex-handson

なぜフォルダーを用意するの？ Codex Appは、開いたフォルダーの中にファイルを作成・編集します。 専用のフォルダーを作っておかないと、デスクトップや他のフォルダーにファイルが散らばってしまいます。

5. 作ったフォルダーをCodex Appで開く

  1. Codex Appの画面で「プロジェクトを追加」（または「Open Project」）を選びます。
  2. さきほど作った codex-handson フォルダーを選択して開きます。
  3. 画面の上部にフォルダー名が表示されていれば、正しく開けています。

プロジェクト追加

6. Codex Appの画面

Codex Appの画面

/ でコマンド一覧を表示

Codex Appの実行場所

作業モードの切り替え

Codex Appでは、スレッドを始めるときに実行場所を選べます。

Webサイト制作のような小さな練習では、まず Local を選べば十分です。

Codex Appで同じように作るなら

Codex Appで何か作ってみる場合は、下の入力欄に指示を書いて送ります。 たとえば、CLIでWebサイトを作ったのと同じように、ゲーム制作を頼むこともできます。

HTML/CSS/JavaScript だけで動くブラウザ用のレースゲームを作って。
index.html・style.css・script.js のみで動くようにして。
道路が上から下に流れてきて、矢印キーで車を左右に動かし、
障害物を避ける形式にして。
スコア表示とゲームオーバー後のリスタートも入れて。
最後にブラウザで確認できる状態にして。

もちろん、自分が作ってみたいWebページやミニアプリを自由に指示してもOKです。

Codexの動作を見る

メッセージを送ると、Codexがやることを自動でリストアップして、順番に実行していきます。

プロンプト送信直後

コードの生成が終わると、Codexが必要に応じてファイルを作成し、ブラウザーで確認するための手順まで案内してくれます。 完了すると、ブラウザーで確認するためのURLや開き方が表示されることがあります。

コード生成とブラウザ確認の案内

Appで作ったものを動かす

CodexがURLや開き方を案内したら、その手順に沿ってブラウザーで確認してみましょう。 HTMLファイルを直接開くだけでよいこともあれば、ローカルサーバーを起動して表示することもあります。

ブラウザで動くゲーム画面

URLが表示されなかった場合や、自分でコマンドを実行したい場合は、Codex Appに内蔵されているターミナルを使えます。

Codexに頼む（一番簡単）

「このプログラムを動かして」と指示すれば、Codexが実行まで代わりにやってくれます。 動かし方がわからないときも、「どうやって動かせばいい？」と聞けば教えてくれます。

自分で実行する: 組み込みターミナルを使う

ターミナルが画面下部に表示され、プロジェクトのフォルダーでそのままコマンドを実行できます。

💡 ターミナルって何？

ターミナル（コマンドライン）は、キーボードで文字を打ってPCに命令を送る画面のことです。 マウスでアイコンをダブルクリックする代わりに、コマンドと呼ばれる短い命令文を入力します。 プログラムの起動、ファイルの操作、サーバーの立ち上げなど、開発作業の多くはここで行われます。

Appでさらに発展させる

ゲームが動いたら、続けて指示を出して改造してみましょう。 たとえば、次のように頼めます。

Three.jsで3Dにした例

Appで作る場合もGitで管理する

Codex Appでファイルを作成・編集する場合も、作業の区切りごとにGitで記録しておくと安心です。 AIが変更した部分をあとから確認したり、失敗したときに前の状態へ戻したりできます。

また、Codex Appの Worktree モードなど、Gitを使っていると便利になる機能もあります。

Codexに頼む

このプロジェクトを Git で管理して。最初のコミットまでやって。

これだけで、CodexがGitの初期設定から最初の記録（コミット）までやってくれます。

自分でやる場合

組み込みターミナルを開いて、以下の3つのコマンドを順番に実行します。

git init
git add .
git commit -m "first commit"
コマンド やっていること
git init このフォルダーをGitで管理し始める（最初に1回だけ実行）
git add . フォルダー内のすべてのファイルを「次に記録する対象」として選ぶ
git commit -m "..." 選んだファイルの現在の状態を、メッセージ付きで記録する

今すぐ全部覚えなくても大丈夫です。 今後も開発を続けたい人は、この3つのコマンドだけでも覚えておくと便利です。

公式ドキュメント

前へ → Codex CLI Tips 次へ → エージェント Tips 目次へ → ホーム