スマホのみでWebアプリ開発: CodexでG検定模擬試験アプリを公開した

作ったもの

G検定の学習用に、ブラウザだけで動く模擬試験Webアプリを作りました。

公開URL: https://gexam-practice.web.app

ただし、この記事で書きたい本題はアプリそのものではありません。

今回おもしろかったのは、スマホからの指示だけで、自宅の開発用PC上のプロジェクトをCodexに操作させ、実装から記事ドラフト作成まで進められたことです。

つまり、手元にあったのはスマホだけです。

全体像

今回の作業イメージは次のような流れです。

大まかにはこうです。

1. スマホのChatGPTアプリからCodexに指示する
2. Codexが自宅開発用PC上の作業ディレクトリを読む
3. Codexがファイルを編集する
4. 必要に応じてローカルでコマンドを実行する
5. Firebase Hosting向けの構成を確認する
6. 記事ドラフトや公開用メモまで同じ流れで作る

従来のリモート開発というより、スマホを開発端末のUIとして使い、自宅PCを実作業環境として使う感覚に近いです。

何がすごいと感じたか

一番大きいのは、スマホ側に開発環境を持たなくてよい点です。

スマホでコードを書くのは正直つらいです。画面は狭いし、ファイルを行き来しにくいし、長いコマンドも打ちにくいです。

でもCodex経由にすると、スマホでやることは「何をしたいか」を伝えることに寄せられます。

たとえば、今回なら次のような指示で十分です。

G検定の模擬試験アプリの記事を書きたい。
アプリ説明はほどほどで、スマホからCodex経由で自宅PCを操作して作った点を詳しく書いて。
説明画像も作って。

この指示を受けて、Codexはローカルのファイル構成を確認し、既存ドラフトを読み、記事の切り口を変更し、画像生成まで含めた成果物に落とし込めます。

人間がスマホで細かい編集をするのではなく、スマホから意図を渡し、実作業は自宅PC上のCodexに任せる形です。

今回の構成

作業対象のアプリは静的ファイル中心です。

public/
  index.html
  styles.css
  app.js
  404.html
firebase.json
package.json
articles/
  qiita/
  zenn/
  assets/

アプリ自体はシンプルで、Firebase Hostingに public/ を配信させる構成です。

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "cleanUrls": true,
    "trailingSlash": false
  }
}

このくらいの規模だと、Codexにとっても全体を把握しやすく、スマホからの自然言語指示だけでも作業が進めやすいです。

Codexに任せやすかった作業

今回のような小さなWebアプリでは、次の作業が特に相性がよいと感じました。

• 既存ファイルの確認
• Markdown記事の構成変更
• Qiita/Zenn向けのメタデータ調整
• 画像の生成と配置
• Firebase Hosting向けファイル構成の説明
• READMEや公開チェックリストの整備

逆に、人間がスマホで直接やると面倒な作業ほど、Codexに任せる価値が大きいです。

ファイルを開いて、前後の文脈を読んで、別ファイルとの整合性を見て、必要なら画像を作って、Markdownの参照パスを直す。こういう地味な作業は、スマホ単体ではかなり負荷が高いです。

アプリの説明は軽く

作ったアプリは、G検定の受験対策向けの模擬試験アプリです。

主な機能は次の通りです。

• 本番想定モード
• 短時間演習
• 分野別演習
• 弱点復習
• タイマー
• 即時採点と解説レビュー
• 間違えた問題のローカル保存

G検定は、単語を知っているだけでは解きにくい試験です。「最も適切なもの」「不適切なもの」「実務上注意すべきもの」を選ぶ問題では、似た概念の違いや社会実装上の前提知識が問われます。

そのため、単語帳ではなく、判断練習を回せるWebアプリとして作りました。

スマホ指示開発で気をつけたいこと

便利ですが、何でも丸投げできるわけではありません。

特に大事だと思ったのは、次の3点です。

1. 作業対象をはっきり伝える

「この記事をいい感じにして」だけだと、どの方向に直すべきか曖昧です。

今回なら、次のように主役を指定すると動かしやすくなります。

アプリの説明はほどほどにして、
スマホからChatGPTアプリでCodexにアクセスし、
Codex経由で自宅開発用PCを操作している点を詳しく説明して。

これはかなり効きます。

2. Codexが触る場所を限定する

