GeminiでつくるGemini連携アプリの構造
（CanvasとAdd Gemini features）

by

関連記事

1. Geminiで「AIアプリ」を作れる（Add Gemini features）

Geminiはチャットで質問に答えるだけでなく、Canvasという作業領域でホームページやアプリといった成果物を作ることもできます。

1. Geminiで「AIアプリ」を作れる（Add Gemini features）

さらに面白いのは、そのアプリにGeminiと連携した生成AI機能をかんたんに追加できる点です。
これが「Add Gemini features」という機能で、AI連携のコードをアプリに組み込んで、柔軟な動作をするアプリを作ることができます。
公式ヘルプでは「テキスト生成や画像生成などのGemini搭載機能をアプリに追加できる」と説明されています。

ただ、Geminiの「AIアプリ」の仕組みは少し入り組んでいます。
Geminiチャット、Canvas、Canvasアプリ、そしてその中で動くGemini APIという3つのレイヤーが重なっていて、「外側のGemini」と「内側のGemini」で役割が違うからです。

1.1. 3層の入れ子になっている

Gemini Canvasでアプリを作ると、次のような入れ子構造になり、それぞれ役割が違います1。

Geminiチャット
└── Canvas（作業領域）
    └── Canvasアプリ（WebアプリのUI）
        └── Gemini API呼び出し（アプリの機能として）
            └── Geminiモデル（文章・画像を生成）
1.1. 3層の入れ子になっている
1.1. 3層の入れ子になっている
  • 「Geminiチャット」は、ユーザーが「こういうアプリを作って」と話しかける相手です。
    コードを生成したり修正したりする、開発アシスタントとして動きます。
  • 「Canvas」は、チャット画面の横に開く作業領域です。
    生成されたコードとそのプレビューが置かれ、右上の「Code」ボタンでコードを直接確認・編集できます。
    エラーやログの確認もここで行います。
  • 「Canvasアプリ」は、HTMLやJavaScriptやReactなどで構成された普通のWebアプリです2。
    入力欄、ボタン、表示エリアといったUIを持ちますが、Geminiチャットそのものではなく、Geminiが生成したコードが動いているにすぎません。
  • さらに、Canvasアプリに「Add Gemini features」を使うと、そのアプリのコードにGemini API呼び出しの処理が追加されます3。
  • 「Geminiモデル」は、アプリ操作でのユーザー入力を、API呼び出しを通して受け取り、応答を出力します。

1.2. Gemini呼び出しAPIコード

Gemini呼び出しは、アプリの中に概ね次のようなコードを入れて動かしています。

const result = await model.generateContent(userInput);
const text = result.response.text();
displayAnswer(text);Code language: JavaScript (javascript)

ユーザーがアプリの入力欄に文字を入れてボタンを押すと、このコードがGeminiモデルにリクエストを送り、返ってきたテキストを画面に表示します。
一般的なアプリでは、表示結果は自分の書いたコードによって計算しますが、AI呼び出しの場合はいったんGeminiに肩代わりさせて、その結果を受け取るようになっています。
「Add Gemini features」は、GeminiがこのようなAPI呼び出しコードを自動生成してCanvasアプリに挿入する機能なのです4。

もう少し具体的にコードを見てみると、ユーザーのAPIキーを取得して、`https://generativelanguage.googleapis.com/v1beta/models/gemini-3-flash-preview:generateContent?key=${apiKey}` にアクセスすることで、応答を得ていることがわかります。

