見出し画像

【Google AI Studio】AIアプリ公開術・完全改訂版―6つのルート（デプロイなど）とAIアプリの注意点

ROROSUKE LABO

毎度、rorosukeです。

以前、Google AI Studioで作ったアプリをWebに公開する方法についての記事を書きました。

あの記事を書いてから、状況が大きく変わった部分が3つあります。

  • AI StudioのUI（ユーザーインターフェイス）が2026年2月末に大幅刷新された

  • Gemini APIに予算制限機能が追加され、課金リスクをコントロールできるようになった

  • Claude・ChatGPTで作ったアプリの公開ニーズが増加中

旧記事は2026年1月に書いたものなので、スクショのUIがすでに古くなってしまっています。そこで今回は、最新のUIに合わせて全面的に書き直すことにしました。つまり、完全改訂版となります。

今回は大きく2部構成です。

  • 前半：「6つの公開手段の手順」。AIアプリかどうかを問わず共通の話です。

  • 後半：「AIアプリの場合の考え方」。APIキーという厄介な問題を、手段ごとに整理します。

先に結論を書くと、私のおすすめは次の通りです。

  • 非AIアプリを手軽に公開したい → Netlify Drop

  • AI Studio製アプリを身内に共有したい → Share

  • AI Studio製アプリをすぐ一般公開したい → Publish（予算制限必須）

  • 本格的に公開したい → GitHub＋Vercel / Netlify

  • APIキーが絡むAIアプリを単体HTMLで公開する → 原則おすすめしない


📝 前半：アプリを公開する6つのルート

次の6つのルートについて、紹介および基本手順をまとめます。

  1. Share（シェア） ―― 最も手軽な共有方法

  2. Publish（パブリッシュ） ―― 旧ロケットボタン。AI Studio限定の1クリック公開

  3. GitHub＋Vercel ―― 正攻法のデプロイ

  4. GitHub＋Netlify ―― 正攻法のデプロイ

  5. Netlify Drop（GitHubなしで公開） ―― 単体HTMLを手軽にデプロイ

  6. 自前サーバー ―― 単体HTMLをFTPでアップロード

これらは、アプリ公開において基本無料で行えます。ただし、AIアプリなどの場合には、自動的に利用量が請求されることがあります。これについては「後半」で詳しく説明します。


✅ 1. Share（シェア）

Google AI Studioで最も手軽な公開方法です。Google AI Studioの「プレビュー画面」をURLで共有します。

  • メリット： 設定がほぼゼロ。手順が非常にシンプル。

  • デメリット： 見た目がAI Studioの画面のまま。利用者はGoogleアカウントでのログインが必要。

  • 安全性：◎（非常に安全です）

📌公開までの手順

手順1：「Share」アイコンをクリック
画面右上の「Share」アイコンをクリックします。

Shareボタン

手順2：「General access」を選択する
不特定多数のユーザーに公開したいときには、General accessで「Public: Anyone with the link can view」を選択します。

一部の人だけに公開したいときには、「Restricted: Only people you specify can access」が選択されている状態で、「people and groups with access」に、公開したい人のGmailアドレスを入力します。

手順3：URLをコピーしてSNSやメールで共有
一番下の「Copy link」ボタンを押すと、URLがクリップボードにコピーされます。これを、シェアしたい人に伝えます。

受け取った側は、リンクを開くと「This app is from another developer」（このアプリは別の開発者によるものです）という警告ダイアログが表示されるので、「Continue to the app」をクリックするとアプリが起動します。

Continue to the appをクリック

公開時のオプション設定

「Settings」で、公開時のオプション指定ができます。

Default to fullscreen
オン（右にスライド）にすると、フルスクリーンモードで起動するようになります。これで右側のチャットが隠れてくれます。設定した後で、リンクをコピーし直してください。URLに次のオプションが追加されます。

?fullscreenApplet=true

フルスクリーンモードで起動しても、画面右上のフルスクリーンモード切替ボタンを押すことでフルスクリーンモードを解除できます。

フルスクリーンモード切替ボタン

include your Gemini chat history
オン（右にスライド）にすると、チャット履歴を含めて公開されます。開発過程の情報などを共有したいときに設定してください。

アプリの修正と公開の中止

アプリを修正した場合には、特に何も行う必要はありません。作ったリンクからアクセスすれば、自動的に最新バージョンが起動します。

