Zenn
📱

OpenAI Codexでお手軽スマホ開発ができた

に公開
OpenAI
生成 AI
ai駆動開発
Vibe Coding
Codex
tech

はじめに

Codexを使ってお手軽スマホ完結の開発が出来たので、共有です。
Codex: https://openai.com/index/introducing-codex/

必要なもの

  • スマホ
  • Codex（ブラウザ版）
  • Github（ブラウザ版 / Codespaces）
  • Vercel などのデプロイ環境

開発してみた

開発内容：Azure OpenAIのResponse APIを使ったチャットアプリ
開発内容の選定理由：「自明ではあるが、事例が少ない技術の検証タスク」で機能するか知りたかった
選定理由補足：Response APIは2025年3月に発表されたばかりのAPIで、nodejsのSDKでAzure OpenAIは未対応（https://github.com/openai/openai-node/issues/1422）
縛り：使えるのはスマホだけ

実際の手順

  1. Githubで空リポジトリを作成
    a. Codespaces で first commit（空だと Codex が Provided git ref main does not exist で失敗）
  2. Codexにアクセス
    a. （Codexの初回利用時のみ PC で MFA 設定が必要）
  3. プロンプトを投入
typescriptとnodejsとnextでこのurlにあるazure openaiのresponse apiを使ったチャットmoduleを作ってください

https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/responses?tabs=python-secure

モデルはgpt 4oを、aoaiの接続に必要な情報はAZURE_OPENAI_BASEとAZURE_OPENAI_API_KEYとして環境変数に含めています

まだ純正のsdkがresponse apiに対応してないので以下のリクエストを自前で裁けるようにしてください
curl -X POST https://YOUR-RESOURCE-NAME.openai.azure.com/openai/responses?api-version=2025-03-01-preview \
  -H "Content-Type: application/json" \
  -H "api-key: $AZURE_OPENAI_API_KEY" \
  -d '{
     "model": "gpt-4o",
     "input": "This is a test"
    }'

session管理はazure側が行うのでchat moduleはただ受け取ったresponse idをユーザのlocal storageに保存して、呼び出す際に利用してください
セッション管理やユーザ管理を行ってはいけません

複数のタスクに分割する必要がある場合は必要に応じてタスクを分割してください
  1. 差分を確認 → PR → マージ
  2. Vercel に自動デプロイ（動かない場合は Codex にエラーログを貼り付けて再生成）
  3. これを欲しい機能が出来るまで繰り返す

最終成果（UI は無骨ですが目的達成）：
動画やXの片手間に1時間ぐらいでCIやドキュメントの整備も含めて12個のPRを出して完成

実際どう？

良かった点

  • スマホ開発としてかなり実用性あり
    • キーボードの入力コストの低さやツール設定の簡単さ・成果物のインパクトが良い
    • 初動のセットアップ自体もスマホから始められる点は特に良い
  • キャッチアップのための技術検証用途では十分使えそう

課題

  • Codex単体では動作保証が難しい
    • 実行環境がネットワークから遮断される仕様でnpm installなど依存解決がコケる
    • CI/CDでの動作確認が現状Mustで欲しい
  • CI エラーは人がコピペする必要がある（Clineのような自律デバッグはまだ難しい）
  • これだけでProduction品質をいきなりスマホ開発出来る感じはまだない

ユーザー側で工夫が必要な点

  • ネットワークが遮断されて必ず失敗するコマンドがあるので、特定コマンドを禁止するルール追加で実行時間が短くなる
  • 型チェックやnpm installなどの小さな動作保証をCIから行う
  • デプロイ環境もCD経由で用意し、動作確認ができるようにする
  • エージェントのセットアップ時はネットワーク接続できるようなので、依存関係の解決できるセットアップスクリプトを用意する

おわりに

Codexいい感じです。何よりデスクに齧り付かなくても開発できる可能性が見えたことは朗報です。

また、Codexの1番の課題である動作確認ができない点ですが、Devinと相互補完する運用も検討しています。
Devinは初期セットアップが重いのが難点ですが、Codexでリポジトリが固まった後なら導入しやすくテスト用の実行環境を補完できるので、より安定したスマホ開発環境が作れるかもしれません。

Discussion