ローカルPCを操作できるということは、便利な反面、影響範囲も大きくなります。

そのため、作業ディレクトリ、対象ファイル、生成物の保存先は明確にした方がよいです。

今回であれば、対象は主に次の範囲です。

articles/qiita/gexam-practice-app.md
articles/zenn/gexam-practice-app.md
articles/assets/mobile-codex-home-pc-workflow-ja.svg
articles/assets/phone-only-vs-command-center-ja.svg
articles/assets/codex-local-work-ja.svg

3. 実行結果は確認する

Codexがコマンドを実行できても、最終確認は必要です。

記事ならMarkdownの見え方、画像パス、リンク、タイトル、公開設定を確認します。アプリなら、ローカルで表示して、スマホ表示やデプロイ先の動作も見ます。

スマホから指示できることと、確認を省略できることは別です。

著作権とセキュリティについて

この開発スタイルを発信するうえで、著作権とセキュリティは分けて考えた方がよいです。

まず著作権については、今回の記事・アプリ・図は自分で作成したものです。G検定の公式問題を転載しているわけではなく、シラバス範囲をもとにしたオリジナル問題として扱っています。

注意したいのは次の点です。

• 公式問題集や他サイトの問題文をそのまま使わない
• 他人の記事、図、スクリーンショットを無断転載しない
• ChatGPT、Codex、Firebaseなどの名称は説明上の固有名詞として使い、公式ロゴや公式認定のように見せない
• 生成画像を使う場合も、第三者のロゴ、キャラクター、画面デザインに寄せすぎない

セキュリティ面では、CodexがローカルPCのファイルを読んだり、編集したり、コマンドを実行できる点が便利さの中心です。つまり、便利なぶんだけ操作範囲の管理が重要になります。

自分は少なくとも次の前提で使うのが安全だと考えています。

• 作業ディレクトリを限定する
• APIキー、トークン、.env、認証情報を記事やスクリーンショットに出さない
• 危険なコマンドや外部ネットワークアクセスは承認制にする
• 変更差分を確認してから公開・デプロイする
• 公開記事に自宅PCのユーザー名、内部IP、秘密のパスを載せない

OpenAIのCodexドキュメントでも、Codexはサンドボックスと承認ポリシーを組み合わせて使う前提で説明されています。特に、ネットワークアクセスやサンドボックスを広げる設定はリスクが上がるため、信頼できる環境で慎重に使うべきものです。

なので、この記事で紹介しているのは「スマホから自宅PCを無制限に操作する方法」ではありません。

対象ディレクトリを限定し、必要な操作を確認しながら、Codexに開発作業を手伝ってもらう方法として紹介するのが正確だと思います。

この開発スタイルの可能性

今回やってみて、これは単なる「AIにコードを書かせる」話ではないと感じました。

ポイントは、開発環境そのものをスマホから呼び出せることです。

たとえば、外出中に思いついた改善をスマホで投げる。Codexが自宅PC上のリポジトリを確認する。必要な修正案やドラフトを作る。帰宅後に大きな画面で最終確認する。

この流れが自然にできます。

スマホは入力装置としては弱いですが、指示装置としては十分です。そこにCodexが入ると、スマホの弱点だった「細かい操作」をかなり吸収できます。

まとめ

G検定アプリ自体は、静的なJavaScriptアプリをFirebase Hostingで公開したシンプルなものです。

でも今回の本題は、そこではありません。

スマホ → ChatGPTアプリ → Codex → 自宅開発用PC → Firebase Hosting という流れで、スマホだけを入口にして開発作業を進められたことが一番おもしろい点でした。

これまで「スマホで開発」はかなり無理がある印象でしたが、「スマホで指示し、自宅PC上のCodexが作業する」なら現実的です。

小さなWebアプリ、記事ドラフト、README整備、デプロイ準備のような作業から試すと、この便利さをかなり実感しやすいと思います。

参考

• JDLA G検定公式ページ: https://www.jdla.org/certificate/general/
• JDLA シラバス改訂告知: https://www.jdla.org/news/20240514001/
• Firebase Hosting: https://firebase.google.com/docs/hosting
• OpenAI Codex Agent approvals & security: https://developers.openai.com/codex/agent-approvals-security
• 文化庁 著作権について知っておきたい大切なこと: https://www.bunka.go.jp/seisaku/chosakuken/taisetsu/