<h2 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h2>
<p data-line="1" class="code-line">こんにちは、クラウドエースの高牟礼です。<br>
皆さんは「こんな AI アプリがあったら便利なのに…」と、ふとアイデアが浮かんだことはありませんか？</p>
<p data-line="4" class="code-line">最近の AI は非常に賢く、面白い応答を簡単に得られます。ですが、それを自分だけで楽しむのではなく、誰もが使える Web アプリとして形にし、世界に公開するまでには、</p>
<ul data-line="6" class="code-line">
<li data-line="6" class="code-line">API を呼び出すコードを書き、</li>
<li data-line="7" class="code-line">UI（見た目）を作り、</li>
<li data-line="8" class="code-line">サーバー（インフラ）を準備し、</li>
<li data-line="9" class="code-line">公開（デプロイ）する</li>
</ul>
<p data-line="11" class="code-line">といった、意外と多くの手間と時間がかかりますよね。アイデアを思いついても「いざ作るとなると、ちょっと腰が重いな…」と感じるのも無理はありません。</p>
<p data-line="13" class="code-line">しかし、Google が提供する「 AI Studio 」が、アイデアを形にするまでの道のりを驚くほど短くしてくれます！<br>
AI Studio を使えば、ブラウザ上の操作だけで、アイデアを思いついてからわずか数分で、 Web アプリとして公開できます！</p>
<p data-line="16" class="code-line">実際に Google AI Studio を使った AI アプリの作成から、ボタン一つで Cloud Run にデプロイするまでの具体的な手順をお届けします。</p>
<h2 id="google-ai-studio-%E3%81%A8%E3%81%AF%EF%BC%9F" data-line="18" class="code-line">
<a class="header-anchor-link" href="#google-ai-studio-%E3%81%A8%E3%81%AF%EF%BC%9F" aria-hidden="true"></a> Google AI Studio とは？</h2>
<p data-line="19" class="code-line">今回の主役のツールである「 Google AI Studio 」は Google が提供する生成 AI 開発プラットフォームで、Google の最新 AI モデルを、ブラウザ上ですぐに試すことができます。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__8c116f4b3086" src="https://embed.zenn.studio/card#zenn-embedded__8c116f4b3086" data-content="https%3A%2F%2Faistudio.google.com%2Fwelcome" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://aistudio.google.com/welcome" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://aistudio.google.com/welcome</a><br style="display:none">
目的に応じて主に4つの機能が用意されています。</p>
<ul data-line="23" class="code-line">
<li data-line="23" class="code-line">💬 【Chat】　AI と自由に対話できます。</li>
<li data-line="24" class="code-line">🌊 【Stream】　音声や映像を使ってリアルタイムに AI と対話できます。</li>
<li data-line="25" class="code-line">🎨 【Generate Media】　プロンプトから画像などを作ることができます。</li>
<li data-line="26" class="code-line">🛠️ 【Build】　様々なアプリを組み立ててくれます。</li>
</ul>
<p data-line="28" class="code-line">今回、 Web アプリを作るために使うのが、 Build 機能です！</p>
<h2 id="%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B%E6%89%8B%E9%A0%86" data-line="30" class="code-line">
<a class="header-anchor-link" href="#%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B%E6%89%8B%E9%A0%86" aria-hidden="true"></a> アプリを作成する手順</h2>
<p data-line="31" class="code-line">ここからは実際にアプリを作成した手順をご紹介します。</p>
<h3 id="1.-google-cloud-%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90%E3%81%A8%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E7%B4%90%E4%BB%98%E3%81%91" data-line="33" class="code-line">
<a class="header-anchor-link" href="#1.-google-cloud-%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90%E3%81%A8%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E7%B4%90%E4%BB%98%E3%81%91" aria-hidden="true"></a> 1. Google Cloud アカウントの作成とプロジェクトの紐付け</h3>
<p data-line="35" class="code-line">まずは Google Cloud アカウントを作成してください。<br>
下記の公式ドキュメントを参考にしてください。</p>
<p data-line="38" class="code-line"><a href="https://cloud.google.com/docs/get-started?hl=ja" target="_blank" rel="nofollow noopener noreferrer">Google Cloud を使ってみる</a></p>
<p data-line="40" class="code-line"><a href="https://aistudio.google.com" target="_blank" rel="nofollow noopener noreferrer">Google AI Studio</a>にアクセスします。</p>
<p data-line="42" class="code-line">右上の「 Get API Key 」をクリックしてください。</p>
<p data-line="44" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--eS9d8lC5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/54183e8943bfd1a428ab35ff.png%3Fsha%3D674019ff3c0e53b8d333d4b7e9dd38a7888d4d63" loading="lazy" class="md-img"></p>
<p data-line="46" class="code-line">「+ API キーを作成」をクリックし、既存の Google Cloud プロジェクトで API キーを作成してください。</p>
<p data-line="48" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--IM9lX5z1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/d496bcb91236f2f4fef6d452.png%3Fsha%3Dbb442ed115a06024951dc0224a083d8cadaafbb7" loading="lazy" class="md-img"></p>
<p data-line="50" class="code-line">Cloud Run にデプロイする場合、こちらで指定したプロジェクトが適用されます。</p>
<h3 id="2.-google-ai-studio-%E3%81%AE%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%8B%E3%82%89%E3%80%8Cbuild%E3%80%8D%E3%82%92%E9%96%8B%E3%81%8F" data-line="52" class="code-line">
<a class="header-anchor-link" href="#2.-google-ai-studio-%E3%81%AE%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%8B%E3%82%89%E3%80%8Cbuild%E3%80%8D%E3%82%92%E9%96%8B%E3%81%8F" aria-hidden="true"></a> 2. Google AI Studio のメニューから「Build」を開く</h3>
<p data-line="54" class="code-line">AI Studio の左側のメニューから「 Build 」をクリックしてください。</p>
<p data-line="56" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--fZCYL7Uq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/d4ad925ce7d088e5532701a9.png%3Fsha%3Dc31dd436c5b2bd58bcf7b34b23729e1e2b220cd4" loading="lazy" class="md-img"></p>
<p data-line="58" class="code-line">テンプレートも用意されていますが、今回は簡単にアプリが作成できることを説明するために、<br>
中央の入力ボックスに直接指示を書き込んでいきます。</p>
<h3 id="3.-%E3%83%97%E3%83%AD%E3%83%B3%E3%83%97%E3%83%88%E3%82%92%E5%85%A5%E5%8A%9B%E3%81%99%E3%82%8B" data-line="61" class="code-line">
<a class="header-anchor-link" href="#3.-%E3%83%97%E3%83%AD%E3%83%B3%E3%83%97%E3%83%88%E3%82%92%E5%85%A5%E5%8A%9B%E3%81%99%E3%82%8B" aria-hidden="true"></a> 3. プロンプトを入力する</h3>
<p data-line="62" class="code-line">中央の入力ボックスに作りたいアプリのプロンプトを入力します。<br>
どんなプロンプトを書けばいいのか思いつかない時は、Google AI Studio の chat 機能を使ってプロンプト自体を作成してもらう手もあります。<br>
今回は、シンプルで簡単なアプリを作成してもらいました。</p>
<div class="code-block-container"><pre class="language-text"><code class="language-text code-line" data-line="65">ユーザーに、元気が出るポジティブなアドバイスを、日本語で「今日のあなたへ：」から始めて30文字以内で返すアプリを作成してください。
</code></pre></div><p data-line="68" class="code-line">具体的な UI イメージなどがある場合は、➕ボタンからファイルや画像の添付もできます。<br>
プロンプトを作成し終えたら、「 Run prompt 」ボタンをクリックしてください。</p>
<p data-line="71" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--9mcqJWJ_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/a01c52dd6c32696136868e94.png%3Fsha%3D0f4dfe608b6d8322e5754761f59df44938d22658" loading="lazy" class="md-img"></p>
<h3 id="4.-%E3%82%B3%E3%83%BC%E3%83%89%E3%81%8C%E7%94%9F%E6%88%90%E3%81%95%E3%82%8C%E3%82%8B" data-line="73" class="code-line">
<a class="header-anchor-link" href="#4.-%E3%82%B3%E3%83%BC%E3%83%89%E3%81%8C%E7%94%9F%E6%88%90%E3%81%95%E3%82%8C%E3%82%8B" aria-hidden="true"></a> 4. コードが生成される</h3>
<p data-line="74" class="code-line">プロンプトを基に、ファイルとコードが作成されていきます。</p>
<p data-line="76" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--mTMYmlGZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/99779d063a02de0b61f0dd4e.png%3Fsha%3D8844ec00cde6aee00063b3cc8c86f14dadc9295d" loading="lazy" class="md-img"></p>
<p data-line="78" class="code-line">右側の「 Preview 」から指示通りにアプリが作成されているか確認してみてください。<br>
結果を調整したい場合は、左下の入力ボックスからプロンプトを入力できます。</p>
<p data-line="81" class="code-line">アプリの作成はこれまでの手順だけです。<br>
APIを呼び出すコードを書く必要も、 UI をデザインする必要もありません！</p>
<h3 id="5.-cloud-run-%E3%81%AB%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%81%99%E3%82%8B" data-line="84" class="code-line">
<a class="header-anchor-link" href="#5.-cloud-run-%E3%81%AB%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%81%99%E3%82%8B" aria-hidden="true"></a> 5. Cloud Run にデプロイする</h3>
<p data-line="85" class="code-line">Web アプリとして公開するために Cloud Run にデプロイします。<br>
画面右上にある🚀ボタンをクリックします。</p>
<p data-line="88" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--stB41Uh2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/50da186d5077590943f76842.png%3Fsha%3De865ef43c73195d3f3a998dbb66411f9c7e9592a" loading="lazy" class="md-img"></p>
<p data-line="90" class="code-line">「 Deploy App 」をクリック。</p>
<p data-line="92" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--f1QSo368--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/3c27f336a5c0884b1fd11c1c.png%3Fsha%3Dbfaeb9562aa65337a0c97df304069cd87c0f8179" loading="lazy" class="md-img"></p>
<p data-line="94" class="code-line">少し待つだけで Cloud Run にアプリがデプロイされます。</p>
<p data-line="96" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--U9sokOuD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/fb544e32ee26b9a9b41bcd0b.png%3Fsha%3Da7fd2eef11cee64bb7d192c06e109300be68418c" loading="lazy" class="md-img"></p>
<p data-line="98" class="code-line">Cloud Run のコンソールを確認するとデプロイされていることが確認できました。</p>
<p data-line="100" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--44ixhvhX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/63c9cec9da532f0d7a2f3119.png%3Fsha%3Dae74baf2036e0326e3bfb32ebc36c1f274203c6f" loading="lazy" class="md-img"></p>
<p data-line="102" class="code-line">URL にアクセスすると、アプリがデプロイされていることが確認できました！</p>
<p data-line="104" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--b0x42Lr9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/1961579ad155baf6e6b57af6.png%3Fsha%3D1f24c9f1ef019546cf13c68094e5fd5613046236" loading="lazy" class="md-img"></p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81" data-line="106" class="code-line">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h2>
<p data-line="107" class="code-line">これまでの手順を通して、AI Studio の Build 機能の強力さを体験してきました。<br>
ここで一度、そのメリットと、どのような方に特におすすめできるかを整理してみました。</p>
<h3 id="%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88" data-line="109" class="code-line">
<a class="header-anchor-link" href="#%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88" aria-hidden="true"></a> メリット</h3>
<ol data-line="110" class="code-line">
<li data-line="110" class="code-line">
<p data-line="110" class="code-line">圧倒的な開発スピード</p>
<p data-line="112" class="code-line">アイデアを思いついてから、 Web アプリとして公開するまでが数分から数十分で完了します。</p>
</li>
<li data-line="114" class="code-line">
<p data-line="114" class="code-line">プログラミングのハードルが低い</p>
<p data-line="116" class="code-line">アプリの核となるロジックを、 Python や JavaScript といったプログラミングコードではなく、<br>
私たちが普段使う自然言語のプロンプトで構築できます。</p>
</li>
<li data-line="119" class="code-line">
<p data-line="119" class="code-line">面倒なインフラの自動化</p>
<p data-line="121" class="code-line">本来であれば手間のかかるサーバー設定、コンテナ化、デプロイといった作業が不要です。</p>
</li>
<li data-line="123" class="code-line">
<p data-line="123" class="code-line">無料で始められる手軽さ</p>
<p data-line="125" class="code-line">Google Cloud の無料枠が充実しているため、コストの心配をせず、気軽に試せる点も魅力です。</p>
</li>
</ol>
<h3 id="%E3%81%93%E3%82%93%E3%81%AA%E4%BA%BA%E3%81%AB%E3%81%AF%E7%89%B9%E3%81%AB%E3%81%8A%E3%81%99%E3%81%99%E3%82%81%EF%BC%81" data-line="127" class="code-line">
<a class="header-anchor-link" href="#%E3%81%93%E3%82%93%E3%81%AA%E4%BA%BA%E3%81%AB%E3%81%AF%E7%89%B9%E3%81%AB%E3%81%8A%E3%81%99%E3%81%99%E3%82%81%EF%BC%81" aria-hidden="true"></a> こんな人には特におすすめ！</h3>
<ul data-line="128" class="code-line">
<li data-line="128" class="code-line">アイデアを素早く検証したい企画者の方</li>
<li data-line="129" class="code-line">プログラミングの「楽しさ」を体験したい初学者・学生の方</li>
<li data-line="130" class="code-line">インフラを扱うのが面倒だと思う方</li>
<li data-line="131" class="code-line">開発の生産性を上げたい方</li>
</ul>
<h3 id="%E6%B3%A8%E6%84%8F%E7%82%B9" data-line="133" class="code-line">
<a class="header-anchor-link" href="#%E6%B3%A8%E6%84%8F%E7%82%B9" aria-hidden="true"></a> 注意点</h3>
<p data-line="135" class="code-line">AI Studio からデプロイした Cloud Run サービスは、インターネット上からアクセスできる公開状態です。<br>
これ自体は通常の Web サイトと同じですが、裏側で Gemini API を呼び出す AI アプリの場合、大量のアクセスがあると意図せず高額な料金が発生してしまう可能性があります。<br>
もし本格的なアプリケーションとして公開したい場合は、追加のセキュリティ設定が必要です。<br>
この記事で紹介した方法は、あくまで個人利用、学習、プロトタイピングの範囲で楽しむものと捉えてください。</p>
<h2 id="%E7%B5%82%E3%82%8F%E3%82%8A%E3%81%AB" data-line="140" class="code-line">
<a class="header-anchor-link" href="#%E7%B5%82%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> 終わりに</h2>
<p data-line="141" class="code-line">Google AI Studio を実際に使ってみて、その手軽さとスピード感に純粋に驚きました。<br>
これまでの一般的な開発プロセスを振り返ってみると、</p>
<ol data-line="143" class="code-line">
<li data-line="143" class="code-line">環境構築</li>
<li data-line="144" class="code-line">サーバーサイドとバックエンドの開発</li>
<li data-line="145" class="code-line">Dockerfile を記述してコンテナ化</li>
<li data-line="146" class="code-line">Docker イメージをビルドして Artifact Registry などにアップロード</li>
<li data-line="147" class="code-line">Cloud Run のサービスを設定し、コンテナをデプロイ</li>
</ol>
<p data-line="149" class="code-line">これら一つ一つの工程で、専門的な知識と多くの時間が必要でした。<br>
では、今回 AI Studio の Build 機能で主に行ったことは何だったかというと、</p>
<ol data-line="151" class="code-line">
<li data-line="151" class="code-line">ブラウザでプロンプトを書く</li>
<li data-line="152" class="code-line">🚀（デプロイ）ボタンを押す</li>
</ol>
<p data-line="154" class="code-line">たったこれだけです！<br>
誰でも簡単に AI アプリ開発ができます。<br>
ぜひ AI Studioを開いて、あなた自身のユニークなアイデアで遊んでみてください！</p>


Google AI Studio で 作成したアプリをワンクリックで Cloud Run にデプロイ

1. Google Cloud アカウントの作成とプロジェクトの紐付け

2. Google AI Studio のメニューから「Build」を開く

初心者

cloudrun

tech

Google AI Studio で作成したアプリをワンクリックで Cloud Run にデプロイ

Discussion