アプリの公開を中止したいときには、「Restricted: Only people you specify can access」を選択します。これで一部の人にだけの公開になります。デフォルトでは、オーナーであるあなただけが登録されているので、あなた以外には非公開となります。


✅ 2. Publish（パブリッシュ） 

Google AI Studio限定の、一般公開できる便利な機能です。以前はロケット（アプリをデプロイ）マークのボタンだったものです。当時は、利用料金が無限に膨らむ危険性から、要注意機能として紹介していました。現在は予算制限の設定が行いやすくなったので、おすすめ機能に昇格しました。詳しい解説は「後半」で行いますので、まずは手順だけ紹介します。

  • メリット： Google AI Studio標準のデプロイ方法。AI機能を用いたアプリであっても、ある程度の安全を担保されたうえで公開できる

  • デメリット： AIを使うアプリの場合、AI利用料は開発者（あなた）の負担になるため、事前に予算制限の設定が必須。

  • 安全性：△（支払いが発生する可能性がある状態での利用になりますが、予算制限を設定することで安全は担保されます）

⚠️ 前提：予算制限を設定してから使う

くれぐれも、AIを使用するアプリで、このルートを行う場合には必ず予算制限の設定を行ってください。設定なしで公開すると利用料が無尽蔵に膨らむ危険があります。
AIを使わないアプリの場合には、利用料が使われることはないはずですので、安全性は◎です。あくまでも人為的ミスへの対応のため、予算制限の設定はしておきましょう。

予算制限の設定方法は、別記事で解説しています。

📌公開までの手順

手順1：Publishアイコンをクリック
画面右上の「Publish」アイコンをクリックします。

Publishボタン

手順2：「Get started」をクリック
「What does publishing look like?」（公開するとどう見えるのか？）という画面が表示されます。「Get started」ボタンをクリックします。これでGoogle Cloudのインフラが自動的に構築されます。

「Get started」ボタンをクリックする

手順3：Step 1を行う
「Publish your app」ダイアログが表示され「Step 1 Confirm project and billing」（プロジェクトと請求内容を確認する）と表示されます。
ここで請求に用いるプロジェクトを選択します。無料枠の「Gemini Project（No billing setup）」では公開できませんので、必ず有料枠のプロジェクトを選択してください。

最後に、「Continue」をクリックします。

「Continue」をクリックする

手順4：Step 2を行う
「Step 2 Final touches」（最後の仕上げ）と表示されます。「Publish your app」を押します。

「Publish your app」をクリックする。

手順5：Publishingが行われる
公開のための構築処理がスタートしますので、しばらく待ちます。

Publishingが開始する

構築処理が終了すると次の画面になり、公開URL（App URL）が発行されます。

発行された公開URLをLINEやメール、noteなどに貼り付けて共有します。受け取った側は、リンクを開くとアプリが利用できます。

アプリの修正と公開の中止

アプリのコード修正を行った場合には、「Republish」ボタンをクリックしてアプリを再構築してください。
公開を中止するときには「Unpublish app」をクリックしてください。
利用状況表示ページを表示したいときには「Advanced settings」をクリックしてください。


✅ 3. GitHub＋Vercel

現在のWeb開発における正攻法です。GitHubにコードを保存し、Vercelと連携して公開します。

  • メリット： コードを修正してGitHubに保存するだけで自動的にWebも更新される。「環境変数」という機能でAPIキーをコードから切り離して管理できる。

  • デメリット： GitHubとVercelの初期設定に多少の手間がかかる。

  • 安全性：○（API設定をしなければ通常支払いは起きません）

📌公開までの手順

手順1：コードをGitHubに保存する
「GitHub」アイコンをクリックします。

GitHubに保存アイコンの場所（新UI）

｢Sync to GitHub」画面が表示されます。

｢Sync to GitHub」画面

「New repository name」にリポジトリ名を、「New repository description」に説明を入力します。「Visibility」（可視性）として「Private」「Public」を選択します。「Private」は自分や招待した人だけが見られる非公開リポジトリ、「Public」は誰でも見られる公開リポジトリです。

「Create Git repository」ボタンがアクティブになるので、クリックします。

「Create Git repository」ボタンがアクティブになる

｢Syncing your changes」（変更内容を同期しています）と表示されますので、しばらく待ちます。

