Gemini 画像 API をアプリに統合する方法: Firebase AI Logic か backend か

アプリがモバイルや Web クライアントから Gemini image generation を直接呼ぶ必要があるなら、まず Firebase AI Logic を使うべきです。自分たちで信頼できる backend を持っていて、より細かい image controls が必要なら、Gemini API を server-side で呼ぶべきです。 これが現時点で最も安全な既定路線です。Firebase AI Logic は direct-from-app の公式ルートであり、下位の Gemini image API には Firebase がまだ表に出していない制御面が残っているからです。

このテーマで本当に危険なのは syntax ではありません。security boundary を間違えることです。モバイルアプリや公開された frontend に raw Gemini API key を入れるべきではありません。Firebase AI Logic の getting started を 2026年3月23日 に確認すると、Gemini API key を app codebase に入れないこと、そして早い段階で App Check を有効にすることが明記されています。この一点だけでも、client-side integration の既定路線は Firebase AI Logic になります。

もう一つ、最初に出しておくべき caveat があります。Firebase の image generation ガイド も 2026年3月23日 時点で、Firebase AI Logic 上の Gemini image generation を Preview とし、image models には Blaze が必要で、明示的な aspect_ratio と image_size は まだ非対応 としています。出力サイズを厳密に固定したい、server-side validation を入れたい、あるいは broader Gemini API surface area が必要なら、backend route の方が適しています。

要点まとめ

• モバイル / Web アプリから Gemini image generation を直接呼ぶなら Firebase AI Logic が既定路線です。
• server を自分たちで管理していて、aspectRatio、imageSize、監査、storage、より厳密な quota policy が必要なら trusted backend route を選びます。
• raw Gemini API key を mobile code や frontend code に置いてはいけません。
• 新規 integration の多くは gemini-3.1-flash-image-preview から始めるのが安全です。
• gemini-3-pro-image-preview へ上げるのは、text-heavy graphics や premium assets が価格差を正当化するときだけです。
• 本番公開前に Preview、Blaze、App Check、per-user limits を前提に設計してください。

より広い全体像が必要なら Gemini Image Generation Tutorial: App, AI Studio, and API を先に読むのが近道です。copyable な server-side snippets を先に見たいなら Gemini Image Generation Code Examples が向いています。次の論点が architecture ではなく予算なら Gemini image generation API pricing を開いてください。

コードを書く前に Gemini 画像 API の統合ルートを先に決める

この検索意図が分かりにくいのは、SERP が三つの仕事を一つに混ぜているからです。Firebase docs は「アプリからどう Gemini を呼ぶか」を説明します。Gemini image docs は「下位の image API が何をサポートするか」を説明します。Android docs は「それが mobile stack ではどう見えるか」を説明します。routing rule を持たずに順番に読むと、互いに矛盾しているように見えます。

実用的な rule は単純です。クライアント自身が Gemini を呼ぶ必要があるなら Firebase AI Logic、backend が安全に request を所有できるなら server-side に寄せる。 この判断は framework の好みよりも強いです。Next.js か Flutter か、Android か Web かより先に決めるべきです。

Firebase AI Logic が勝つのは、user-facing feature にとって shortest secure path が欲しいときです。mobile and web apps 向けに作られていて、App Check を story に含めやすく、「この chat thread の中で画像を生成する」「アップロード画像をアプリ内で編集する」といった interaction loop に合います。

一方 backend route が勝つのは、アプリが client-side から直接 model access する必要がないときです。API boundary、background worker、server-owned job system がすでにあるなら、lower-level Gemini API の方が quotas、prompt validation、logging、storage、moderation、billing controls を自然に置けます。production で痛みが出るのはたいていこの層です。

現実的には中間の成長ルートもあります。最初は Firebase AI Logic で client-side UX を素早く検証し、feature の価値が見えたら image generation を backend に寄せる。これは合理的です。問題なのは、この二つを最初から interchangeable だと見なすことです。

Firebase AI Logic はモバイル / Web 直呼びの標準ルート

Firebase の overview page はかなり率直です。Gemini API を mobile or web app から direct に呼ぶ必要があるなら、server-side ではなく Firebase AI Logic client SDKs を使うべきだと書いています。だからこそ「アプリに統合したい」という文脈では、まずこれが標準ルートになります。

