←STELLAR CHART (星海図へ戻る)
Voyage ID: post-71
GENAI-FOUNDATIONS✦ DRAFT (下書き)Difficulty: Level 2

Firebase でアプリにエージェント型 AI 機能を構築する 

Reading: 18 min

Firebase のAI Logicを用いて、ユーザー、App側にAI機能を簡単に組み込むことが可能なことを体験することが目的のセッションなので、深いコードの理解は目的としていません。

Agentic AI や AI 支援ツールを用いたアプリ構築については広く語られていますが、もう一つの側面、つまり『ユーザーのための AI 機能』をアプリに実装することについてはどうでしょうか？これは、AI 以前の制限や開発工数の壁により、従来の開発では不可能だと思われていた全く新しい体験やユースケースを構築することを意味します。この Dojo セッションでは、Firebase を使って AI 搭載機能をアプリケーションに簡単に追加する方法を学びます。

本日のゴール

    • 映画レビューの保存・閲覧ができるWebアプリ
    • FIrebase Data Connect を使用し、アプリの中核を簡単に構築
    • Gemini 3 のマルチモーダルAIとAgentic ツールを活用して、ユーザの現在地に近い上映中の類似映画をリアルタイムで検索

AIアプリ開発とは？

Firebaseの概要 -Data Connect & AI Logic

コードらぼ：アプリを作ってみよう！

Super Final Secret Checkpoint!

(Add Firebase AI Logic into your own app and share a screenshot!)

And then here's just an optional thing.
It's not going to be totally counted so strictly.
But a super-duper final secret checkpoint is
if you're able to add AI logic into your own apps,
any app that you have,
even a simple website,
is fine.
Because AI logic is very easy to add on
to existing web apps or mobile apps.
That's by design.
So if you're able to do that
and you want to share your own project
and your own work that you've done
and how you've added AI logic to it,
please feel free to share screenshots of that as well.
But that won't count as much as, you know,
this final checkpoint for today.
This is the final checkpoint.
This is the super-duper-final-secret checkpoint.
This is totally a no-no.
But if you feel that you can easily add AI to your own app
by using Firebase AI Logic through today's workshop,
please share your own apps on Discord.
Even a simple website is a great opportunity.
I'm looking forward to seeing what kinds of ideas you can come up with
and what kind of new stimulation you can bring out of that.
I'm looking forward to seeing what you can come up with.
I hope you have a wonderful workshop ahead of you.

Firebase本体に非常に興味があったのでSummitさんのデモを聴講出来でよかったです(Speedも良くて聞き取りやすかったです)。
AI Logicを使うことでフロント、ユーザー体験をレベルアップさせることができるのは非常におどきました。全体的なコード変革を必要とせずに2,3行のコードで実装できるのは画期的でした。今までADKやlanggraphなどのAgentic AIを活用したアプリ、バックエンド構築を経験してきたが、ユーザーのためのAI機能という観点でのApp developmentについて触れることができたことが一番の収穫でした。自身のwebにも実装してみると面白いのかなと思ったので、期間内に実装できたら共有したいと思ってます。
APP Checkなどの機能も中身や機能が非常に気になりました。

今までバックエンドやML, DLに尖っていたので、今回出てきたGraphQL, reactなども勉強するのも面白いなと思いました。こちらもFirebase Data Connectなどを活用すれば簡単にアプリの中核として構築できることを全体的に捉えることができたので、Skillsなどで学んでいきたいです。

Thank you for holding this event.

ブログにAI機能を追加する

自分のブログ(Web)にAI機能として、Q&Aアシスタントを作ってみましょう。

結論から言うと、WordPressのWebサイトにFIrebase AI Logic を使用したAI機能を組み込むことは可能です。むしろ、Firebase AI Logic はクライアント側(Java Script)向けのSDKが提供されているため、バックエンドのPHPを改造しなくても、フロントエンドのカスタマイズだけでAI機能を組み込める大きなメリットがあります。

導入ポイントと手順

なぜ、WordPressとFirebase AI Logicの相性が良いのか

通常、WordPressでAI(Geminiなど)を使う場合、APIキーの管理やサーバーサイドの処理をPHPで記述する必要があります。しかし、Firebase AI Logicを使うことで以下のような構成が可能になるわけです。

    • APIキーの隠蔽：Firebase App Checkと連携することで、ブラウザから直接AIを呼び出しても不正利用を防げる。
    • サーバーレス：自分でバックエンドサーバーを構築したり、functions.phpに複雑な処理を書いたりする必要がない。
    • リアルタイム性：AIの回答をストリーミング(1文字ずつ表示)する処理が、JavaScript SDK で簡単に実装可能。

具体的な実装ステップ

WordPressに導入するための流れは以下の通りである。

