Gemini 2.5 Flashを活用した子ども向けタイピングゲーム：『Retro-Pop-Typer』開発ストーリー

ce-blog-staff

4か月前

こんにちは。

AI Centricのエンジニアのユン・ジンソンです。

普段はクライアント開発を主にやっていますが、新しい技術への好奇心でいろいろなものを作ってみるのが好きです。

今回は最近、小学生の子供のために作った小さなおもちゃプロジェクトであるRetro-Pop-Typerを紹介します。

このプロジェクトは単純なタイピングゲームですが、Google AI StudioとGemini 2.5 Flashモデルを活用して開発過程の効率を高め、子供のためのカスタマイズ機能を実装した事例です。

開発動機

小学校に入学した子供にもう少しパソコンに親しんでほしいという思いがありました。

しかし、市販のタイピング練習プログラムは硬すぎたり、子供が興味を持てるような要素が不足していると感じました。

「パパが直接、子供が好きな絵文字や単語でゲームを作ってあげたらどうだろう？」という思いから始まりました。

特に、子供が飽きないように、毎回新しい単語とそれに合った絵文字が登場することを望みました。

技術スタック

軽くて高速なウェブアプリケーションを目指し、最新のスタックを適用しました。

・Framework: React 19 (Vite)

・Language: TypeScript

・AI Model: Gemini 2.5 Flash ( @google/genai SDK)

・Hosting：Vercel

Google AI Studio

プロジェクト構造 (Project Structure)

メンテナンスの利便性と拡張性を考慮して、機能別にディレクトリを明確に分離しました。

/src
├── components/ # 再利用可能なUIコンポネント
│ ├── Button.tsx # レトロスタイルボタン
│ ├── VirtualKeyboard.tsx # 視覚的こーボードフィードバック
│ └── Leaderboard.tsx # 順位表示
├── services/ # ビジネスロジック及び外部連携
│ ├── geminiService.ts # Google Gemini API連携 (単語生成)
│ ├── audioService.ts # Web Audio API 基盤サウンド合成
│ └── storageService.ts # LocalStorage 点数保存管理
├── App.tsx # メインゲームループ及び状態管理
└── types.ts # タイプ定義 (GameState, Difficulty など)

主な実装内容 (Implementation Details)

1.Gemini2.5 Flashを活用した「単語」生成

このゲームの核心は、AIがリアルタイムで単語データを生成するという点です。

ハードコードされた単語リストの代わりに、Gemini APIを通じて難易度に合った単語と絵文字を即座に受け取ります。

速い応答速度が重要なゲームの特性上、軽くて速いGemini 2.5 Flashモデルを選択しました。

Structured Output (JSON Schema) の活用

AIをAPIのように活用する際、最も大きな悩みは「出力形式をどのように保証するか」です。

GeminiのControlled Generation (Response Schema)機能を活用してこの問題をすっきり解決しました。

下記は実際のサービスコード( services/geminiService.ts )の一部です。

// @google/genai SDK 活用
const response = await ai.models.generateContent({
    model: "gemini-2.5-flash",
    contents: prompt,
    config: {
        responseMimeType: "application/json",
        responseSchema: {
            // JSON スキーマを定義し、タイプの安定性を確保
            type: Type.ARRAY,
            items: {
                type: Type.OBJECT,
                properties: {
                    text: {
                        type: Type.STRIN                   }, // 単語 (例: "C", "CAT")
                    emoji: {
                        type: Type.STRING
                    } // 単語にあう絵文字 (例: "©️", "🐱")
                }
            }
        }
    }
});

上のようにresponseSchemaを定義すると、別途のパッシングロジックや正規表現がなくても100%信頼できるJSONデータを取得することができます。おかげで次のようなロジックが可能になりました。

１．Easy Mode: アルファベット1文字+関連する絵文字(Look & Feel中心)

２．Normal Mode: 小学校1年生レベルの3～4文字の英単語＋絵文字(学習中心)

2.視覚的フィードバックのための仮想キーボード(Virtual Keyboard)

まだキーボードの文字入力に慣れていない子供のために、画面下部にリアルタイムで反応する仮想キーボードを実装しました。これは単純な装飾ではなく、子供の学習を助ける重要なUX要素です。

・ガイドハイライト: 現在入力すべきアルファベットをキーボード上で明るく表示し、子供が次のキーを簡単に見つけられるように誘導します。

・入力アニメーション: 実際のキーボードを押すと、画面内のキーも一緒に押される視覚的な効果を与え、タイピングの楽しさを増しました。

・直感的なレイアウト: 子供の目の高さに合わせてキーボードのサイズを大きくし、明確なフォントを使用して可読性を高めました。

3.ゲーム状態管理 (Game Loop)

App.tsxではゲーム全体の流れをGameState(MENU→PLAYING→GAME_OVER)で管理し、Reactの状態変化を通じて画面遷移とキーボード入力を制御します。

子供のためのUX (User Experience)

技術的な部分以外にも、主なユーザーである「子供」のために気をつけた部分がいくつかあります。

・即時のフィードバック: タイピングが成功した時の派手なエフェクトとサウンド。

・視覚的な楽しさ: 単なるテキストではなく、絵文字のマッチングを通じて単語の意味を直感的に理解する。

・レトロポップデザイン：子供たちの目を引くカラフルでポップなデザイン。

最後に

「AIで開発した」という言葉は今や当たり前になってしまいましたが、実際の子供のための、小さいながらも明確な目的のあるツールを作る過程はとても楽しかったです。

特に、Google AI Studioを使ってプロンプトを実験し、それをすぐにコードに落とし込む経験は、開発生産性の面でも大きな示唆を与えてくれました。

このプロジェクトが子供たちにとっては楽しいパソコン入門、開発者にとってはAI API活用の小さなインスピレーションになればと思います。

最後まで読んでくださってありがとうございます。