W3-1 データベース × AI

データベース × AI — 実用的な機能を兼ね備えた、本格的なアプリの開発に挑戦しよう。（上津原 和弘）

ほとんどの Web アプリには、必ずと言っていいほど共通して存在するものがあります。それがデータベースです。この記事では、データベースの基礎から Firestore を使ったリアルタイムチャットの実装、さらにアプリへの AI 機能の組み込みまでを順を追って解説します。

目次

1. データベース入門（P.06）
2. アプリにAIを組み込む（P.13）
3. 今週の課題（P.20）
4. Appendix（もっと知りたい人へ）（P.21）

データベース入門

このセクションでは、次の内容を扱います。

• データベースの種類
• Firestore入門
• Firestoreをプロジェクトに追加する
• v0でリアルタイムチャットアプリを作る
• 上手く動かない場合は？

データは世界中の巨大なデータセンターに保存されています（参考：Googleデータセンター）。

データベースの種類

データベースには大きく分けて、従来からある SQL と、JSON ベースの NoSQL があります。

SQL（従来技術）

• スプレッドシートのような表構造を持つ。
• ＜課題＞
  • サーバーを常時稼働させる場合が多く高コストで、サーバー台数を変更しづらいため大量アクセスに弱い。
  • 事前にデータ構造を厳密に定める必要がある。

その課題を受けて登場したのが NoSQL です。

NoSQL（JSONベース）— 今回利用！

• プログラム内のデータ構造を、そのままデータベースにアップロード可能。

	SQL	NoSQL（JSONベース）
データ構造	表構造（スプレッドシートのような形）	JSONベース（柔軟）
事前定義	データ構造を厳密に定める必要あり	プログラム内の構造をそのまま保存可能
弱点	高コスト・サーバー台数の変更がしづらく大量アクセスに弱い	検索が弱い・データ構造が乱れやすい

💡 NoSQL にも「検索が弱い」「データ構造が乱れやすい」というデメリットがあります。しかし、無料枠を使ってコストをかけずに開発するため、本講義では NoSQL を使います。 ⚠️ SQL が使いたい方は、Supabase 等がオススメです。

Firestore入門

Firestoreとは

• Google が提供する初心者向けクラウド（Firebase）のサービスの一つ。
• NoSQL データベースで、リアルタイムな同期が可能。

簡単なサンプルを動かそう！

• 「35行で作れるリアルタイムチャットアプリ」を動かしてみてください。Colab で実行すると、下に入力欄が出ます。

【任意】Firestoreのダッシュボードを開こう

• Firestore のダッシュボードを開き、チャットがどのように記録されているか確認してみましょう。
• Firestore > messages > [ランダムID] で保存されているはずです。

💡 Firebase プロジェクトには、アンケート回答時のメールアドレスで招待しています。

Firestoreをプロジェクトに追加する

💡 ここは暗記しなくても OK！

アクセスキーの取得

1. プロジェクトの概要 > 全般 を開く。
2. 下にスクロールすると、ブラウザ用 API キーが見つかる。
3. このコードを知っている人なら誰でも読み書きできる。

💡 AI にこのコードだけ共有すれば OK。又はサンプルを利用。

特徴

• ブラウザ用 API キーは、公開を前提とした鍵（上画像）。
• 管理者権限付きのサーバー用 ServiceAccount も存在する（次項で解説）。

💡 APIキーとは：サービスを利用するための「鍵」。鍵と利用料の請求先が紐づいているため、サーバー鍵の流出は厳禁！

APIキーとセキュリティ

API キーには性質の異なる2種類があります。用途を取り違えないことが重要です。

一般的なAPIキー（マスターキー）

• 全ての情報を読み書きできるマスターキー。
• 絶対にユーザーに渡してはいけない。
• 環境変数で安全に管理する。
• 例えるなら：自分の家の鍵。

ブラウザ用APIキー（Firebase Web用APIキーなど）← 今回利用

• 明示的に許可した情報だけ読み書きできる鍵。
• ユーザーに渡しても、悪用の余地が少ない。
• 公開されることを前提としているため、AI に渡してもリスクが低い。
• 例えるなら：博物館のチケット。

	一般的なAPIキー	ブラウザ用APIキー
権限	全情報を読み書きできるマスターキー	明示的に許可した情報だけ読み書き可能
ユーザーへの共有	絶対に渡してはいけない	渡しても悪用の余地が少ない
AIへの共有	NG（環境変数で安全に管理）	リスクが低い（公開前提）
たとえ	自分の家の鍵	博物館のチケット

v0でリアルタイムチャットアプリを作る！

アプリ開発

1. v0 に「ログイン不要で使える、リアルタイムチャットアプリを作って」と指示する。
2. その指示の下に、先ほどのブラウザ用 API キーを貼り付ける（プロンプト例はこちら）。

リアルタイムで同期されることを確認する

1. Publish からアプリを公開し、複数のタブでアプリを開く。
2. 一つのタブでメッセージを送信すると、全てのタブでリアルタイムにメッセージが投稿されることを確認する（動作サンプル）。

上手く動かない場合は？

うまく動かないときは、次の2つの方法で対処します。

方法1：ログを確認して修正

1. [1] のアイコンをクリックして、Console を開く。
2. v0 のリクエストは高額なので、まず Gemini に質問する。
3. 修正方法に納得できたら、v0 に頼む。

方法2：コードを編集する

1. [2] のアイコンをクリックしてエディタに切り替える。
2. 自力での理解が難しければ、ログと共に Gemini に相談し、修正したコードを提案してもらう。
3. コードを書き換えたら [2] をクリックして、プレビューに戻す。

アプリにAIを組み込む

