【Flutter】Cursorと Claude Code でアプリをリリースしました
これまでのAIを使ったアプリ作りの遍歴です。
一月の時点では簡単な日記アプリのUIなら作れるかも？という程度だったのに、今では全体の1割もコードを書かなくなりました。
- ClineとWindsurfで作ったアプリをリリースした話 (3月)
- Clineと DeepSeek R1 で日記アプリを作ってみた (1月)
- Clineと DeepSeek Chatで日記アプリを作ってみた (1月)
作ることにした経緯
以前植物の水やり記録アプリ(↑の1番目のもの)を作ったのですが、同じ要領で何か作れないかな…🤔と考えていたところ、
「鳥のお世話記録アプリはどう？文鳥って小さいうちは一日に何回も水をあげるから記録も大変らしいし」と身内に言われたためです。
方針としては
- ワンタップで記録
- 記録が一覧で見れて削除や編集も簡単
- ユーザーが飼っている鳥と同じ種類のアイコンに設定できる
です。
設計
ReArchは Claude Opus 4 と相性が良いらしく、不具合を起こさずに作ってくれやすいので採用しました。
freezedはAIに書かせるなら冗長的でも問題ないので使用していません。
他には、Claude Opus 4 がdartzという関数型プログラミング言語っぽく書けるパッケージを追加してきたので、そのまま採用しています。
ReArchが関数型プログラミング言語をベースにしているらしいので、その関係かなと思います。
3年間更新がないパッケージなのは気になりますが、利用箇所はDBからのデータ取得の成否分岐など、簡単に置換できそうな箇所のみなので問題ないかと思います。似たようなパッケージもいくつかありますし。
AI Coding
- Claude Max (20x)
- Cursor Pro
Claude Max で Claude Code を使い、一晩ひたすら再起的にアプリを作らせました。20xでも一回上限来るので5xだと半日くらいかかるかもしれません。
Cursor Pro はAIサジェスト機能 (Cursor Tab) を目当てに使っています。あとは ChatGPT 4.1 が素直に働いてくれるので時々使っています。
作った手順
最初に Claude Code で作ってもらうところは、シェルスクリプトで簡単なループ処理で claude コマンドを叩いています。
1. 企画書をChatGPTに書かせる
これはChatGPTに限らず、ClaudeでもGeminiでも大丈夫です。
「Flutterで鳥のお世話アプリを作りたいので企画書を書いてください」という非常に簡単な指示を出して、その後に細かいところを編集します。
2. 空のFlutterアプリを作る
AIに書かせる必要が無いのでシェルスクリプトにコマンドを書きます。
flutter create <app name> --org <organization name> --platform=ios,android --empty
3. タスクリストを作ってもらう
ファイル名はなんでも良いのですが、TASK.md というファイルに必要なタスクをチェックリスト形式で書いてもらいます。
これは大事な点で、タスクを自由に編集できるようになりますし、Claude Code が力尽きてタスクが中途半端に終わってしまっても途中から再開できます。
例えば各ページの作成タスクのところに「見栄えをもっと良くする」というタスクを追加すると、UIを良い感じにしてくれます。
4. CLAUDE.md を作ってもらう
作業途中で忘れられやすいのであまり重要視はしていませんが、方針やコードの書き方を書いておくと精度が上がります。
5. ひたすらループでタスクを実装してもらう
あとはシェルスクリプトのループでひたすら claude を実行します。レート上限が来た時にサーバーに負荷を掛けないために、sleep コマンドで間を持たせるようにしましょう。
- タスク実装
- エラーチェック
- リファクタリング
- エラーチェック
TASK.mdの更新- コミット
を1セットとして実行していきます。一回のプロンプトで実行させると時々忘れられてしまうので、自分は別々のコマンドで実行しています。
レート上限が早くなりますが、寝てる間にやってもらうのであまり気にする必要はないです。
6. テストの作成
最後に不具合を直しつつテストを書いてもらいます。単体テストやViewのテスト（Widgetテスト）は簡単なのですが、統合テストが難しく、悩み中です。
今回くらいのアプリなら片っ端から手作業で動作を試していけばリリースできますが、最近統合テストが無いことによる不具合を起こしがちなので、そろそろApp Testing agentは導入しようかなと思いました。
手作業で行ったところ
実装周りは前回と変わらずUIの修正、不具合修正、プライバシーポリシー、広告・課金処理くらいです。
以前はクレジット消費が大きいので「ローカライズは最後にしましょう！」と書いてましたが、今はもう気にする必要もなくなりました。
ただ今回はアイコンの追加が大変でした。良さそうなアイコンを五十種類探すのも苦労しましたし、横を向いている鳥の場合、単純に中央揃えにするとクチバシのある方の間が開いてしまうので若干お尻側に移動させたりなど、一つ一つ微調整が必要でした。
作るのに掛かった時間
大体20時間くらいです。
掛かった時間のほとんどはアイコン作成と、ReArchを使うのが初めてだったので躓いたところですね。これがなかったら8時間くらいだったかなと思います。
アイコンは The Noun Project というアイコン素材サイトにサブスクして選んだのですが、単純にアイコンを中央に揃えると違和感があるので位置とサイズ調整が面倒でした。
今後の予定
最初なのでアイコンはモノクロのみですが、やはり何色か欲しいですね。シェルスクリプトを頑張れば何とかなりそうな予感…。
あとは日記からもお世話記録が見れるようにしたりとか、iCloud (Google Drive) バックアップを付けたいなと思っています。
Discussion