価値は convenience だけではありません。security boundary です。同じ setup flow は Gemini API key を Firebase project 内に作りますが、その一方で app code に入れないよう明示します。そしてアプリを外に見せる前に App Check を有効にすることを強く勧めています。public JavaScript に provider key を貼る tutorial より、こちらがはるかに安全な出発点です。

Web での基本形は次の通りです。official pattern に沿いながら、新規 integration では古い gemini-2.5-flash-image の代わりに gemini-3.1-flash-image-preview を default lane として使います。

javascript
import { initializeApp } from "firebase/app";
import {
  getAI,
  getGenerativeModel,
  GoogleAIBackend,
  ResponseModality,
} from "firebase/ai";

const firebaseConfig = {
  // ...
};

const firebaseApp = initializeApp(firebaseConfig);
const ai = getAI(firebaseApp, { backend: new GoogleAIBackend() });

const model = getGenerativeModel(ai, {
  model: "gemini-3.1-flash-image-preview",
  generationConfig: {
    responseModalities: [ResponseModality.TEXT, ResponseModality.IMAGE],
  },
});

const prompt =
  "Create a clean onboarding illustration for a budgeting app. Use a calm blue palette and leave room for headline text.";

const result = await model.generateContent(prompt);
const imagePart = result.response.inlineDataParts()?.[0];

if (imagePart) {
  console.log(imagePart.inlineData.mimeType, imagePart.inlineData.data);
}

覚えておくべき点は二つあります。第一に、Firebase AI Logic の image generation は text と image を同時に返す ため、client 側で両方を処理できる必要があります。第二に、Firebase AI Logic ではまだ aspect_ratio と image_size を明示できないので、「headline 用の余白を残す」「縦長 poster にする」といった composition hint を prompt に持たせる必要があります。つまり、Firebase AI Logic は simpler route であって most controllable route ではありません。

ここで billing も正直に整理すべきです。Firebase の broader な Gemini onboarding は free-tier friendly に見えることがありますが、この use case では narrower で current な image-generation guide を優先すべきです。そこでは Gemini image models に Blaze が必要だと書かれています。したがって安全な要約は、「Gemini app integration は無料」でも「必ず高い」でもなく、一般の onboarding は安く始められても、Gemini image generation 自体は today の paid route だということです。

より強い制御が必要なら信頼できるサーバー側に寄せる

アプリに backend があるなら、lower-level Gemini API の方が長期的には健全な integration shape になることが多いです。理由は見栄えではなく control です。

Gemini image generation docs では imageConfig を通じて aspectRatio や imageSize を明示できます。一方 Firebase の image-generation guide は、Firebase AI Logic ではそれらが まだ露出していない と書いています。この一点だけで architecture decision が変わるプロダクトは多いです。16:9 の hero、1:1 の product card、9:16 の story asset、あるいは cheap size と premium size の切り分けが必要なら、server route の方が contract がきれいです。

さらに重要なのは、backend route なら image generation を business workflow の一部にできることです。abuse filtering、user-level billing、moderation hooks、Cloud Storage や S3 への保存、audit logs、internal admin flows、client に出したくない prompt templates。これらは production feature になるほど重要になります。

JavaScript での server-side shape は次のようになります。

javascript
import { GoogleGenAI } from "@google/genai";

const ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY });

export async function createMarketingImage(prompt) {
  const response = await ai.models.generateContent({
    model: "gemini-3.1-flash-image-preview",
    contents: prompt,
    config: {
      responseModalities: ["IMAGE"],
      imageConfig: {
        aspectRatio: "16:9",
        imageSize: "2K",
      },
    },
  });

  const imagePart = response.candidates?.[0]?.content?.parts?.find(
    (part) => part.inlineData
  );

  if (!imagePart?.inlineData) {
    throw new Error("No image returned from Gemini");
  }

  return {
    mimeType: imagePart.inlineData.mimeType,
    data: imagePart.inlineData.data,
  };
}

この route は production asset generation、admin-only creative tooling、固定サイズや observability が重要な機能に向いています。Firebase を surrounding stack として使いつつ orchestration は server-owned にしたい場合、Firebase 自身も Genkit を server-side route として案内しています。つまり mental model は、Firebase AI Logic が direct client integrations、Genkit や自前 backend endpoint がより複雑な server-owned AI behavior です。

Next.js や Firebase App Hosting で重要なのはフレームワーク名より境界

Web app では、問題は framework branding よりも request boundary がどこに落ちるかです。

