概要

スマホアプリを、コーディング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エージェントはかなり何でもやってくれる。