同期処理中画面

GitHubとの同期が完了して次のような画面になります。

GitHubとの同期が完了した表示

GitHubにログインすると、作成されたリポジトリの確認ができます。

参考：Claude・ChatGPT等で作ったアプリの場合は、GitHubのWebサイト（github.com）にログインし、「New repository」から新しいリポジトリを作成して、index.htmlをドラッグ＆ドロップでアップロードします。

手順2：VercelでGitHubリポジトリをインポートする
Vercel（vercel.com）にログインし、「Add New…」→「Project」を選択します。

「Import Git Repository」の一覧に先ほど作ったリポジトリが表示されるので、「Import」をクリックします。

「Import」をクリック

手順3：「Deploy」を押して完了
「New Project」画面が表示されます。

「New Project」画面

「Deploy」ボタンを押すと、しばらくしてデプロイが完了し、公開URLが発行されます。「Continue to Dashboard」からダッシュボードに進み、「Domains」欄のリンクがあなたのアプリのURLです。

「Domains」の下のリンクをクリックすると公開されたWebアプリが表示されます。

参考1：環境変数を設定する（AIアプリの場合のみ）
AIアプリを公開する場合は、「Deploy」ボタンを押す前にここで立ち止まります。AIアプリでない場合は、この手順はスキップしてかまいません。

設定画面の中に「Environment Variables（環境変数）」という項目があります。ここを開いてください。

APIキーを登録します。

  • Key（名前）： コードの中で指定した変数名（例：`GEMINI_API_KEY`）

  • Value（値）： 実際のAPIキー（`AIzaSy...`から始まる文字列）

「Add More」を押して保存します。

参考2：プロジェクトを削除するには
デプロイを止めたいときにはプロジェクトを削除します。プロジェクトの「Settings」画面を表示します。

一番下にある「Delete Project」で「Delete Project」ボタンを押すと、プロジェクトが削除され、デプロイされなくなります。

確認画面が表示されるので、指示通りに2か所打ち込んで「Delete Project」ボタンを押すと削除されます。

「Delete Project」ボタンを押すと削除される


✅ 4. GitHub＋Netlify

VercelとほぼGitHub連携の流れは同じです。選択肢として知っておくと、Vercelでうまくいかないときの「もう一手」になります。

  • メリット： コードを修正してGitHubに保存するだけで自動的にWebも更新される。「環境変数」という機能でAPIキーをコードから切り離して管理できる。

  • デメリット： GitHubとNetlifyの初期設定に多少の手間がかかる。

  • 安全性：○（API設定をしなければ通常支払いは起きません）

📌公開までの手順

手順1：「Add new project」をクリック
Netlify（netlify.com）にログインし、左メニューの「Project」を押して「Add new project」を選択します。

手順2：「GitHub」を選択
連携するサービスの一覧から「GitHub」を選びます。

「GitHub」を選択します。

手順3：リポジトリを選んで「Deploy」
一覧からデプロイしたいプロジェクトを選択します。

デプロイしたいプロジェクトを選ぶ

Project nameを入力（任意）して「Deploy」ボタンをクリックします。

Project nameを入力すると、それがURLの一部になります。
「Deploy」ボタン

手順4：公開URLを確認
「Published」と表示されれば完了です（サムネイルが表示されない場合はリロードしてください）。緑文字のURLをクリックするとデプロイされたアプリが開きます。

「Published」と表示されたらリンクをクリック

参考1：環境変数の設定（AIアプリの場合のみ）
VercelのEnvironment Variablesと同様に、NetlifyにもAPIキーを隠すための「環境変数」設定機能があります。AIアプリを公開する場合は、必ずこちらも設定してください。
左メニューの「Project configuration」を選択し、「Environment variables」→「Add a variables」→「Add a single variables」を選択します。

「Add a single variables」を選択

Key欄に変数名、Value欄にAPIキーを入力します

APIキー設定

参考2：プロジェクトを削除するには
デプロイを止めたいときにはプロジェクトを無効（Disable）にするか削除（Delete）します。プロジェクトの「Setting」画面を表示します。
左メニューの「Project configuration」を選択すると、ページの一番下に次の画面が表示されます。プロジェクトを無効にしたいなら「Disable project」をクリックしてください。その場で「Enable project」になるので、再度有効化したければもう一度クリックします。

