1. はじめに
概要
AI を利用した構築は、今日からどこで始められますか？ほとんどの場合、クエリまたはプロトタイプから始まります。Google AI Studio には、Gemini モデルによるコード生成を使用してウェブ アプリケーションを設計、テスト、構築できる強力なビルドモード（「バイブ コーディング」とも呼ばれます）が用意されています。
この Codelab では、個人用ポートフォリオ ウェブサイトを作成します。AI Studio エージェントがフロントエンド コードを記述します。アプリが完成したら、ワンクリックで Cloud Run に直接デプロイします。
演習内容
- Google AI Studio にプロンプトを入力して、個人用ポートフォリオ ウェブサイトのプロトタイプを作成します。
- インタラクティブ プレビューのサンドボックスでアプリケーションをテストします。
- Google AI Studio UI から Cloud Run にアプリケーションを直接デプロイします。
学習内容
- Google AI Studio の Build モードを使用して、自然言語でフロントエンド サービスのプロトタイプを迅速に作成する方法。
- AI Studio アプリケーションを Cloud Run のサーバーレス コンテナとしてデプロイする方法。
2. プロジェクトのセットアップ
AI Studio を起動する前に、アカウントのステータスと前提条件を確認してください。
Google アカウントとティア情報
- Google アカウントをまだお持ちでない場合は、Google アカウントを作成します。
- ヒント: 可能であれば、このラボでは個人の Google アカウントを使用してください。グループ アカウント、企業アカウント、学校アカウントでは、試験運用版の機能やクラウド統合を無効にする Workspace ポリシーが適用されることがあります。
- デプロイの請求の詳細を確認します。
- Google Cloud スターター ティア: 完全な Google Cloud 請求先アカウントを設定しなくても、選択したリージョンに最大 2 つのフルスタック アプリケーションを無料で公開できます。
- 標準デプロイ: 既存の有料 Google Cloud プロジェクトに接続し、ストレージの上限、CPU リソース、API を拡張します。
3. AI Studio のビルドモードでポートフォリオ ウェブサイトを作成する
アプリケーション シェルを作成し、AI コード アシスタントにフロントエンド レイアウトの構築を指示します。
- Google AI Studio アプリ パネルに移動し、[新しいアプリ] をクリックします。
- チャット プロンプト ボックスに、ポートフォリオ アプリケーションの説明を入力します。
Build a professional personal portfolio website. The site should have a modern, responsive design and sections for my biography, projects showcase, skills, and links to my professional profiles (e.g., GitHub, LinkedIn). - [ビルド] をクリックして、アプリケーション生成プロセスを開始します。
4. テストとイテレーション
サービスを公開する前に、インタラクティブ プレビューで検証チェックを実行します。
- Google AI Studio 内でプレビュー パネルを開きます。
- プレビュー サンドボックスでナビゲーション ボタン、リンク、レイアウトを操作して、視覚的なエクスペリエンスを確認します。
- エラーの修正に関する注: 生成またはテスト中に、ランタイムの問題やコンパイル エラーが発生することがあります。この場合、AI Studio のチャットに [修正] ボタンが表示され、エージェントに問題を自動的に診断して修復するよう依頼できます。
- スタイルや動作を変更する場合は、チャット ウィンドウでエージェントに指示します。次に例を示します。
"Could you style the interface using Tailwind CSS, and add a dark mode toggle button?""Include a new section to showcase my recent presentations and talks."
- エージェントがコードベースを更新するまで待ち、プレビュー ブラウザで更新を確認します。
5. Cloud Run にデプロイする
プロトタイプが完全に機能したら、Cloud Run に公開サービスとしてデプロイします。
- Google AI Studio の右上にある [公開] ボタンをクリックして、デプロイ ウィザードを開始します。
- [開始] をクリックして、Google Cloud プロジェクトを構成します。
- [Google Cloud プロジェクト] プルダウンが、ワークスペースに関連付けたプロジェクトと一致していることを確認します。
- AI Studio は、Cloud Run インスタンスの一意のサービス ID を自動的に生成します。
- 初めてデプロイする場合で、標準の Google Cloud パラメータを使用している場合は、組織のタイプを指定して課金情報を入力するよう求められることがあります。
- [アプリを公開] をクリックします。
- コンテナのビルド、コンテナの登録、サービスのデプロイの手順はバックグラウンドで行われます。通常、このプロセスは 2 ～ 4 分で完了します。
- デプロイが完了したら、生成されたアプリの URL をコピーし、ブラウザタブでライブ アプリケーションのリンクにアクセスします。
- ブラウザでライブ ウェブ アプリケーションをテストする
6. （省略可）カスタム ドメインを追加する
デフォルトでは、Cloud Run は Google 管理の run.app サブドメインでサービスをホストします。個人用ドメイン（yourname.com や portfolio.yourname.com など）を使用する場合は、カスタム ドメインをサービスにマッピングできます。
ステップ 1: Cloud Run でドメイン マッピングを追加する
- Google Cloud コンソールで [Cloud Run ドメイン マッピング] ページに移動します。
- [マッピングを追加] をクリックします。
- プルダウンから、マッピングする Cloud Run サービスを選択します。
- カスタム ドメイン名（
yourname.comやportfolio.yourname.comなど）を入力します。 - [次へ] または [続行] をクリックします。Cloud Run には、ドメイン登録事業者で作成する必要がある DNS レコード（
A/AAAAレコードやCNAMEレコードなど）が表示されます。
ステップ 2: DNS 登録事業者を構成する
- ドメイン登録事業者の管理パネル（Squarespace、GoDaddy、Namecheap など）にログインします。
- ドメインの DNS 管理ページまたは DNS 設定構成ページを開きます。
- Cloud Run マッピング ウィザードに表示される値と一致する DNS レコードを作成します。
- Apex ドメイン マッピング（
yourname.comなど）の場合は、リストに記載されているAレコードとAAAAレコードを追加します。 - サブドメイン マッピング（
portfolio.yourname.comなど）の場合は、リストされているCNAMEレコードを追加します。
- Apex ドメイン マッピング（
- DNS 構成の変更を保存します。
ステップ 3: SSL 証明書のプロビジョニングを待機する
DNS の変更が反映されたら:
- Google Cloud は、安全な接続用にマネージド SSL/TLS 証明書を自動的にプロビジョニングします。
- 通常、このプロセスは 15 分ほどで完了しますが、DNS 伝播によっては 24 時間ほどかかることがあります。
- 完了すると、カスタム ドメインがポートフォリオ ウェブサイトに安全にルーティングされます。
7. クリーンアップ
予期しない課金が発生しないようにするか、ワークスペース リソースをクリーンアップするには:
- Google AI Studio で、[アプリ] ページに移動します。
- グリッドまたはリストでアプリケーションを見つけます。
- ゴミ箱アイコンをクリックして、アプリの状態を削除し、Cloud Run からサービスの公開を取り消します。
- 標準プロジェクトを使用してデプロイし、すべてのリソースを完全にシャットダウンする場合は、Google Cloud コンソールのプロジェクト設定に移動して、基盤となるプロジェクトを削除します。
8. まとめ
おめでとうございます！Google AI Studio から直接ポートフォリオ ウェブサイトを設計、開発、デプロイした。
詳細
こちらのリンクにアクセスして、Builder Journey 完了バッジを獲得しましょう。
次のラボに進むには、goo.gle/builders にアクセスしてください。