概要
スマホアプリを、コーディングAIエージェントで作ってみたいと思いました。
通常のアプリの作り方だとかなり大変になるので、GensparkのAIデベロッパーを使ってみました。
作ったのはPWA(Progressive Web Apps（プログレッシブウェブアプリ）)でWEBアプリなんだけどスマホにインストールしてアイコンとして表示出来ます。
目的：最短で「ホーム画面に追加」できるPWAを公開
技術スタック：Vite + TypeScript（vanilla）、Service Worker、Web App Manifest、ハッシュルーティング
方針：AGENTS.mdでAIの役割を縛り、小さい反復で安定化
想定読者
- PWAを最短で動かして配布したい人
- Genspark（AI Developer）を実務フローに組み込みたい人
完成物
- 2画面構成（Home / Settings）・ハッシュルーター
- インストール可能（manifest + HTTPS + SW）
- オフライン対応（App Shell最小）
- SW更新フロー（新バージョン検知→ワンクリック更新）
手順
- Gensparkの有料版に課金($20/月)
- Githubにリポジトリを登録
- Gensparkの「AIデベロッパー」を選択
- 「既存のGithubプロジェクト」にチェックを入れて「ビルド開始」をクリック
5. GensparkとGithubの連携を設定する。
6. リポジトリのURLを設定する。
7. リポジトリにAGENTS.mdを入れる。(付録参照）
8. ChatGPT(GPT-5)からの指示をGenspark側の「Claude Sonnet 4」に貼り付け、応答をChatGPTに貼り付けるを繰り返す。
9. 完成
10. スマホからURLを開きスマホにアプリとしてインストール出来ることを確認。
ハマりどころと対処
- GensparkのAIがエラーで止まることがあった。スクショを取ってChatGPTに相談した。
- ChatGPTには常にGensparkのAI用に指示を書いてもらった。忘れたときは「Genspark用の指示を書いて」と書いた。
付録：AGENTS.md（最小雛形）
# AGENTS.md
本プロジェクトのAIデベロッパー向け運用ルール。
## 目的
モバイル向けPWAを最小構成で作り、安定運用へ段階的に拡張する。
## 守ること
- 追加ライブラリ禁止。Vite + TypeScript + ハッシュルーターの最小構成を維持。
- いきなり大改造しない。小さな差分で反復。
- GitHubへのpushは許可が出るまで禁止。秘密情報はリポジトリへ書かない。
## 手順
1. 変更計画を箇条書きで提示 → 合意後に実装。
2. 実装後にデモ/プレビューURLを提示して停止（push禁止）。
3. 承認後にcommit/push。公開は指示に従う。
## 検証
- インストール可、オフライン可、直リンクOK、SW更新フローOK。
まとめ
- AGENTS.mdでAIの行動を縛ると暴れず速い
- PWAでスマホアプリを作るとコンパイル環境がいらないため楽
- GensparkのAIエージェントはかなり何でもやってくれる。