プロジェクトを削除したいなら「Delete this project」をクリックしてください。次のダイアログが表示されたら、プロジェクト名を入力して「Delete」ボタンを押すと削除されます。

削除用ダイアログ


✅ 5.Netlify Drop（GitHubなしで公開）

GitHubを使わずに単体HTMLを公開したい場合は、「Netlify Drop」が使えます。

  • メリット: GitHubを経由せず、ドラッグ&ドロップでHTMLを直接アップロードできるので、極めて簡単。

  • デメリット: 単体HTML(またはHTML+CSS+JSの小規模構成)が対象で、ビルドが必要な大規模プロジェクトには向きません。

  • 安全性:◎(支払いが起きる可能性は通常はありません)

📌公開までの手順

手順1：Netlifyにログインする
事前にNetlifyにログインしておきます。ログインした状態でドロップすると、そのまま自分のアカウント内にプロジェクトが作られます。
ログインしていない場合は一時URLが発行され、後からアカウントを作って引き取る(claim)形になります。

手順2：Netlify Dropにアクセスする
ブラウザで app.netlify.com/drop にアクセスします。

手順3：ファイルをドラッグ&ドロップする
index.html単体ファイルをそのまま、画面中央の点線枠にドラッグ&ドロップする
※CSS/JSなど複数ファイルがある場合は、それらを1つのフォルダにまとめてドロップするか、ZIPファイルにしてドロップします。

手順4：公開URLを確認する
「Published」と表示されれば完了です（サムネイルが表示されない場合はリロードしてください）。緑文字のURLをクリックするとデプロイされたアプリが開きます。

「Published」と表示されたらリンクをクリック

※スクショ:Netlify Dropのドラッグ&ドロップ画面

⚠️ ファイルが1つだけならフォルダ化は不要ですが、複数ファイルを同時にドロップすると別々のサイトとして扱われることがあるため、2つ以上のファイルがある場合は必ず「フォルダごと」投げるのが安全です。また、長期的に安定して公開したい場合は、Netlify DropよりもGitHub連携版のほうが管理しやすいです。

⚠️プロジェクトの削除については「4. GitHub＋Netlify」の「参考2：プロジェクトを削除するには」をご覧ください。


✅ 6. 自前サーバー（FTP）

自分のレンタルサーバーにindex.htmlをアップロードする、昔ながらの方法です。

  • メリット： 独自ドメインで運営できる。サーバーを持っている方にとっては追加コストがゼロ。

  • デメリット： レンタルサーバーとFTPツールの準備が必要。APIキーの扱いが難しい（後述）。

  • 安全性：◎（支払いが起きる可能性は通常はありません）

📌公開までの手順

手順1：単体HTMLを作る

Claude（Artifacts）やChatGPTで作ったアプリは、プレビューで動いている時点でほぼ単体HTMLとして生成されますので、そのままWebブラウザで表示すればローカル環境で実行できます。また、サーバーにアップロードして公開することもできます。

一方、AI Studioで作ったアプリは、複数ファイル構成で出力されることが多く、ローカル環境やサーバー環境での実行ができません。その場合は、次の「プロンプト」を追加で指示して、1枚のHTMLにまとめます。

# 単一ファイル（Single-file HTML）アプリ作成依頼

以下の条件を厳守して、アプリケーションを作成してください。

## 1. 納品形態
- すべてのコード（HTML、CSS、JavaScript/React）を「index.html」という1つのファイルに集約してください。
- 外部の .tsx, .ts, .js, .css ファイルは一切作成せず、削除してください。

## 2. 技術スタックと実行環境
- 自前サーバー（共有レンタルサーバー等）のFTPアップロードで即座に動作する形式にします。
- ライブラリはすべてCDNから読み込んでください：
  - React 18 & ReactDOM 18 (UMD版)
  - Tailwind CSS (Play CDN)
  - Babel Standalone (ブラウザ内コンパイル用)
- TypeScript/JSXコードは <script type="text/babel"> タグ内に直接記述してください。

## 3. アプリケーション構成
- index.html 内に以下の要素を含めてください：
  - <div id="root"></div>（Reactのルート要素）
  - <style> タグ（独自のCSSアニメーション等が必要な場合）
  - <script type="text/babel"> 内に全てのReactコンポーネントとロジック