ユーザーが UI の中で即座に image generation や image editing を行うなら、Firebase AI Logic が shortest secure path です。frontend は Firebase gateway を通り、App Check を重ねられ、raw Gemini API key を public JavaScript に置かずに済みます。creator tools、chat plus image feature、軽量 editor によく合います。

逆に、この feature が interaction より business processing に近いなら、自前の server route を使う方が自然です。Next.js route handler、Cloud Function、App Hosting backend は、生成結果を保存したり、normalize したり、監査したり、課金したりする場として適しています。また、model choice、image size、prompt policy、audit trail を一箇所に集約しやすくなります。

要するに次の二択です。

• Frontend Firebase AI Logic route: ユーザーが要求し、アプリが直接結果を受け取り、その direct loop 自体が価値になる。
• Backend Gemini API route: クライアントは自分たちの server に job を依頼し、server が model、image size、aspect ratio、storage、quota behavior を決める。

多くの product teams は reusable UI を作る前にこの decision を固めるべきです。そうしないと client-side 前提の UX を、あとから急いで server 側に押し込むことになります。

Android では Firebase AI Logic と App Check が自然な出発点

Android は Firebase AI Logic が最も自然に見える場所です。Google 自身がそう整理しているからです。Android Developers の Gemini Developer API ページ も、app integration の入口として Firebase AI Logic を示しています。

Kotlin の形はシンプルです。Web の例と同様、重要なのは SDK call そのものだけでなく、App Check と現実的な quota policy を持つ Firebase AI Logic project の中で使うことです。

kotlin
val model = Firebase.ai(backend = GenerativeBackend.googleAI()).generativeModel(
    modelName = "gemini-3.1-flash-image-preview",
    generationConfig = generationConfig {
        responseModalities = listOf(ResponseModality.TEXT, ResponseModality.IMAGE)
    }
)

val prompt = "Create a 1:1 travel sticker of Seoul at night in a bright flat illustration style."
val response = model.generateContent(prompt)

val image = response.candidates
    .first()
    .content
    .parts
    .filterIsInstance<ImagePart>()
    .firstOrNull()
    ?.image

これは image feature が本当に user session に属するなら良い first Android path です。ただし運用視点は必要です。Firebase AI Logic quotas では 100 RPM per user が default とされ、provider limits が優先すると書かれています。つまり bursty な image feature を持つ Android app は defaults のまま放置すべきではありません。per-user cap を business が支えられる水準に落とし、App Check を post-launch hardening ではなく release checklist に入れるべきです。

もし Android app が end-user prompt box ではなく、team asset generation や back-office workflow に近いなら、ここでも server route の方がきれいです。platform docs は direct SDK path を万能に見せますが、実際にそれが最適なのは direct client interaction が product である場合に限られます。

モデル選択と、ルートを切り替えるべきタイミング

新規 integration の多くは gemini-3.1-flash-image-preview から始めるべきです。pricing page と deprecations page を 2026年3月23日 に確認すると、この判断を支持しています。Flash Image は現行の default fast lane であり、gemini-2.5-flash-image は 2026年10月2日 の shutdown date が示された legacy lane です。

gemini-3-pro-image-preview に上げるのは、product outcome がそれを正当化するときだけです。典型的には text-heavy graphics、infographic-like output、first pass の失敗が高くつく premium assets です。「アプリ内で素早く画像を作る」が仕事なら Flash Image が default です。「画像内の文字や layout quality まで重要」が仕事なら Pro が正当化されます。

editing workflows でも route change は起こります。Firebase AI Logic は app-side contract に収まる conversational edit に強い一方、reference-heavy edits、file pipelines、strict output guarantees へ広がると server route が有利になります。Firebase AI Logic FAQ and troubleshooting では Gemini Developer API の Files API が Firebase AI Logic SDKs ではサポートされないとされています。これも複雑な asset workflows が backend 向きであるサインです。

公開前に決めるべき安全性、クォータ、コスト

この層は今でも多くの ranking pages が過小評価しています。

App Check は nice-to-have ではなく architecture の一部です。 Firebase の setup guide では、最初の数分の試用では必須ではない一方、public に出す前には早く有効化すべきだと書いています。direct client-side route を採るなら、App Check は main build checklist に入るべきです。

