皆さん、こんにちは！前回の【第2話】では、コードの迷路にハマりながらもリファクタリングを乗り越え、「復習機能」と「手書きキャンバス（テスト版）」を無事に完成させました！（まだ読んでいない方は、ぜひ第2話の記事からご覧くださいね！）
そして今回はいよいよ、このアプリのラスボスであり最大の目玉機能……「AI（Gemini）による手書き漢字の判定」に挑みます！ さらに、開発の勢いが止まらず「せっかくなら兄弟で使えるようにしたい！」と思い立ち、アプリの複数ユーザー対応まで一気に実装しちゃいました。（今回もアイキャッチ画像はChatGPT先生に作ってもらいました！）
プログラミング初心者がAIと一緒にどこまでアプリを進化させられるのか！？この記事のポイントはこちらです！
- 未来感すごい！「手書き画像をAIに送って採点」機能
- 「判定中…」のカッコいいローディング画面でテンションUP
- アプリの顔が変わった！「だれがべんきょうする？」画面
- 兄弟ゲンカ防止！ユーザーごとの「学習履歴＆復習機能」
1. いざラスボス戦！AIに手書きの漢字を判定してもらう
前回作った「画面に指で線を書けるキャンバス」。今回はここに書いた文字を、Googleの最新AI「Gemini」に判定してもらいます。 Gemini先生に「どうやればいい？」と聞くと、こんな手順を教えてくれました。
- キャンバスに書いた文字を「画像（PNG）」としてパシャッと保存する。
- その画像をGemini API（AIへの連絡通路みたいなもの）に送信する。
- 「この画像に書かれている漢字を1文字だけ教えて！」とお願いする。
初心者の私には「画像を保存して送信…？」と呪文に聞こえましたが、AIが書いてくれたコードをペタッと貼ると……なんと、本当に判定してくれたんです！ 私がマウスでプルプルしながら書いた「か」という字も、見事にAIが読み取ってくれました。自分で作ったアプリの裏側でAIが動いているなんて、めちゃくちゃ感動です！
手書きで書いた「山」の文字を、Geminiが見事に正しく判定してくれました！自分のアプリでAIが動いた感動の瞬間です。
2. 待ち時間30秒!? 「ぐるぐるローディング」で体感時間をカバー
AI判定が動いて大感動……だったのですが、実際に使ってみると大きな壁にぶつかりました。 なんと、画像をAIに送って判定結果が返ってくるまで約30秒の待ち時間が発生することが判明！
スマホアプリで30秒も無音で待たされると、子どもなら「あれ？画面が固まった？」とフリーズを疑って絶対に離脱してしまいます。 そこでGemini先生に「待ってる間、子どもがワクワクするようなカッコいい画面を出して！」と相談してみました。
すると、「AIが漢字をよみとっているよ…」というテキストと一緒に、少し緑色に光るクールなアニメーション（ローディング画面）を作ってくれました！
画面が賑やかになったおかげで「今AIが頑張って考えてるんだ！」と伝わるようになり、アプリとしての見た目は一気にアップ！ とはいえ、やっぱりアプリとして30秒待たせるのはちょっと厳しい……（笑）。
「AI判定の高速化」は今後の大きな改善課題として残ることになりました！
判定中の約30秒間、画面が固まったと勘違いされないよう作成したローディング画面。「AIが頑張って解読中」の雰囲気が伝わります！
3. パパの思いつき。「これ、兄弟ごとに履歴分けられない？」
AI判定が完成して大満足だったのですが、ここで新たな欲が出てしまいました。 「このアプリ、うちの子どもたちに遊ばせたいけど、今のままだと全員の学習履歴がごちゃまぜになっちゃうな……」
せっかくなら「自分が間違えた漢字」だけを復習させたい！ ということで、当初の予定を前倒しして「複数ユーザー対応」にも挑戦しました。
アプリを起動すると一番最初にこの画面が出ます！右下の「＋」ボタンで兄弟の名前を追加でき、ゴミ箱で削除もできます。
ユーザーを選ぶと、学習履歴もちゃんと「その子専用」になります！
ユーザーを選ぶと、学習履歴もちゃんと「その子専用」に！新規ユーザーなので「まだ履歴はありません」と表示されています。
キャプション：新しく作ったユーザーなので、ちゃんと「まだ履歴はありません」と表示されています。完璧！
4. 見た目は簡単、裏側は大変？「データのバトンパス」
「だれがべんきょうする？画面」もできて、ユーザーごとの履歴も表示され、「よし完成！」と思ったのですが……実は裏側でちょっとしたバグにハマっていました。
通常のクイズを解いた時はちゃんとその子の履歴に保存されるのに、なぜか「復習クイズ」を解いた時だけ、誰の成績なのか分からなくなって保存されないという現象が起きていたんです。
Gemini先生に相談すると、プログラミングの世界では「ホーム画面」→「クイズ画面」→「結果画面」と進む中で、「今は〇〇くんがプレイ中だよ！」という見えないバトン（データ）をリレーのように手渡ししなきゃいけないと判明。
私の場合、通常のクイズ画面にはバトンを渡していたのに、「復習クイズ画面」にだけバトンを渡し忘れていました（笑）。
Dart
// 修正前のダメな例（誰がやってるか伝えていない）
ReviewQuizScreen(questions: reviewQuestions)
// 修正後の正解（userNameというバトンを渡している！）
ReviewQuizScreen(questions: reviewQuestions, userName: widget.userName)
この「バトンパス（データの引き継ぎ）」を全画面でしっかり繋ぎ直すことで、本当の意味で完全な個別管理ができるようになりました。見た目はシンプルでも、裏側ではいろんなデータが行き交っているんだなぁと実感した出来事でした！
5. おわりに：次回、ついに最終フェーズへ！？
今回のアップデートで、「手書きのAI判定」と「家族みんなで使える複数ユーザー対応」という、市販アプリ顔負けの機能が完成しました！ 当初想定していた機能はほぼ形になり、いよいよアプリは完成間近です。
ここまできたら、親が子どもの学習状況をチェックできる「保護者管理画面」なんかもあると完璧かも……？ 初心者の挑戦はまだ終わりません。次回の奮闘記もお楽しみに！
コメント