GSP1337

概要

このラボでは、Google AI Studio でアプリケーションのプロトタイプを迅速に作成する方法について学習します。事前構築済みの AI アプリケーションの確認、テンプレートを使用した独自のアプリケーションの作成、テキスト プロンプトの使用と調整、作成したアプリケーションの管理と共有の方法を学びます。このラボで、ハッカソンのソリューション デベロッパーの役割を担当し、制限時間内に複数の概念実証 AI アプリケーションを迅速に構築、共有することを目指します。

学習内容

このラボでは、次の方法について学びます。

• Google の事前構築済みアプリを確認する。
• テンプレートを使用してアプリを作成し、コード アシスタントを使用して変更する。
• 1 つのテキスト プロンプトからデータドリブンなアプリを構築する。
• アプリのプロトタイプを保存、ダウンロード、表示する。

設定と要件

[ラボを開始] ボタンをクリックする前に

こちらの説明をお読みください。ラボには時間制限があり、一時停止することはできません。タイマーは、Google Cloud のリソースを利用できる時間を示しており、[ラボを開始] をクリックするとスタートします。

このハンズオンラボでは、シミュレーションやデモ環境ではなく実際のクラウド環境を使って、ラボのアクティビティを行います。そのため、ラボの受講中に Google Cloud にログインおよびアクセスするための、新しい一時的な認証情報が提供されます。

このラボを完了するためには、下記が必要です。

• 標準的なインターネット ブラウザ（Chrome を推奨）

注: このラボの実行には、シークレット モード（推奨）またはシークレット ブラウジング ウィンドウを使用してください。これにより、個人アカウントと受講者アカウント間の競合を防ぎ、個人アカウントに追加料金が発生しないようにすることができます。

• ラボを完了するための時間（開始後は一時停止できません）

注: このラボでは、受講者アカウントのみを使用してください。別の Google Cloud アカウントを使用すると、そのアカウントに料金が発生する可能性があります。

Google AI Studio を開く

1. [ラボを開始] をクリックします。ラボパネルにこのラボ用の一時的な認証情報が表示されます。

   • 注: 有料のラボの場合は、お支払い方法を選択するよう求められます。

2. シークレット ウィンドウで Google AI Studio を開きます。Google ログインページが表示されます。

   • ヒント: ラボと AI Studio のタブをそれぞれ別のウィンドウで開いて並べて表示しておくと、操作が簡単です。

3. 以下のユーザー名をコピーして [Email] 欄に貼り付け、[Next] をクリックします。

   {{{user_0.username | "Username"}}}

4. 以下のパスワードをコピーして [Enter your password] 欄に貼り付け、[Next] をクリックします。

   {{{user_0.password | "Password"}}}

5. 画面に表示される利用規約に同意して続行します。

これで、一時的な受講者用アカウントを使用して Google AI Studio にログインできます。

タスク 1. 事前構築済みのアプリを確認する

ハッカソンのデベロッパーとして最初にすべきことは、利用可能な構成要素とサンプルを確認するため、状況をすばやく調査することです。まず、事前構築済みの chatbot アプリを確認します。

1. 左側のナビゲーション メニューで、[Enable saving]（[Build] オプションの上）をクリックして、ユーザー名を選択します。

2. [Build] をクリックします。

3. [Gallery] > [All apps] タブをクリックし、事前構築済みのアプリケーション テンプレートのギャラリーをスクロールします。

4. [ChatterBots] アプリを見つけてクリックします。

注: 「Failed to store recent Application」というエラー メッセージが表示された場合は、Google ドライブへのアクセス権が付与されていません。この問題を解決するには、左側のサイドバーの [History] セクションに移動して、ドライブへのアクセスを有効にします。[Allow Drive access] をクリックすると、新しいポップアップ ウィンドウが開きます。ポップアップで、受講者用アカウント（例: student-XX-YYYY@qwiklabs.net）を選択し、必要な権限を付与して続行します。

5. [Allow] をクリックして、[Microphone] へのアクセス権をリクエストします。

6. アプリが IDE ビューで開きます。インターフェースを確認します。左側にコード アシスタント、中央にコードエディタ / ファイル ビューア、右側に実行中の chatbot のライブ プレビューが表示されます。

7. アプリをプレビューし、ChatterBot のプリセットを確認して、定義した特性に基づき独自の ChatterBot を作成します。

8. 生成されたコードを確認します。コードエディタで [Show file tree view] ボタンをクリックして、コード構造を表示します。App.tsx などのファイルをクリックすると、メインのアプリケーション コードが表示されます。components フォルダ内のファイルをクリックすると、特定の UI 要素の構造を確認できます。

事前構築済みのアプリを確認する

タスク 2. テンプレートを使用してアプリのプロトタイプを生成し、変更する

次に、シンプルなフラッシュカード ユーティリティがハッカソン プロジェクトで有用であると判断しました。テンプレートを使用してアプリケーションを生成し、コード アシスタントを使用して、プロジェクトのブランディングに合わせて外観をすばやく変更します。

アプリを生成する

1. [Back to start] をクリックし、左上にある Google AI Studio のロゴをクリックしてホームページに戻ります。

2. 左側のナビゲーション メニューで、[Build] > [Start] をクリックします。

3. [Flash UI] テンプレートを見つけてクリックし、アプリケーションを生成します。

コード アシスタントを使用してアプリを変更する

1. 右側の [Preview] ペインで、デフォルトのフラッシュカードを操作して動作を確認します。

2. 入力フィールドに「Large Language Models」と入力し、矢印をクリックして、トピック固有のセットを生成します。

