Google AI Studio アプリデプロイ完全ガイド：コードのエクスポート＋低価格API連携実践チュートリアル

著者注：Google AI Studio の Build モードを使用したアプリデプロイの全工程を詳しく解説します。コードをローカル IDE にエクスポートし、APIYI などの低価格な中継 API を導入することで、開発コストを大幅に削減する方法を紹介します。

Google AI Studio でのアプリデプロイは、多くの開発者が関心を寄せるテーマです。AI Studio の Build モードを使えば、自然言語で React/Angular アプリを素早く作成できますが、公式 API の価格の高さがネックになります。コストをいかに抑えるかが鍵となります。

核心的な価値: 本記事を読み終える頃には、AI Studio アプリの完全なデプロイフローをマスターし、コードをローカル IDE にエクスポートして低価格な API 中継サイトと連携させる方法を習得できます。これにより、開発コストを 50%〜80% 削減することが可能です。

AI Studio デプロイの主要なポイント

なぜコードをエクスポートして中継 API に接続するのか？

Google AI Studio でのオンライン開発は非常に便利ですが、大きな課題があります。それは、公式の定価 API を使用していることです。

Gemini API 公式価格（2026年1月時点）:

大量の API コールを必要とするアプリの場合、コストは急速に膨らみます。しかし、API 中継サイト（APIYI apiyi.com や wentuo.ai など）を利用することで、よりお得な価格で利用できます。

問題は: AI Studio のオンラインエディタでは API のリクエスト先を直接変更できないことです。解決策は、コードをローカル IDE（Cursor や VS Code など）にエクスポートし、設定を変更してからデプロイすることです。

AI Studio アプリのデプロイ ステップ1：Build モードでアプリを作成する

Build モードに入る

1. aistudio.google.com にアクセスします
2. 左側のナビゲーションにある「Build」をクリックします
3. 「Create new app」を選択します
4. 作成したいアプリを自然言語で記述します

プロンプト例：

AI翻訳アプリを作成してください。
ユーザーがテキストを入力すると、Gemini APIを呼び出して指定された言語に翻訳します。
中国語、英語、日本語、韓国語の4言語間の相互翻訳をサポートし、
インターフェースはシンプルでモダン、ダークテーマを使用してください。

Build モードの特徴

Build モードは、以下を含む完全なプロジェクト構造を自動生成します：

• geminiService.ts: API 呼び出しロジック
• コンポーネントファイル: UI インターフェースのコード
• 設定ファイル: プロジェクトの依存関係と設定

ヒント: Build モードで生成されたコードは GenAI TypeScript SDK を使用して Gemini API を呼び出します。エクスポート後は、他の API エンドポイントへ簡単に変更できます。

AI Studio アプリのデプロイ ステップ2：ローカルへのコードエクスポート

AI Studio のオンラインエディタでは API リクエストのアドレスを変更できないため、これがコードをエクスポートする必要がある主な理由です。

エクスポート方法1：ZIP ダウンロード

1. Build モードのインターフェースで、右上の「Download」ボタンをクリックします
2. 「Download as ZIP」を選択します
3. ローカルフォルダに解凍します
4. Cursor や VS Code などの IDE でプロジェクトを開きます

エクスポート方法2：GitHub にプッシュ

1. 右上の GitHub アイコンをクリックします
2. 初回利用時は OAuth 認証が必要です
3. 「Create new repository」を選択するか、既存のリポジトリにプッシュします
4. ローカルでリポジトリをクローンして開発を行います

エクスポート方法3：コードスニペットの取得

シンプルなアプリの場合は、API 呼び出しコードを直接取得できます：

1. 「Get code」ボタンをクリックします
2. 言語を選択します：Python / JavaScript / REST API
3. プロジェクトにコードをコピーします

エクスポートしたプロジェクトをローカルで実行する

# ZIPを解凍後、プロジェクトディレクトリに移動
cd your-ai-studio-app

# 依存関係をインストール
npm install

# 開発サーバーを起動
npm run dev

プロジェクトがローカルで起動します。この時点では、まだ元の API キーと公式エンドポイントが使用されます。

AI Studio アプリのデプロイ ステップ3：低価格な API 中継サービスの導入

これはコストを抑えるための重要なステップです。ここでは、API 中継サービス「APIYI (apiyi.com)」を例に説明します。

API 呼び出しファイルを見つける

エクスポートされたプロジェクトの中から、geminiService.ts またはそれに類する API 呼び出しファイルを探します。典型的なコード構造は以下の通りです。

// オリジナルコード - 公式 API を使用
import { GoogleGenerativeAI } from "@google/generative-ai";

const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);
const model = genAI.getGenerativeModel({ model: "gemini-2.0-flash" });

中継サービス API への変更

APIYI などの API 中継サービスは通常 OpenAI フォーマットと互換性があります。以下のように修正します。

// 修正後 - APIYI 中継サービスを使用
import OpenAI from "openai";

const client = new OpenAI({
    apiKey: "your-apiyi-key",  // APIYI の API キーに置き換えてください
    baseURL: "https://vip.apiyi.com/v1"  // APIYI のエンドポイント
});

async function generateContent(prompt: string) {
    const response = await client.chat.completions.create({
        model: "gemini-2.0-flash",  // モデル名はそのまま
        messages: [{ role: "user", content: prompt }]
    });
    return response.choices[0].message.content;
}

// geminiService.ts - 修正後の完全版
import OpenAI from "openai";