## 4. 注意事項
- サーバー側でのビルド（npm install や npm run build）は不要な構成にすること。
- ディレクトリ構成に依存せず、index.htmlをブラウザで開くだけで100%動作することを最優先してください。

作成されたら、AI Studioのプレビュー画面の「Code」を選択し、「Export」→「Download as .zip file」ボタンを押すと、ZIPでファイル一式をダウンロードできます。

「ダウンロード」メニューのありか

手順2：ローカルで動作確認する
保存したindex.htmlをダブルクリックして、ブラウザで開いてみます。正しく動作すれば、サーバーにアップロードする準備完了です。

手順3：FTPツールでサーバーにアップロードする
FTPツール（FileZillaなど）を使って、index.htmlをレンタルサーバーの公開ディレクトリにアップロードします。


📝 後半：AIアプリの場合

ここからは、AIを使ったアプリ―つまり「AIに質問する」「AIに変換してもらう」といったタイプのアプリを公開する場合の話です。

非AIアプリ（ゲーム、計算ツール、変換アプリなど、AIと通信しないもの）を公開するだけなら、この後半は読み飛ばしてかまいません。


APIキーという「最大の壁」

AIアプリを公開しようとすると、必ず「APIキーの扱い」という問題にぶつかります。

APIキーとは、いわば「銀行の暗証番号」のようなものです。AIを動かすためのサービスに対して「自分はこのキーを持っています、使わせてください」と証明するためのものです。

これを他人に知られると、あなたのキーを使って勝手にAIが利用され、その料金があなたに請求されるというリスクがあります。

そのため、APIキーをいかに隠すか、あるいはそもそも隠す必要がない構造を選ぶか、が重要な判断軸になります。

もうひとつ、知っておきたい重要な前提があります。

Google AI StudioはAPIキーを入力させる画面を作らせてくれません。

「利用者が自分のキーを入力する仕様にすれば開発者は負担ゼロになるのでは」と思われるかもしれません。しかし、Googleのセキュリティポリシーにより、AI StudioではAPIキー入力欄を持つコードの生成が固く禁じられています。理由は、悪意ある開発者が他人のキーを盗み取るフィッシング目的に悪用できてしまうからです。

一方、ClaudeやChatGPTで作ったアプリであれば、「利用者が自分のAPIキーを入力する」仕様のコードを作ることは可能です。これがAI Studioとの大きな違いです。

手段ごとの整理

それでは、Netlify Dropを除いた主な5つの手段について、APIキーがどう扱われるかを整理します。


✅ 1. Share：開発者負担ゼロ、最も安全

唯一「開発者のAPIキーを使わなくて済むルート」です。

ShareはGoogleアカウントでログインした利用者が、自分の無料枠を使って動かす仕組みになっています。開発者のAPIキーは完全に隠れており、漏れることもありません。

ただし、見た目はあくまでAI Studioの画面のままで、独自のWebサービスとして公開することはできません。

また、旧記事で詳しく解説したとおり、Shareを選ぶ理由には「ブラウザのサンドボックスというルール」も関係しています。外部サイトが別サービスのログイン情報を勝手に使うことは、セキュリティ上許されていないのです。この件は旧記事に詳しいので、気になる方はあわせてご覧ください。


✅ 2. Publish：最速で一般公開するなら有力候補

旧記事では、「Publish」（旧ロケットボタン）を「解説しなかった理由（重大なリスク）」として次の3点を挙げていました。

  • 壁①： 利用料はすべて開発者の負担。クレジットカード登録が必須。

  • 壁②： Google Cloudの予算設定は「アラートを送るだけ」で、課金は止まらない。

  • 壁③： 確実に止めるための「割り当て（Quota）設定」はプロ級に難解。

要するに「青天井で請求が来るかもしれないボタン」として、非エンジニアには勧めづらいと判断しました。

しかし、その後のアップデートで状況が変わりました。

AI Studioの「利用額（Billing）」ページに「1か月の費用の上限」を設定するボタンが追加されたからです。この制限は「約10分間隔でチェックし、上限に達したらAPIを停止する」という実効性のある仕組みです。以前の「アラートを送るだけ」とはまったく別物です。

これにより、壁②と壁③は実質的に消えました。

利用額を「1,000円」に設定しておけば、万が一SNSでバズっても最大で1,000円ほどの負担で済む、という心理的安全性が確保されたことで、「予算を設定すれば最速で公開できる大本命」となりました。

