小学生の「できた！」を資産化する教育エージェントをCloud Run×Vertex AIで構築【Agentic AI Hackathon】
はじめに：教育DXに「ワクワク」が足りない
教育現場のデジタル化（DX）が進んでいますが、その多くは「出欠管理」や「成績管理」といった大人のための効率化に留まっていませんか？
主役であるはずの子どもたちにとって、学習記録をつけることは「面倒な事務作業」でしかありません。
「もし、学習記録が宝物集めのような体験に変わったら？」
「もし、AIが先生の相棒（エージェント）として、子どもたち一人ひとりを全力で褒めてくれたら？」
そんな仮説を検証するために、「第4回 Agentic AI Hackathon with Google Cloud」 に応募すべく、学習記録プラットフォーム『Command Center｜放課後キャンパスクラブ』を開発しました。
本記事では、このプロダクトがどのように「教育×ゲーミフィケーション×エージェントAI」を実現したのか、Google Cloud の技術スタックを中心としたアーキテクチャと共に解説します。
1. プロジェクト概要：先生の「分身」を作る
本プロジェクトは、小学生向けのプログラミング教室やクラブ活動を想定した、ゲーミフィケーション学習記録アプリです。
🧩 解決する2つの課題
-
子ども側：継続のモチベーション維持
- タイピング練習やマインクラフト制作は、達成感が一過性で、記録に残りにくい。
- Solution: 学習成果を「トレーディングカード」として発行し、ガチャで収集させることで「資産化」する。
-
先生側：フィードバックの限界
- 一人ひとりの生徒に対し、毎回気の利いたコメントや適切な評価を返す時間がない。
- Solution: Vertex AI (Gemini) が先生の意思を汲み取り、教育的効果の高いフィードバックを自律的に生成・配信する。
🤖 "Agentic AI" としてのアプローチ
今回のハッカソンのテーマである「Agentic AI」。単なる自動生成ツールと、エージェントの違いは「目的を持って自律的に振る舞うか」にあります。
このシステムでは、AIを「先生の教育理念を拡張するエージェント」と位置づけました。
先生が「タイピングスコアが伸びた」という事実を入力するだけで、エージェントは
- 生徒の過去のデータと比較し、
- 小学生の心に響く「冒険心をくすぐるカードタイトル」を考案し、
- 教育心理学的に効果的な「褒め言葉」を生成して、
- 生徒のデバイスへ通知を送ります。
これは、先生が忙しくて手が回らない「個別の承認欲求への対応」を、エージェントが自律的に代行するワークフローです。
2. デモ動画
論より証拠。実際に動いている様子をご覧ください。
特に、「先生が事実を入力 → AIがカード生成 → 生徒がガチャで獲得 → 3Dで鑑賞」 という一連のUXフローにご注目ください。
3. システムアーキテクチャ
Google Cloud のマネージドサービスをフル活用し、スケーラビリティと開発スピードを両立させました。
🏗️ Architecture Diagram
🛠️ 技術スタック選定の理由
| カテゴリ | 採用技術 | 選定理由 |
|---|---|---|
| Hosting | Cloud Run | Vue.js (Vite) + Nginx のコンテナをデプロイ。「コンテナをポン置きで動かせる」 手軽さと、https化/オートスケールの容易さが決め手。 |
| AI Model | Vertex AI | 先生の意図を汲み取る高度な推論能力が必要なため採用。SDKには最新の統合ライブラリ google-genai を使用。 |
| Backend | Cloud Functions (2nd Gen) | AI呼び出しロジックをカプセル化するマイクロサービスとして。Pythonランタイムを採用し、Vertex AI との親和性を最大化。 |
| Database | Supabase | Auth / DB / Storage を一元管理。Google Cloud の強みである「AI」と「実行基盤」の実装にリソースを集中させるため、永続化層には知見のある Supabase を戦略的に採用。 |
| Frontend | Vue.js 3 + Tailwind CSS | 開発スピード優先。script setup 構文による生産性の高さと、Tailwind によるデザインの一貫性確保。 |
4. 実装のポイント詳解
① Cloud Run でのフロントエンド配信
SPA (Single Page Application) を Cloud Run で配信するため、マルチステージビルドを採用しました。
以下は、「ビルド環境と実行環境を分ける」 という構成意図を示すための Dockerfile の実装イメージです。
Cloud Build と連携させることで、GitHub へのプッシュをトリガーに自動デプロイされるパイプラインを構築しました。これにより、ハッカソン期間中の試行錯誤を高速化できました。
② Vertex AI × 最新SDK (google-genai)
Cloud Functions 上の Python コードでは、最新の統合 SDK である google-genai を採用しました。これにより Vertex AI 上の Gemini モデルを、非常にシンプルなコードで呼び出すことができます。
また、単に Gemini を呼ぶだけでなく、「先生のペルソナ」 をシステムプロンプトとして与えることで、エージェントとしての振る舞いを定義しています。
このように明確な役割を与えることで、味気ない「作品登録完了」の通知が、生徒にとっては「伝説の装備を手に入れた」ような体験に変わります。
③ リッチなWeb体験（3D & エフェクト）
Webブラウザ上でネイティブアプリ並みの体験を提供するため、以下のライブラリを活用しました。
- <model-viewer>: Google が提供するWebコンポーネント。マインクラフトの .glb ファイルを、わずか数行のHTMLでインタラクティブに表示できます。
- canvas-confetti: ガチャで高レアリティ（SR/UR）が出た瞬間に、画面いっぱいに紙吹雪を舞わせる演出に使用。ドーパミンを刺激する重要なUX要素です。
5. まとめと今後の展望
開発を通して得られた知見
Google Cloud (特に Cloud Run と Vertex AI) を組み合わせることで、「インフラ管理の手間を最小限にしつつ、AI機能を組み込んだモダンなWebアプリ」 を、極めて短期間で構築できることを再確認しました。
特に Cloud Run は、ローカルで開発したコンテナがそのまま本番環境で動くため、デプロイにまつわるストレスがほぼありませんでした。
Future Roadmap
ハッカソン期間後は、以下の機能拡張を予定しています。
- Gemini Vision の活用: マインクラフトのスクリーンショットを解析し、「すごい建築ですね！色使いが独特です」といった感想を、画像から直接生成する機能。
- Gemini 2.0 Flash / Multimodal Live API: 現在プレビュー中のリアルタイムAPIを活用し、生徒の操作に反応してその場で声をかける「ライブエージェント機能」。
教育現場に「楽しさ」という魔法をかけるため、Command Center は進化し続けます。
Discussion