React2Static
ブログに戻る

デプロイ前に Google AI Studio アプリをローカルで動かす方法

React2Static Team
公開日 2026-07-28
6 分で読めます
Google AI StudioRun LocallyViteReactlocalhostAI Coding

Google AI Studio からアプリをエクスポートしたら、画面が真っ白になることがあります。index.html を直接開いても動かない理由と、ローカルで動かす2つの方法(インストール不要な方法も)を解説します。

結論から言うと

AI Studio からアプリをエクスポートし、zip を解凍して index.html をダブルクリックしたら、真っ白な画面になった——これは想定内の動作です。AI Studio のアプリは Vite プロジェクトなので、ブラウザで動かす前にビルドするかサーバーで配信する必要があります。ローカルで確認する方法は2つあります。インストール不要でブラウザ上でビルド・プレビューする方法と、Node.js で開発サーバーを起動する方法です。それぞれ以下で説明します。

index.html をダブルクリックすると真っ白になる理由

AI Studio が生成する index.html はテンプレートです。TypeScript + JSX で書かれたエントリーファイル(/src/index.tsx のようなもの)を読み込もうとしますが、ブラウザは TypeScript や JSX をそのまま実行できません。ファイルをディスクから直接開く——つまり file:// の URL で開く——と、これらのソースをコンパイルする仕組みが何も動かないため、画面には何も表示されず、コンソールにはモジュール関連のエラーが並びます。何かが壊れているわけではなく、単にプロジェクトがまだビルドされていないだけです。

方法1: ブラウザでプレビューする(インストール不要)

Node.js が入っていない、またはターミナルを触りたくない場合は、React2Static がブラウザ内でプロジェクトをビルドし、その結果をプレビューできます。

  • react2static.com を開く
  • プロジェクトの ZIP をページにドラッグ&ドロップする
  • ビルドが終わるのを待ち、プレビューを開く

    • ビルドは WebContainers を使ってローカルで実行されるため、コードが外部に送信されることはありません。これはデプロイ時に使うのと同じ成果物なので、プレビューで動けばホスティング先でも動きます。

    方法2: Node.js で動かす

    Node 18 以降がインストールされていれば、解凍したプロジェクトフォルダでターミナルを開き、次を実行します。

    npm install
npm run dev

    Vite がローカル URL(大抵は http://localhost:5173)を表示します。これを開くとアプリがホットリロード付きで動き、編集内容がすぐに反映されます。コードを編集しながら開発するなら、この方法がおすすめです。

    npm run dev でスクリプトが見つからないと表示される場合は、package.json を開いて "scripts" の項目を確認してください。エクスポートによっては start や preview という名前になっていることがあります。

    Gemini API キーを渡す

    多くの AI Studio アプリは Gemini API を呼び出すため、ローカル実行時には環境変数からキーを読み込みます。プロジェクト内に .env.example ファイルがないか探すか、コード内で期待されている変数名を検索してください。よくあるのは GEMINI_API_KEY のような名前です(Vite はブラウザに公開する変数に VITE_ という接頭辞を付ける必要がある点に注意してください)。プロジェクトのルートに .env.local ファイルを作り、その変数を書きます。

    GEMINI_API_KEY=your_key_here

    追加したら開発サーバーを再起動してください。このファイルはバージョン管理に含めず、キーはローカル専用として扱ってください。フロントエンドのコードに置いたキーは、デプロイした瞬間に誰でも読めるようになってしまいます。この点はデプロイガイド側で詳しく扱います。

    それでも真っ白なまま？チェックすべきポイント

  • モジュールやインポート関連のコンソールエラー — index.html をディスクから直接開いています。開発サーバー(またはブラウザプレビュー)が表示する localhost の URL を使ってください。
  • npm install が失敗する — おそらく Node のバージョンが古いです。node --version で確認してください。Vite は 18 以上を必要とします。
  • エラーはないのに真っ白 — アプリがまだ設定されていない API キーを待っている可能性があります。
  • ローカルでは動くのにデプロイすると壊れる — それは別の問題です。Google AI Studio アプリがデプロイ後に真っ白になる理由 を参照してください。

    • ローカルで動いたら、次はどうデプロイすればいいですか？

    静的ファイルとしてビルドし、無料のホスティングにアップロードするだけです——サーバーは不要です。手順の全体は Google AI Studio アプリを無料でデプロイする(Cloud Run 不要) にまとめています。

    FAQ

    Google AI Studio のアプリをパソコンで動かすにはどうすればいいですか？

    React2Static でブラウザ内でビルド・プレビューする(インストール不要)か、Node.js 18 以上を入れた上でプロジェクトフォルダで npm install と npm run dev を実行し、表示された localhost の URL を開いてください。

    なぜ index.html を開くと真っ白な画面になるのですか？

    プロジェクトが TypeScript と JSX で書かれた Vite アプリで、ブラウザがファイルから直接実行できないためです。ビルドツールか開発サーバーで先にコンパイルする必要があります。

    AI Studio アプリを動かすのに Node.js のインストールは必要ですか？

    いいえ。何もインストールしたくない場合は、React2Static がブラウザだけでアプリをビルド・プレビューします。Node.js が必要になるのは、ホットリロード付きのローカル開発サーバーを使いたいときだけです。

    ローカルで実行するとき、Gemini API キーはどこに置けばいいですか？

    プロジェクトルートの .env.local ファイルに、コードが期待する変数名(多くの場合 GEMINI_API_KEY)で書きます。追加したら開発サーバーを再起動し、このファイルは絶対にコミットしないでください。

    ブログに戻る