注意：ただし、無料枠のAPIキーは選択できません。必ず有料枠のAPIキーを選ぶ必要があります。

壁①（開発者負担）は今も残っています。しかし上限額が「自分が失っても痛くない金額」に設定できるなら、許容範囲に入ってくる人も多いと言えます。

APIキーの管理については、「Publish」で公開した場合もGoogleのインフラ内で適切に管理されますので、コードにキーを直書きするリスクはありません。

なお、予算制限の詳しい設定手順は別記事にまとめています。「Publish」を使う前に、必ずこちらを参照してください。

まとめると、次のようになります。

AIを使用しないアプリ：「Publish」してまったく問題なし
AIを使用しているアプリ：利用額の制限設定をしておけば、想定外の高額請求リスクはかなり抑えられます。ただし、完全にノーリスクと言い切るのではなく、設定忘れ、反映までのタイムラグ、Gemini API以外の関連コストなどには注意が必要です。その制限設定を忘れてしまった、といったヒューマンエラー的なリスクもあります。心配ならVercelやNetlifyを使うことにすれば、あえてAPIキーを設定しない限りは安全。

追記（2026/07/06）：「前払い制」に切り替わったため安全性が高まりました

新たな情報として、Gemini APIの支払いが「前払い制」に移行中であることがわかりました。以前は「後払い制」だったので、突然巨額の請求がくる可能性があったのですが、現在は「前払い制」に切り替わっているので、クレジットした額までしか請求されることはないので、非常に安全性が高まったといえます。

昔から使っている現在「後払い制」になっている方については、「前払い制」に切り替える必要がありますので、ご注意ください。

詳しい内容については、次の記事をご覧ください。



✅ 3. GitHub＋Vercel：不特定多数への公開に最も適した正攻法

一般的なデプロイの王道が「GitHub＋Vercel」や「GitHub＋Netlify」です。この方法では、APIキーを設定してデプロイすることで、AIを使用したアプリが公開できます。

しかも、APIキーが盗まれない仕組みが用意されています。Vercelの場合、その最大の武器が「環境変数」です。

APIキーをコードの中に直接書くのではなく、Vercel側のサーバーにある「金庫」に預ける形にします。Webサイトを訪れた人がソースコードを覗いても、APIキーは見えません。

注意：ここで重要なのは、APIキーを「ブラウザ側のコード」から直接使わないことです。Vercel FunctionsやNetlify Functionsなどのサーバー側処理を経由してAI APIを呼び出す構成にすれば、APIキーを環境変数として安全に管理できます。単体HTMLだけで直接APIを呼ぶ構成では、環境変数を使ってもキーが露出する可能性があります。

これにより、不特定多数の人に公開しても安全に運用できます。料金はすべて開発者の負担になりますが、APIの無料枠の範囲内で収まっているうちは実質ゼロコストです。アクセスが増えて無料枠やレート制限を超えた場合は、サイトそのものではなく、AIへのリクエストが失敗したり、しばらく利用できなくなったりします。その意味で、いきなり高額請求につながりにくいという安心感があります。

独自ドメインを設定したい、長期的に安定して運用したい、デザインを細かく調整したい、という場合はこのルートが向いています。

注目：Googleの無料枠APIキーを設定することはできます。無料枠のリソースはそれほど多くはないとはいえ、これもメリットのひとつです。


✅ 4. GitHub＋Netlify：Vercelが合わなければこちら

環境変数の仕組みはVercelとほぼ同じです。APIキーをNetlify側の「環境変数」に登録することで、安全に公開できます。

GitHubを使わないNetlify Dropの場合は、コードがそのままアップロードされますので、APIキーが直書きされていれば丸見えになります。Netlify Dropは非AIアプリか、身内限定の公開に使うもの、と考えてください。


✅ 5. 自前サーバー：AIアプリの公開には高い壁

自前サーバーに単体HTMLを置く方法は、非AIアプリであれば問題ありません。

しかしAIアプリの場合、HTMLにAPIキーを直書きすると、ブラウザの「ページのソースを表示」から誰でもキーを確認できてしまいます。

回避策として「利用者が自分のキーを入力する仕様にする」という方法がありますが、前述の通りAI StudioではそのようなコードをAIに作らせることができません。