Firebase AI Logic と Gemini にはそれぞれ quota layer があります。 Firebase AI Logic quotas では default が 100 RPM per user ですが、provider quotas が先に効きます。Gemini の rate-limit docs では project-level limits と preview models の厳しさが説明されています。運用上の意味は、同じ app が Firebase gateway 側でも、underlying Gemini provider 側でも 429 を返し得るということです。

pricing は footnote ではなく model policy に変えるべきです。 2026年3月23日 時点で pricing page は gemini-3.1-flash-image-preview を 0.5K image あたり $0.045、1K で $0.067、2K で $0.101、4K で $0.151 と示しています。gemini-3-pro-image-preview は 1K または 2K image で $0.134、4K で $0.24 です。これらの数字は product default に直結すべきです。多くのアプリはすべての request を premium lane に流すべきではありません。

Preview であることは rollout plan に影響します。 Firebase AI Logic の image generation はまだ Preview で、preview models の rate limits も厳しめです。これは feature を避けろという意味ではありません。feature flags、user-level caps、予測可能な default sizes、quota exhaustion 時の fallback messaging を持って出すべきだという意味です。

現実的な production checklist は最低でも次を含みます。

• App Check を有効にする
• per-user RPM を事業が支えられる水準まで下げる
• default model policy と optional premium upgrade path を決める
• model choice、success rate、quota failures を logging する
• 画像を client-side のみで保持するのか、server-side に保存するのかを決める

これを飛ばすと、最初の深刻な bug report は image prompt ではなく economics か abuse から来ます。

FAQ

Firebase なしで frontend code から直接 Gemini image generation を呼べますか？

raw Gemini API key を frontend や mobile code に置くべきではありません。feature が本当に direct client calls を必要とするなら Firebase AI Logic を使い、provider key をアプリ外に置いてください。そうでないなら、自分たちの backend の後ろに置くべきです。

Firebase AI Logic は今 imageSize と aspectRatio を明示サポートしていますか？

少なくとも 2026年3月23日 時点では、Gemini image generation に対して明示的にはサポートしていません。Firebase の image-generation guide がそう書いているため、exact output control が重要な場合は backend Gemini API route の方が適しています。

Firebase AI Logic で Gemini image generation を使うのに有料プランは必要ですか？

はい。Firebase の current image-generation guide では image-generating Gemini models に Blaze が必要だと明記されています。この use case ではこれが優先すべき current answer です。

手戻りを生みやすい失敗

第一の失敗は raw Gemini API key を client に埋め込むこと です。Firebase docs は現在これを明確に禁じています。もし tutorial がまだ勧めているなら、その tutorial はこのテーマの current quality bar を下回っています。

第二の失敗は Firebase AI Logic と lower-level Gemini API が同じ image controls を持つと思い込むこと です。Firebase の image guide では aspect_ratio と image_size がまだ使えない一方、Gemini image docs ではそれらが exposed されています。exact output size が重要なら backend decision を早く行うべきです。

第三の失敗は Gemini Developer API の一般的な onboarding を「Firebase image generation は無料」という証拠として読むこと です。これは広すぎます。この use case では narrower で current な image-generation guide を優先すべきで、そこには Blaze が必要だと書かれています。

第四の失敗は 古い gemini-2.5-flash-image sample を current default のように使うこと です。Firebase の code samples に残っていても、supported-model list と deprecations page を見れば、新規 work は gemini-3.1-flash-image-preview から始める方が適切だと分かります。

第五の失敗は quota planning を後回しにすること です。Firebase の quotas page と Gemini の rate-limit docs は、project-level と per-user limits のために image feature が失敗し得ることを示しています。quota planning は appendix ではなく build phase の仕事です。

実装 detail が次の関心なら Gemini Image Generation Code Examples を見てください。image editing が主題なら Gemini image-to-image editing の方が絞れています。価格や quota failure の話なら Gemini image generation API pricing と公式 rate-limit docs に戻る方が有益です。

結論

「Gemini 画像 API をどうアプリに統合するか」の最良の current answer は、SDK 名ひとつではありません。architecture choice ひとつです。

モバイル / Web クライアントから direct に呼ぶ必要があるなら Firebase AI Logic を使う。team が server を管理していて explicit image controls、observability、cost governance が必要なら trusted backend route を使う。新規 work の default は gemini-3.1-flash-image-preview にし、premium output が必要なときだけ gemini-3-pro-image-preview に上げ、gemini-2.5-flash-image は legacy branch として扱う。この route-first な考え方が、あとからの作り直しを最小化します。