ついに…！自作の漢字学習アプリ「かく助と漢字マスター」のVer4が完成し、本シリーズも今回で一旦の完結となります！
※「どんなアプリ作ってるの？」という方は、企画の立ち上げを語った【AIアプリ開発奮闘記 #1】からぜひ読んでみてくださいね。
前回（Ver3）までで「クイズ・履歴・手書きキャンバス」といった基本機能がひと通り動くようになりました。
（前回の激闘の様子は【AIアプリ開発奮闘記 #3】をどうぞ！）
いよいよ今回は「デザインの全面リニューアル」と、親が学習状況を見守るための「保護者向け機能（学習グラフなど）」の追加に挑戦しました。
…が！今回はめちゃくちゃエラーにハマりました（笑）。 しかし、泥臭い試行錯誤のおかげで「AIと上手に開発を進めるコツ」や「素人でもアプリを完成させる秘訣」など、超重要な気づきを得ることができました。
この記事でわかること
- 実際に使った「デザイン刷新プロンプト」大公開
- 初心者が絶対ハマるFlutterのエラー解決法
- アプリの保護者ゲートを「九九」にしたら起きた悲劇
- プログラミング素人でも「完成」にこぎつけるための考え方
同じようにプログラミング学習や個人開発で行き詰まっている方のヒントになれば嬉しいです。それでは、最終回の開発裏話を赤裸々に語っていきます！
デザイン一新！AIへのプロンプトは「難しく考えない」が正解
Ver3までは私が作った「とりあえず動く」レベルのしょぼい見た目だったので、AIの力を借りてデザインをプロっぽく刷新することにしました。
「AIに画像を作らせるプロンプトって難しそう…」と思うかもしれませんが、実は私が実際に送ったプロンプトはこんなにシンプルです。
【実際に送ったプロンプト】 小学生向け漢字アプリを作ってる。ここらで、デザインを一新したいんだけど、男の子が喜ぶようなデザインにできる？ またキャラクターがもし必要なら「かく助」をつかったらいいのではないかと思うけど、どうかな？イメージ画像よろしく！
これだけで、グラデーションヘッダーに光るグロー演出、星の達成度表示がついた本格的なUIデザイン案をChatGPTが出してくれました。
【 Before 】旧デザイン
【 After 】新デザイン
【かく助流：AI画像生成のコツ】 正直、プロンプトは難しくしすぎなくて良いというのが私の考えです。画像生成については、他のAIを使わずに「ChatGPT」に任せるのが、一番気に入ったものを作ってくれるのでオススメです。
もし「どんなプロンプトを書けばいいか全く思いつかない！」と悩むくらいなら、Geminiなどの別のAIに「キャラクター画像を作ってもらうためのプロンプトを考えて」と依頼し、出力されたプロンプトをそのままChatGPTに投げる、という連携技も非常に有効ですよ！
【大惨事】省略コードをそのまま貼って画面が真っ白に…
デザイン改修中、AIとのやり取りで最も焦ったのがこれです。 AIがコードの説明を短くするために、変更がない部分を // ...（中身は変更なし） と省略して出力してくれました。
私はそれを疑いもせず省略コメントごとそのままコピペ。 結果、本来そこにあったはずのアイコンやテキストのコードが丸ごと消え去り、エミュレーターの画面が真っ白に……！マジで絶望しました。
【解決策：基本は「全文」、長いファイルは指示出しを工夫する！】 この失敗以降、AIには基本的に「省略しないで、全文をそのまま貼れる形で出力して」と指示するようにしました。 少し出力に時間がかかっても、「今のファイルを全部消して、渡された内容を丸ごと貼り直す」運用にした方が、結果的にコピペ事故が少なく開発スピードが上がったからです。
ただ、ファイルがあまりに長い場合は、全文を貼り直すのも一苦労ですよね。 そんな時は、AIに以下のように指示を出すのがめちゃくちゃ効果的です！
- 「変更前」と「変更後」のコードを別々のウィンドウ（コードブロック）で出力してもらう（コピペが格段に楽になります）
- 検索用キーワードも別ウィンドウで「1行で、かつそれしか検索ヒットしない文言」として表示してもらう（Ctrl+Fで一発で修正場所に飛べます）
こうやって指示出しを工夫するようになってからは、大きなファイルの修正でも迷うことが一切なくなりました！
保護者ゲートの実装と「九九」の落とし穴
今回は「保護者管理画面（学習グラフ）」も実装しました。
子供が誤って管理画面に入らないように「保護者ゲート」を作ったのですが、実装が一番簡単だったという理由で「ランダムな九九の計算問題（例：3×4=?）」に正解しないと入れない仕様にしました。
……お気づきでしょうか？
このアプリ、そもそも「小学3年生向け」に作り始めたんです。 そうです、小学3年生なら九九なんて余裕で解けてしまうのです！（笑）
これじゃあ全然保護者ゲートの意味がない！ｗ
今回はあくまで個人開発の試作なのでこれでヨシとしましたが、本当にリリースするアプリなら、暗証番号やキーワード入力、あるいはもっと難しい大人向けの問題にする必要がありますね。これも作ってみて初めて気づいた落とし穴でした。
子供のリアルな反応と「無料アプリ最強説」
さて、新しくなったポップな画面や、学習グラフ機能。 実際に子供に見せてみたところ……
「おおっ、かっこよくなった！」
と、最初は良い反応をもらえました！ 「星が増えてる！」と喜んでくれたのも束の間……。
そもそも現状は問題が「小学一年〜三年」までしかなく、中身のボリュームが全然足りないため、速攻で興味を無くされました（悲しい）。
結局のところ、【AIアプリ開発奮闘記 #1】でも書いた通り、「世にある無料の漢字アプリを使った方が全然クオリティ高いしイイ！」という残酷な真実に回帰してしまいましたｗ
バグじゃない！？初心者特有のエラーとの戦い
開発後半は、ファイルを分割したことによる初心者特有の環境エラーに泣かされました。
- 同名ファイルの二重存在：古いファイルと新しいファイルが混在してエラー連発。
- 相対パスの迷子：
../を付けるか付けないかで無限に迷う。 - ファイル編集ミスの悲劇：触ってはいけない
pubspec.lockをいじって環境崩壊の危機。
さらに、「急にエラーが出てエミュレーターが消えた！」と焦って原因を探りまくったら、「単にPCとエミュレーターの接続が切れただけ」だったこともありました。 VSCodeの「問題（Problems）」タブが0件なら、コードのバグではなく環境のエラーです。これを知っているだけで、無駄に自分のコードを疑って時間を溶かすことがなくなります。
アプリ開発完結！素人でも「作れる」という実績
今回で「かく助と漢字マスター」の開発は、一旦完結とします！
もちろん、不足点は多々あります。 問題数が少ない、4〜6年生の漢字がない、キャラクター画像が1枚しかない、BGMもない……修正案を挙げればキリがありません。やろうと思えば永遠に開発できてしまいます。
しかし、私がこの連載で一番伝えたかったのは、完璧なアプリを作ることではなく、 「プログラミング素人が作成しても、アプリは作れるんだ！」という実績です。
「動くものが一通り揃った時点で、一区切りをつける」 キリがないので、未実装の機能は気が向いた時にやるとして、私はまた別の新しい作業やインプットに向かいたいと思います！
「プログラミングは苦手だから…」「難しそうだから…」といった理由で手を出さないのは、本当にもったいないです。 今の時代、AI（ChatGPTやGeminiなど）をフル活用すれば、私のような素人でもそこそこ立派に動くアプリを作れる環境が整っています。
この記事を読んで、「自分にもできるかも？」と思った方は、ぜひ簡単なものからで良いので、AIと一緒にアプリ作りに挑戦してみてくださいね！
最後まで『AIアプリ開発奮闘記』にお付き合いいただき、本当にありがとうございました！ かく助でした！
コメント