ただし、Claude・ChatGPT製のアプリであればそれは可能です。その場合は利用者全員が、自身で使えるAPIキーを用意する必要があります。その意味では、一般公開にはあまり向いていません。

ただし、自前サーバーでもサーバー側のPHPやNode.jsなどを用意してAPIを中継する構成にすれば、Googleの無料枠APIキーを使うことは可能です。単体HTMLに直書きする形は避けてください。


📝 結局どの方法がいいの？

AIアプリ公開に関係する主な手段を、「誰が料金を負担するか」「APIキーは安全か」「どんな用途に向くか」で整理します。

$$
\begin{array}{llll}
\\[-1.15em]\hline
\textsf{\small{公開手段}} & \textsf{\small{料金負担}} & \textsf{\small{APIキーの安全性}} & \textsf{\small{向いている用途}}
\\ \hline
\textsf{\small{Share}} & \textsf{\small{利用者}} & \textsf{\small{◎ 完全に隠れる}} & \textsf{\small{身内・コミュニティへの手軽な共有}}
\\ \hline
\textsf{\small{Publish}} & \textsf{\small{開発者（上限設定で制御可）}} & \textsf{\small{○ Googleインフラで管理}} & \textsf{\small{最速でテスト公開したいとき}}
\\ \hline
\textsf{\small{GitHub＋Vercel}} & \textsf{\small{開発者（無料枠内はゼロ）}} & \textsf{\small{◎ サーバー側処理＋環境変数で隠せる}} & \textsf{\small{不特定多数への本格公開}}
\\ \hline
\textsf{\small{GitHub＋Netlify}} & \textsf{\small{開発者（無料枠内はゼロ）}} & \textsf{\small{◎ サーバー側処理＋環境変数で隠せる}} & \textsf{\small{同上。Vercelが合わない場合の選択肢}}
\\ \hline
\textsf{\small{自前サーバー}} & \textsf{\small{開発者or利用者}} & \textsf{\small{△ 直書きだと丸見え}} & \textsf{\small{非AIアプリ、または身内限定}}
\\ \hline
\end{array}
$$

AIアプリを公開する場合の選び方をまとめると、こうなります。

  • 「AI Studioで作った。とにかく最速で誰かに使ってもらいたい」 → Publish（予算制限の設定を忘れずに）

  • 「特定のコミュニティや身内だけで使ってもらえればいい」 → Share

  • 「不特定多数に公開したい。APIキーを絶対に漏らしたくない」 → GitHub＋Vercel、またはNetlify

非AIアプリの場合は、Netlify Dropが最も手軽です。フォルダをドラッグ＆ドロップするだけでURLが発行されるので、「とりあえず友達に使ってもらいたい」というときに重宝します。


✅ まとめ：デプロイは悩みの種

まぎれもなく、現在のGoogle AI Studioは「Share」または「Publish」を標準的な公開手段として推しているように見えます。実際、画面上でもこの2つが前面に出ており、AI Studio内で作ったアプリを共有するだけなら、このどちらかを選ぶのが自然です。

以前に比べると、Publishまわりの課金リスクもかなりコントロールしやすくなりました。予算制限を正しく設定しておけば、想定外の高額請求リスクは大きく下げられます。

とはいえ、すべての人がエンジニアではありません。設定を忘れたり、テスト用に切り替えた設定を元に戻し忘れたりすることは十分にありえます。また、画像生成や動画生成など、AIアプリの種類によっては1回あたりのコストが大きくなる場合もあります。

その意味では、まずは「Share」で共有するのが最も安全です。APIを使わないアプリならNetlify DropやNetlify連携で公開し、APIキーが必要なAIアプリは、仕組みを理解するまでは無理に一般公開しない。これが、非エンジニアにとって一番リスクの少ない考え方だと思います。

以上！


関連記事

本記事の関連記事をまとめます。

旧記事

上記を補完するNetlify紹介記事

課金に関する記事

#時産時利 #AI活用 #時短術 #GoogleAIStudio #Claude #生成AI #AIアプリ公開 #デプロイ #vercel #Netlify #APIキー #個人開発 #バイブコーディング


いいなと思ったら応援しよう！

ROROSUKE LABO 記事なり、プログラムなりが役に立ったと思った方は、 チップの応援よろしくお願いいたします。 次の開発もがんばろうかな、という気になりますのだ （笑）