1. 概要
AI を利用した構築はどこから始めればよいですか？ほとんどの場合、簡単な質問から始まります。「考えていた問題の解決策を簡単にプロトタイピングできますか？」そこで役立つのが Google AI Studio です。あらゆるものを迅速にプロトタイピングできる場所です。この Codelab では、バイブ コーディングを使用してシンプルなウェブ アプリケーションを作成し、Cloud Run にデプロイします。
作成するアプリの概要
ウェブ アプリケーションをバイブ コーディングして、他のユーザーが遊べるようにする準備はできましたか？AI Studio のみを使用して、ウェブ アプリケーションを作成して Cloud Run にデプロイします。このラボでは、次の作業を行います。
- バイブ コーディングを使用してシンプルなウェブ アプリケーションを構築する
- アプリケーションが想定どおりに動作していることをテストする
- Cloud Run にアプリケーションをデプロイする
要件
2. 始める前に
- Google Cloud コンソールのプロジェクト選択ページで、Google Cloud プロジェクトを選択または作成します。
- Cloud プロジェクトに対して課金が有効になっていることを確認します。詳しくは、プロジェクトで課金が有効になっているかどうかを確認する方法をご覧ください。
- クレジットを利用するためのリンクをお持ちの場合は、こちらの手順に沿って利用してください。
3. プロトタイプ
Google AI Studio に移動します。構築するアプリケーションについて説明するプロンプトの入力を開始します。次のプロンプトを入力してみます。
Create a formal looking frontend application that has two buttons: "Snowflakes" and "Balloons". If the user clicks on the "Snowflakes" button, snowflakes of medium size should start falling on the screen from top to bottom for 5 seconds. If the user clicks on the "Balloons" button, balloons of medium size should start floating from the bottom of the screen and float to the top for 5 seconds.
ご希望のモデルを選択します。ここでは、Gemini 3 Pro Preview を使用しています。[ビルド] ボタンをクリックします。
この簡単な説明に基づいて、AI Studio は、提供された説明に完全に一致するウェブ アプリケーションを構築します。アプリケーションが生成されるまでに 2 ～ 3 分かかります。
アプリケーションに問題が見つかった場合は、アプリケーションの動作を修正する追加のプロンプトを自由に入力してください。たとえば、雪の結晶のサイズを現在の 2 倍に増やします。
生成されたアプリケーションのスナップショットを以下に示します。
4. Cloud Run にデプロイする
アプリケーションの準備ができたので、Cloud Run にデプロイしましょう。
- AI Studio ページの右上にあるロケットのようなボタンをクリックします。ボタンにカーソルを合わせると、[アプリをデプロイ] と表示されます。
- [**Deploy app on Google Cloud**] ポップアップが開きます。
- [Cloud プロジェクトを選択] プルダウンをクリックします。
- プルダウンからプロジェクトを選択します。プルダウンにプロジェクトが表示されない場合は、[プロジェクトをインポート] をクリックし、[プロジェクトをインポート] ペインからプロジェクトを選択します。
- プロジェクトを選択すると、そのプロジェクトで課金が有効になっていることが確認されます。最初のステップで請求先アカウントをプロジェクトにリンクしているため、この検証は成功します。
- [アプリをデプロイ] ボタンをクリックし、アプリケーションが Cloud Run にデプロイされるまで待ちます。
Cloud Run サービス名は自動生成されます。
- デプロイは数分で完了し、アプリの URL が取得されます。URL をクリックすると、デプロイされたウェブ アプリケーションが表示されます。
5. クリーンアップ
この投稿で使用したリソースについて、Google Cloud アカウントに課金されないようにするには、次の手順を行います。
- Google Cloud コンソールで、[リソースの管理] ページに移動します。
- プロジェクト リストで、削除するプロジェクトを選択し、[削除] をクリックします。
- ダイアログでプロジェクト ID を入力し、[シャットダウン] をクリックしてプロジェクトを削除します。
6. 完了
おめでとうございます！AI Studio でのアプリケーションのバイブ コーディングが完了し、Cloud Run にデプロイされました。
AI Studio は、アプリケーションの開発とテストに最適なプラットフォームです。ユーザーは、設計をすぐに可視化して動作を確認できます。
AI Studio と Cloud Run のシームレスな統合により、ユーザーはアプリケーションを Google Cloud に簡単に直接デプロイできます。Cloud Run を利用すると、サーバーレス環境のすべてのメリットを享受でき、インフラストラクチャ管理の複雑さとオーバーヘッドを抽象化できます。