Firebaseプロジェクトの設定
    • Firebaseコンソールでプロジェクトを作成し、Firebase AI Logic を有効にする。
    • 使用するモデル(Gemini 3.1 Flashなど）を選択する。
    • セキュリティのために、Firebase App Checkを有効にする（推奨）。
WordPressへのSDK読み込み
    • WordPressのテーマ内のheader.php や、特定のページのカスタムHTMLブロックでFirebase のSDK を読み込む。
import { initializeApp } from "https://www.gstatic.com/firebasejs/11.0.0/firebase-app.js";
import { getAI, getGenerativeModel } from "https://www.gstatic.com/firebasejs/11.0.0/firebase-ai-logic.js";

// Firebaseの設定（コンソールからコピー）
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT.firebaseapp.com",
projectId: "YOUR_PROJECT_ID",
// …
};

const app = initializeApp(firebaseConfig);
const ai = getAI(app);
AI機能の実装

例えば、記事の要約ボタンやAIチャットボットを設置する場合、以下のようなコードでモデルを呼び出せます。

const model = getGenerativeModel(ai, { model: "gemini-3.1-flash" });

async function generateAIResponse(prompt) {
  const result = await model.generateContent(prompt);
  console.log(result.response.text());
}

注意点とアドバイス

    • **セキュリティ（App Check）：**WordPressは公開されたWebサイトであるため、APIキーが露出します。APP Check を正しく設定しないと、他人にあなたのFirebase枠(コスト)を使い果たされるリスクがあります。
    • コスト管理：Firebas AI Logic は使いやすい一方で、従量課金制であるため、リクエスト数に応じて課金が発生します。Firebaseコンソールで予算アラートを設定しておくことが安全です。
    • 既存プラグインとの比較：もし、プログラミングを最小限に抑えたい場合は、既存のWordPress AIプラグイン(AI Engineなど)を使う方法もあります。しかし、「独自のロジックを組みたい」や「特定の学習データに基づいた挙動をさせたい」という場合は、Firebase AI Logic の方が柔軟性が高いです。

WordPress AIプラグイン(AI Engineなど)を使う方法についてはこちらの記事で解説しております。

前置きが長くなりましたが、今回は、自身のエンジニアとしてのスキルを活かして、少し凝った機能を開発してみようと思います。例えば、記事内容とユーザーの行動データを組み合わせたパーソナライズAIなどを最終目標にしてみようと思います。

呼び出し回数の制限はできるのか

利用料金やリソースの管理は、運用、開発者として気になる部分だと思います。

結論から言うと、Firebase AI Logic (或いは、その基盤であるVertex AI/ Gemini API)自体にはアプリケーション層の回数制限を自動で設定する機能はありません。

そのため、制限をかけたい場合は、いくつかの仕組みを組み合わせる必要があり、主な対策としては以下の3つです。

    • Firebase App Check で不正利用を防ぐ
    • Google Cloud コンソールでクォータ(割り当て)を制限する
    • Firestore や認証を組み合わせてユーザー単位で制限する

それぞれ詳細に解説します。

Firebase App Check で不正利用を防ぐ

これは、回数制限ではないですが、自分のサイト以外からのアクセスを完全に遮断する機能です。WordPressに埋め込んだJavaScriptのコードがコピーされて、他人のサイトで勝手にAI機能を使われることを防ぎます。これだけでも、予期せぬ請求の大部分を回避できます。

Google Cloud コンソールでクォータ(割り当て)を制限する

こちらは、APIレベルでの１分間あたりのリクエスト数などに上限を設けることが可能です。

    • メリット：設定が簡単。急激なスパイク(攻撃やバズり)による高額請求を防げる。
    • デメリット：1分間に合計100回までといった全体制限になるため、特定のユーザーが使い過ぎるのを防ぐことはできません。

Firestore や認証を組み合わせてユーザー単位で制限する

特定のユーザーに「1日X回まで」という制限をかけたい場合は、こちらの手法が効果的です。

    • Firebase Authentication で匿名ログイン(或いは、ソーシャルログイン)をさせる。
    • Firestore にユーザーごとの本日の利用回数と最終利用時間を保存する。
    • AI Logic を呼び出す前に、Firestoreの値をチェックし、上限を超えていたら実行しない。

[!TIP]

エンジニアとしての裏技（キャッシュ戦略）：同じ質問に対して何度もAIを動かすことはコストの無駄になります。WordPress側のDBやFireStoreに質問と回答のペアを保存しておき、同じプロンプトが来たら、AIを呼ばずに過去の回答を返す仕組みを入れれば、自然とリクエスト数を節約可能です。

まとめ：どれを優先すべきか

まずは 「2. Google Cloudでのクォータ制限」 で全体の上限を縛りつつ、「1. App Check」 で外部からの盗用を防ぐのが、最小限の工数でできる現実的な防衛策です。

もし特定のユーザーによる連打を厳密に防ぎたいのであれば、Firestoreを使ったカウント管理を検討してみてください。

Why

UX向上のため。

How

    • AI Logic
    • App Check

参考

期待できること

🐾
NAVIGATOR AI TOOLKIT

マンチカン航海士の知恵袋

マンチカン航海士が記事全文を読んでいるニャ... 🐾