3. 画面の左下にある [Code assistant] 入力フィールドを確認します。次のコマンドを入力して、アプリのスタイルとロジックを変更します。

フラッシュカードの背景色を薄い緑色に変更し、一度に 1 枚しかめくれないようにロジックを変更します。

4. [Send prompt] をクリックします。アシスタントによってアプリケーション コードが変更される様子をエディタで確認できます。

注: [Remix] ボタンが表示された場合は、それをクリックしてから [Apply] をクリックして確認します。

5. コードが更新されたら、[Preview] ペインで両方の変更をテストします。フラッシュカードが薄い緑色であること、一度に 1 枚しかめくれないことを確認します。

6. 次に、別の機能を追加します。[Code assistant] 入力フィールドに、次の新しいコマンドを入力します。

5 枚のフラッシュカードを生成するための「add 5 more」ボタンを作成して、重複が発生しないことを確認します。

7. [Send prompt] をクリックすると、アシスタントによって UI に新しいボタンが追加され、新しいロジックを含めるようコードが変更されます。

8. 最後に、[Preview] ペインで新機能をテストします。新しい [Surprise Me] > [add 5 more] ボタンをクリックし、重複していない 5 個の新しいフラッシュカードがセットに追加されていることを確認します。

9. アプリ名「Flash UI」の横にある鉛筆アイコンをクリックし、アプリケーションの名前を「Flashcard Maker」に変更します。説明はデフォルトのままにして、[Save] をクリックします。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。

テンプレートを使用してアプリのプロトタイプを生成し、変更する

タスク 3. テキスト プロンプトを使用してアプリを構築する

それでは、ハッカソンのメインイベントであるコア機能をゼロから構築する作業に進みます。旅程作成アプリケーションを簡単な英語の説明で構築します。構造化データを見やすく表示できる UI を作成するよう、モデルに具体的に指示します。

1. [Build] ページ ギャラリーに戻ります。

2. ページ上部のメインのテキスト プロンプト バーに、次の詳細なリクエストを入力します。

都市の 3 日間の旅程を生成するアプリを作成してください。アプリには都市名の入力フィールドが必要です。出力は、日付、時間、アクティビティで整理されたプランが、見やすい形式で表示されるようにしてください。

3. [Build] をクリックして、コード アシスタントによるアプリケーションの生成が完了するまで待ちます。

4. アプリが表示されたら、[Preview] ペインで機能をテストします。都市の入力フィールドに「Rome」と入力して、Enter キーを押します。

5. 出力を確認します。ローマの 3 日間の旅程が体系的に表示され、AI がテキスト プロンプトからデータドリブンな UI を正常に作成したことを示しています。

6. パネル上部のアプリ名の横にある鉛筆アイコンをクリックし、アプリケーションの名前を「AI Travel Itinerary Generator」に変更します。説明はデフォルトのままにして、[Save] をクリックします。

7. （省略可）コード アシスタントを使用して、アプリケーションの任意の部分を変更できます。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。

テキスト プロンプトを使用してアプリを構築する

タスク 4. アプリを保存、ダウンロード、表示する

旅程作成アプリケーションのプロトタイプが完成しました。ハッカソンの最後のステップは、進行状況をダウンロードし、プロジェクトをチームと共有することです。

作成したアプリが [Build] ページの [Your apps] セクションに保存されます。

1. 次に、同じツールバーのダウンロード アイコンをクリックします。アプリケーションの完全なソースコードを含む ZIP ファイルが、パソコンにダウンロードされます。

   • 注: このコードを使用して、自身のエディタでローカル環境での開発を続行できます。

2. アプリを公開する手順を確認します。同じツールバーの [Deploy App] ボタンをクリックします。

   • 注: このラボでは、デプロイ プロセスの全工程を実行しませんが、このステップでは、Google Cloud でアプリケーションを公開するための全体的な流れを説明します。

アプリケーションのプロトタイプを表示する

1. ホームページに移動し、左上にある Google AI Studio のロゴをクリックします。

2. 左側のナビゲーション メニューで [Build] をクリックします。

3. [Your apps] > [Created by you] タブをクリックして、変更および構築したプロトタイプを表示します。Flashcard Maker と AI Travel Itinerary Generator の 2 つのアプリケーションが表示されます。

お疲れさまでした

これで完了です。Google AI Studio を使用して、機能的なアプリケーションのプロトタイプの確認、変更、ゼロからの作成を迅速に行うことができました。事前構築済みのテンプレートを活用する方法、自然言語によってコードを変更する方法、単一のテキスト プロンプトから完全なデータドリブン アプリケーションを生成する方法を学びました。これで、AI を活用した独自のアイデアを実現するための準備が整いました。

Google Cloud トレーニングと認定資格

Google Cloud トレーニングと認定資格を通して、Google Cloud 技術を最大限に活用できるようになります。必要な技術スキルとベスト プラクティスについて取り扱うクラスでは、学習を継続的に進めることができます。トレーニングは基礎レベルから上級レベルまであり、オンデマンド、ライブ、バーチャル参加など、多忙なスケジュールにも対応できるオプションが用意されています。認定資格を取得することで、Google Cloud テクノロジーに関するスキルと知識を証明できます。

マニュアルの最終更新日: 2026 年 3 月 12 日

ラボの最終テスト日: 2026 年 3 月 12 日

Copyright 2026 Google LLC. All rights reserved. Google および Google のロゴは Google LLC の商標です。その他すべての企業名および商品名はそれぞれ各社の商標または登録商標です。