1.2. Gemini呼び出しAPIコード
        // API Handler simulation for prototyping standalone
        function getApiKey() { return document.getElementById("userApiKey").value.trim(); }

        async function evaluateHandwrittenKanji() {
            const activeCard = KANJI_DB[currentGrade][currentQuizIndex];
            setMascotState("thinking", `うーん、なるほど...書いてくれた「${activeCard.kanji}」を採点しているよ！`);
            
            const apiKey = getApiKey();
            if(!apiKey) {
                // Mock response fallback for sandbox environment
                setTimeout(() => {
                    displayQuizResult({ score: 95, feedback: "とっても上手に書けているよ！線のバランスもバッチリ。はなまるです！" });
                }, 1500);
                return;
            }

            const dataUrl = canvas.toDataURL("image/jpeg", 0.85);
            const base64Image = dataUrl.split(",")[1];
            const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-3-flash-preview:generateContent?key=${apiKey}`;
            
            const payload = {
                contents: [{ role: "user", parts: [{ text: `お題の漢字「${activeCard.kanji}」を採点してJSON(score, feedback)で返して。` }, { inlineData: { mimeType: "image/jpeg", data: base64Image } }] }],
                generationConfig: { responseMimeType: "application/json" }
            };

            try {
                const res = await fetch(apiUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
                const data = await res.json();
                const parsed = JSON.parse(data.candidates[0].content.parts[0].text);
                displayQuizResult(parsed);
            } catch (e) {
                setMascotState("normal", "通信エラーが起きたみたい。もう一回採点ボタンを押してね。");
            }
        }Code language: JavaScript (javascript)

2. 外側のGeminiと内側のGeminiは別物

アプリを作るGeminiとアプリ内で応答するGeminiは、「同じGemini」ではありますが、役割とコンテキスト、つまり理解している情報が異なります。

外側のGemini（チャット）は、開発者として働いています。
プロンプトを読み、コードを書き、Canvasを更新します。

一方、内側のGemini（APIとして呼ばれる側）は、アプリの一機能として働いています。
エンドユーザーが入力した内容を受け取り、文章や画像を生成して返します。

前者はアプリを作るための会話、後者は作られたアプリの中で起きる会話で、開発環境と実行環境の違いと言えます。

2.1. Canvasは自分用や試作用

GeminiのCanvasは、Webベースのプロトタイピング環境です。

用途適したツール
アイデアの試作・デモGemini Canvas
本番アプリの開発Firebase Studio / AI Studio Build mode

基本的にはアプリやウェブサイトの試作や自分専用のツールを作るのに使います。
そのため、誰もが使える本番運用にそのままできるわけではありません。

共有リンクを発行すると誰でもアクセスできる一方で、APIキー管理や認証の仕組みは自分では制御できません。
基本的には、複数の利用者でプライバシーを分けて使えるものではありません5。

また、Canvasアプリから外部のAPIを呼び出そうとすると「外部APIに接続できない」というエラーが出る場合があり、完全な外部サービス連携は前提としていません6。

2.2. 本格的なアプリを作るなら

たくさんの利用者に公開するアプリを作るなら、Canvasでは、不十分です。

クラウドベースの開発環境である、Firebase StudioやGoogle AI StudioのBuild modeに移行する必要があります7。

たとえば、Firebase Studioでは、JavaScriptやPythonなどのテンプレートからスタートし、自分のGemini APIキーを設定して使います。
ただし、Gemini APIには一定時間内に呼び出せる回数やトークン量の上限としてレート制限があり、その管理も開発者側の責任になります8。
いっきにたくさんの利用者がアクセスし、AI機能を利用すると応答停止したり、大きなコストがかかることがあります。

3. まとめ

Gemini CanvasでAI応答アプリを作ると、Geminiチャット、Canvas、Canvasアプリ、Gemini APIという3層構造になります。

外側のGeminiはコードを書くアシスタント、内側のGeminiはアプリの機能として呼ばれるモデルです。
この区別を押さえておくと、Canvasで作ったものがどこまで動いて、どこから設計が必要になるかが見えてきます。

  1. Canvasは2025年3月にGeminiおよびGemini Advancedのサブスクライバー向けにリリースされました。 – New Gemini features: Canvas and Audio Overview
  2. CanvasではHTML、CSS、JavaScript、Reactのコードを生成してプレビューできます。PythonコードはGoogle Colabにエクスポートして実行できます。 – Streamlining App Development with Gemini’s New Canvas Feature
  3. 「Add Gemini features」の利用には18歳以上であることが必要です。 – Create docs, apps & more with Canvas – Gemini Apps Help
  4. Firebase AI Logic SDKを使う場合、getAI()でバックエンドを初期化し、getGenerativeModel()でモデルを選択してからgenerateContent()を呼び出します。 – Get started with the Gemini API using the Firebase AI Logic SDKs
  5. 公式のプライバシー説明によると、Canvasアプリに入力したデータはアプリ作成者から見える状態になります。また、複数ユーザーでデータを共有する設定にした場合、公開リンクを持つ誰もがそのデータを閲覧・編集できます。入力したデータは自分では削除できず、削除できるのはアプリ作成者のみです。 – Canvas safety & security in Gemini Apps
  6. ユーザーの報告によると、CanvasアプリからサードパーティのAPIを呼び出そうとした際に接続エラーになるケースがあります。 – Gemini Canvas Guide 2025
  7. Firebase StudioはフルスタックのWebアプリや mobile アプリを開発するためのクラウドベースのIDE（統合開発環境）です。一方、Google AI StudioのBuild modeは軽量なWebアプリのプロトタイピングに向いており、Cloud Runへのデプロイが可能です。Googleの公式ブログでは、Firebase Studioはプロ品質のソフトウェア開発に、AI StudioのBuild modeは軽量なWebアプリの試作に適すると説明されています。 – Choose the right Google AI developer tool for your workflow
  8. 2025年12月の変更後、無料ティアのレート制限はモデルによって異なります。たとえばGemini 2.5 Flashは1分あたり10リクエスト・1日250リクエストが上限です。制限はプロジェクト単位で適用され、APIキーごとではありません。 – Gemini API Rate Limits