ここからは、AI 機能を持ったアプリを作成していきます。

AI機能をもったアプリを作成する

アプリを作成する

1. v0 に「Firebase AI Logic で AI チャットアプリを作って」と指示する。
2. その下に、先ほどのブラウザ用 API キーを貼り付ける（プロンプト例はこちら）。

💡 v0 公式の Vercel AI SDK や Gemini API 等の選択肢も OK です。

• 代わりに Gemini API などを使う場合は、Add Environment Variables（サーバー内保存）と聞かれた際に、サーバー用 API キーを入力して送信する。

動作確認をする

• メッセージを送信して、AI からの返答を確認できれば成功！（動作サンプル）

［任意］自分で学習させたAIでリアルタイム画像認識

自分で学習させた AI モデルをアプリに組み込み、リアルタイム画像認識を実装する発展課題です。

Teachable Machineとは

• Google 製の、無料で使える初心者向け AI 学習サービス。
• Teachable Machine を開き、Image Project > Standard Project を選択する。

学習させる

1. Webcam > Hold to Record を長押しし、学習画像を集める。
2. Class 1 と Class 2 で別々の物体が映るように画像を集める。
3. 画像が集まったら、Train Mode で学習を行う。

モデルを組み込む

1. 学習が終わったら Preview > Export Model を開き、Upload my model を押す。
2. アップロードが終わったら、下に表示されているコードをコピーする。
3. v0 で「ジェスチャーを認識するアプリを作って」と入力し、下にコードを貼り付ける（動作サンプル）。

⚠️ 一回で成功しない場合が多いため、必要に応じて Gemini でコードを修正してください。

今週の課題

〆切：3/13（金）23:59 ⚠️ 余裕を持って提出し、メンターからフィードバックをもらいながら改善することを推奨します。

課題①：企画書を元に中間アウトプットを提出

• ★ 企画書を元に、中間アウトプットを提出する。
• 作品の完成は Week 4 末が目安ですが、できる範囲で開発を進めて作品アプリの URL を提出してみましょう。

💡 Week 3 / 4 の内容の活用は任意です。企画書のアイデアを形にすることを最優先してください。

課題②：チーム名／プロダクト名の決定

• ★ チーム名／プロダクト名を決定する（個人参加の方はプロダクト名だけで OK！）。
• チーム名が決まったら、メンターに依頼して Discord のチャンネル名を変更してください。

提出方法・守ってほしいこと（共通）

• 提出方法：Google Form で課題を提出し、Discord で担当メンターに告知。必要があれば共有 Google Driveを活用する。
• 守ってほしいこと：期限内なら再提出可能です。提出忘れを防ぐために早めに提出しましょう。

クロージング

各チーム1つの有料版v0配布について

• Discord 告知内容の通り、Week 1・Week 2 を通して優秀な作品を多数提出いただいたため、新たに予算を確保し、各チームに1人に有料版 v0 を配布できることになりました。
• v0 の利用上限を超過する予定の方で、チームでの申請がまだの方は、こちらのGoogle Formからアンケートの回答をお願いします。

💡 Form の提出から数日以内に招待メールを送信します。3/28 までの提供を想定しています。

皆さんが作ったアプリを見せてください！

• Week 1 同様、お題提出チャンネルのスレッドに「データベース × AI」を活かした作品を投稿してみましょう！
• どんなアプリでも共有大歓迎です。
• もし気に入った他の人の作品があれば、リアクションで応援してあげましょう🎉

💡 選考には影響しないため、気軽に投稿ください！

アンケートへの回答をお願いします

• 講義をより良くするためには、皆さんの意見が必要不可欠です。
• Form 以外でも、Zoom のチャットや Discord のチャンネルなどで、たくさん呿いてほしいです。
• 実践教育プログラムをより良くしていくために、皆さんの感想をお待ちしています（Google Formはこちら）。

Appendix：もっと知りたい人へ

学習リソース紹介

公式ドキュメント

• Firebase 公式ドキュメント：読み書き、更新検知など、網羅的かつ体系的に解説している。
• Google Cloud の基礎：コアインフラストラクチャ：クラウド技術の全体像を体系的に学べる。

押さえておきたいクラウドサービス

• GitHub Pages：無料で簡単に HTML を公開できるサービス（Github Pages入門）。
• Vercel：v0 の開発元が提供するクラウドサービス（Next.jsデプロイ、LINE Bot(Python)デプロイ）。
• Cloud Run：Docker に乗るものなら何でもデプロイできる最後の砊（CloudRun入門）。

その他

• Hugging Face：最先端の AI モデルを簡単に利用可能（画像生成AIColab Notebook）。
• Mediapipe：ブラウザで動作する AI モデル（サンプルプロジェクト）。

用語解説

⚠️ 免責事項：分かりやすさを優先しているため、厳密な定義と異なる場合があります。

用語	解説
データベース	アプリの状態や、ユーザーの情報を保存しておく場所。ファイルストレージとは別物。
AI	人工知能。人間のような知的活動を行うことができる。
スプレッドシート	Google 版 Excel。
JSON	JavaScript Object Notation の略。人間にも読みやすく、多くのプログラミング言語でサポートされる。
NoSQL	ドキュメント型データ構造や、グラフデータ構造など、表以外のデータ構造を持つことが多い。
生成AI	分析やクラス分けを行う従来の AI と違い、学習データにない未知のパターンも生成できる。
ダッシュボード	様々な情報を一覧表示するページ。
ServiceAccount	Google Cloud で使われる、ユーザーと同格の権限を持てるアクセスキー。
リアルタイムデータベース	リロードなしに、変更と同時に表示内容の更新を発生させることができる。