// APIYI 中継サービスの設定
const client = new OpenAI({
    apiKey: process.env.APIYI_KEY || "your-apiyi-key",
    baseURL: "https://vip.apiyi.com/v1"
});

// 翻訳機能の例
export async function translateText(
    text: string,
    targetLang: string
): Promise<string> {
    const systemPrompt = `あなたは専門の翻訳家です。テキストを${targetLang}に翻訳し、翻訳結果のみを返してください。`;

    const response = await client.chat.completions.create({
        model: "gemini-2.0-flash",
        messages: [
            { role: "system", content: systemPrompt },
            { role: "user", content: text }
        ],
        max_tokens: 2000
    });

    return response.choices[0].message.content || "";
}

// 汎用チャット機能
export async function chat(
    messages: { role: string; content: string }[]
): Promise<string> {
    const response = await client.chat.completions.create({
        model: "gemini-2.0-flash",
        messages: messages as any,
        max_tokens: 4000
    });

    return response.choices[0].message.content || "";
}

環境変数の設定

API キーを保存するための .env ファイルを作成します。

# .env ファイル
APIYI_KEY=your-apiyi-api-key

セキュリティ上の注意: API キーをコード内に直接書き込んだり（ハードコーディング）、公開リポジトリにコミットしたりしないでください。機密情報の管理には必ず環境変数を使用してください。

AI Studio アプリデプロイ API 中継サービス比較

なぜ API 中継サービスを選ぶのか？

1. コストメリット: 同じ利用量で、コストを 50%-80% 削減できます。
2. インターフェースの統一: OpenAI フォーマット互換のため、コードを書き換えずにモデルの切り替えが可能です。
3. 安定したアクセス: 特別なネットワーク設定（プロキシ等）なしで直接接続が可能です。
4. 複数モデルへの対応: 1つの API キーで Gemini、GPT、Claude など多様なモデルを呼び出し可能です。

おすすめ: APIYI (apiyi.com) で登録して API キーを取得してください。プラットフォームでは無料テスト枠が提供されており、Gemini 全シリーズのモデルに対応しています。

AI Studio アプリのデプロイ ステップ4：デプロイと公開

コードの修正が完了したら、いくつかのデプロイ方法から選択できます。

方法1：Vercel へのデプロイ（推奨）

# Vercel CLI のインストール
npm install -g vercel

# ログインしてデプロイ
vercel login
vercel

Vercel コンソールで環境変数 APIYI_KEY を設定してください。

方法2：Cloud Run へのデプロイ

AI Studio は Google Cloud Run へのワンクリックデプロイに対応しています。

1. 右上の「Deploy」ボタンをクリック
2. Google Cloud プロジェクトを選択
3. 環境変数を設定
4. デプロイを確定

注意: Cloud Run へのデプロイでは引き続き AI Studio の API キーが使用されます。APIYI などの中継 API を使用する場合は、まずコードをエクスポートして修正してから、手動でデプロイすることをお勧めします。

方法3：自社サーバーへのデプロイ

# プロダクションビルドの作成
npm run build

# PM2 などのツールを使用して実行
pm2 start npm --name "ai-app" -- start

AI Studio アプリデプロイに関するよくある質問（FAQ）

AI Studio アプリデプロイの完全ワークフローまとめ

まとめ

Google AI Studio でアプリをデプロイする際の主要なポイントは以下の通りです：

1. Buildモード: 自然言語を使用して、ReactやAngularアプリを素早く構築できます。
2. コードの書き出し: ZIPダウンロードやGitHub連携により、スムーズにローカル開発環境へ移行できます。
3. APIの差し替え: baseURLとAPIキーを修正することで、中継サーバーへの接続が可能です。
4. コスト最適化: APIYIなどの中継サーバーを活用することで、コストを50%〜80%削減できます。

AI Studioは非常に強力なオンライン開発プラットフォームです。コードの書き出し機能とAPI中継サーバーを組み合わせることで、「迅速なプロトタイピング ＋ 低コストなデプロイ」という理想的な運用を実現できます。

Gemini APIを利用する際は、APIYI (apiyi.com) 経由でのアクセスがおすすめです。このプラットフォームでは、無料のテストクレジット、OpenAI互換のインターフェース、そして複数モデルの統合呼び出し機能が提供されています。

📚 参考資料

1. Google AI Studio Buildモード ドキュメント: 公式Buildモード使用ガイド

   • リンク: ai.google.dev/gemini-api/docs/aistudio-build-mode
   • 説明: Buildモードの機能とコードのエクスポートについて詳細に解説

2. Gemini API 料金ページ: 公式API価格情報

   • リンク: ai.google.dev/gemini-api/docs/pricing
   • 説明: 各モデルの最新の価格設定と無料枠について

3. AI StudioからCloud Runへのデプロイ チュートリアル: Google公式Codelab

   • リンク: codelabs.developers.google.com/deploy-from-aistudio-to-run
   • 説明: Google Cloudへのワンクリックデプロイの完全なフロー

4. AI Studioプロジェクトをローカルで実行するためのガイド: コミュニティチュートリアル

   • リンク: medium.com/lets-code-future/how-to-run-your-google-ai-studio-project-locally
   • 説明: コードをエクスポートした後のローカル開発の詳細な手順

著者: 技術チーム
技術交流: コメント欄での議論を歓迎します。さらなる資料については、APIYI apiyi.com 技術コミュニティをご覧ください。