1. 始める前に
週末に友だちや近所の人たちとランニングを企画したことがある方なら、その苦労をご存じでしょう。待ち合わせ場所がグループ チャットの無限のやり取りの中に埋もれてしまったり、参加者がペースを何度も尋ねてきたり、初めて参加する人が誰が来るのかを把握できなかったりします。
この Codelab では、Running Club というウェブアプリを構築して、この日常的な問題を解決します。このアプリでは、地元のランナーがお気に入りのルートを閲覧したり、週末の集まりをスケジュールしたり、ワンクリックで出欠確認を行ったり、他のランナーとチャットしたりできます。
このアプリにデータベースが必要なのはなぜですか？
コミュニティ アプリには、データベースと呼ばれる信頼性の高いメモリが必要です。ランナーが新しい景色の良いルートを追加したり、土曜日の朝のランニングに RSVP したり、駐車場について質問するコメントを投稿したりした場合、スマートフォンを閉じたりパソコンの電源を切ったりしても、その情報が消えることはありません。データベースには、すべてのルート、参加者リスト、メンバー メッセージが安全に保存され、整理されているため、クラブのメンバーはアプリを開くたびに最新の情報を確認できます。
このアプリは、Google AI Studio のビルドモードを使用して構築します。複雑なコードを記述したり、技術インフラストラクチャを自分で設定したりする必要はありません。必要なことを平易な言葉で説明するだけです。Google AI Studio はアプリを生成し、実際の Cloud SQL for PostgreSQL データベースを接続してデータを記憶し、Cloud Run でアプリを公開して、コミュニティがすぐに使用できるようにします。
作成するアプリの概要
Running Club というコミュニティ ウェブアプリをビルドして起動します。このアプリには次の機能が含まれます。
- Google ログイン: 既存の Google アカウントを使用してすばやく安全にログインできます。
- ランナー プロフィール: ランニングの好みや目標ペースを紹介するメンバー プロフィール。
- ルート ライブラリ: お気に入りの近隣ルートのコレクション。距離、坂道の難易度、集合場所が表示されます。
- 今後のランニング スケジュール: 今後のグループ ランニングを整理し、ルートにリンクするためのイベント ボード。
- 簡単な出欠確認: メンバーが [参加する] をクリックして、他の参加者を確認できるボタン。
- 実行に関するディスカッション: 各実行に関するコメント スペース。詳細の調整、質問、更新情報の共有に使用します。
学習内容
- Google AI Studio で、平易な言葉で書かれた 1 つのプロンプトを使用して、動作するウェブアプリを作成する方法。
- Google AI Studio が Google ログインを自動的に設定する方法。
- Google AI Studio が実際の Cloud SQL for PostgreSQL データベースを作成して接続し、データを記憶する方法。
- AI とチャットするだけで、新しい機能を追加してデータベースを拡張する方法。
- クラブのデータがアクセス間で安全に保存されていることを確認する方法。
- Cloud Run を使用してアプリをインターネットに公開する方法。
- Google Cloud コンソールでライブアプリとデータベースを表示する方法。
必要なもの
- Google Chrome などの最新のウェブブラウザ。
- Google AI Studio にログインするための標準の Google アカウント。
Cloud SQL Starter エディションの利用資格と上限
Google AI Studio は、ビルダーが生成アプリとマネージド データベースをテストするのに役立つ Google Cloud スターター ティアを提供しています。
- 利用資格要件:
- 標準の Google アカウントをご利用の個人ユーザー。
- 対象外のアカウントには、既存または過去の Google Cloud 請求先アカウントを持つユーザーや、Google Workspace、Google Workspace for Education、Google for Nonprofits に関連付けられているアカウントが含まれます。
- アカウントがスターター ティアの対象外の場合でも、AI Studio で課金が有効になっている既存の Google Cloud プロジェクトを選択することで、この Codelab を完了できます。
- リソース仕様:
- PostgreSQL 18 を実行する Cloud SQL for PostgreSQL デベロッパー エディション インスタンスをプロビジョニングします。
- 0.5 vCPU、2 GB RAM、1 GB ストレージが含まれます。アクティビティにもよりますが、数か月以上、毎日数百件のアクセスを処理するには十分な容量です。
- ゼロへのスケーリングをサポートします。アクティブなデータベース接続がない場合、割り当てを節約するためにコンピューティングが自動的に一時停止します。
- Quota:
- 50 個のコンピューティング単位数と 10 GB のストレージの無料の月間割り当てが含まれます。
2. Google AI Studio を開いて新しいアプリを作成する
まず、ブラウザで Google AI Studio を開きます。これは、必要なものを説明するだけでアプリを構築してテストできる作成ワークスペースです。
ステップ 1: Google AI Studio にログインする
- ウェブブラウザ（Google Chrome など）を開き、aistudio.google.com にアクセスします。
- [使ってみる] をクリックし、標準の Google アカウント（Gmail アカウントなど）でログインします。
- 初回アクセス時に利用規約が表示された場合は、内容を確認して同意し、続行してください。
ステップ 2: 新しいアプリケーションを開始する
- 中央下のパネルで [Start building] をクリックします（または、右側のパネルで [+New App] をクリックします）。
3. シンプルなプロンプトと Firebase Authentication から始める
複雑なアーキテクチャ図は必要ありません。最初のアプリケーションを起動し、Google ログインを構成して、データベースを接続する手順を 1 つの文で説明できます。
最初のプロンプトを入力する
AI Studio のビルドモードのプロンプト ボックスに次のプロンプトを入力し、Enter キーを押します。
Build a running club web app with a Cloud SQL database
where members can post upcoming runs.
こちらのリンクをクリックすると、プロンプト ボックスが自動的に入力されます。
ワークスペースについて
プロンプトを送信すると、Google AI Studio でアプリケーション ワークスペース全体が開きます。画面の 3 つの主な領域を見てみましょう。
- チャット / プロンプト ボックス（下部）: ここで、AI と平易な言葉でチャットを続け、機能の追加、デザインの調整、質問を行います。
- ファイルとコードのエリア（左側）: AI がバックグラウンドで作成するファイルが表示されます。コードを自分で作成したり編集したりする必要はありませんが、このパネルでは AI がアプリの各部分を作成する様子を確認できます。
- ライブ プレビュー ウィンドウ（右側）: 実際に動作しているアプリがリアルタイムで表示されます。このウィンドウが生成されると、すぐにボタンをクリックしたり、テキスト フィールドに入力したり、アプリを直接テストしたりできます。
- コードエディタ（右側）: AI が生成した実際のコードが表示されます。必要に応じて編集できますが、必須ではありません。
- デプロイと共有（右上）: アプリをインターネットにデプロイして、他のユーザーと共有できます。
Google AI Studio が自動的に行うこと
AI がリクエストを処理している間、アプリが段階的に構築されていく様子を確認できます。
- Google ログインを設定する: AI が Google ログインを自動的に統合するため、ランナーは Google アカウントで安全にログインできます。ユーザーのパスワードやセキュリティ設定を管理する必要はありません。
- 実際のデータベースに接続する: AI が、コミュニティのデータを保存するためのマネージド Cloud SQL データベースを設定します。プロンプトが表示されたら、クリックしてプロジェクトのデータベースを有効にします。
- データテーブルを整理する（
schema.ts）: データベース スキーマは、整理されたスプレッドシートのコレクションと考えることができます。AI がアプリのストレージ構造を自動的に作成します。usersテーブル: メンバーのプロフィール、名前、アバター、ランニング ペースを保存します。runsテーブル: スケジュールされたイベントのタイトル、距離、目標ペース、場所、日付を保存します。commentsテーブル: ランナーが各ランニングで残したメッセージや質問を保存します。
（注: このコードを手動で記述または編集する必要はありません。新しい機能をリクエストするたびに、AI がコードを更新します）。 - ビジュアル インターフェースを構築する: AI が、ヘッダー、今後のランニング リスト、イベント作成フォーム、コメント セクションなど、画面に表示されるウェブページを作成します。
認証を確認して投稿を実行する
生成が完了したら、[プレビュー] ペインで新しいアプリをテストします。
- プレビュー ウィンドウで、[Member Sign In] をクリックします（または、[Post Upcoming Run] ボタンをクリックして認証をトリガーします）。
- Firebase Auth ダイアログを使用して Google アカウントで認証します。
- ログインすると、Google プロフィールの名前とアバターがナビゲーション バーに表示され、ペース設定が自動的に管理されます。
- [Post Upcoming Run] フォームで、タイトル（
Morning 5K Shakeoutなど）を入力します。 - 日付と時刻を選択し、会議の場所（
Central Park West Entranceなど）を入力します。 - [PublishRun] をクリックします。
- 新しいランニングが今後のランニング フィードにすぐに表示され、認証済みのプロフィール名とペースバッジが主催者として表示されることを確認します。
- 実行のディスカッション セクションに簡単なメッセージ（
Bringing extra water bottles!など）を投稿し、コメント スレッドに表示されることを確認します。
4. ルート ライブラリを構築する
ランニング クラブは、人気の高いローカルルートを再利用することがよくあります。同じルート情報を何度も入力する代わりに、メンバーがカタログにお気に入りのルートを保存し、ランニングをスケジュールするたびに添付できるようにします。
AI にルート ライブラリの追加を依頼する
チャット プロンプト ボックスに次のリクエストを入力して、Enter キーを押します。
Add a route library where members can save favorite
running routes with atitle, distance in km, difficulty,
and start location. When scheduling a run, allow the
organizer to select a route from this library.
AI が舞台裏でルートとランニングをリンクする仕組み
この処理を実現するために、AI は routes の新しいストレージ テーブルを自動的に作成し、runs テーブルに直接接続します。この接続により、主催者がルートを選択するたびに、アプリが距離と位置情報の詳細を自動的に取得できるようになります。
（このコードを操作する必要はありません。AI がデータベース構造を更新します）。
プレビューで新しいルート ライブラリをテストする
AI によるアプリの更新が完了したら、ライブ プレビュー ウィンドウで新しいルート機能を試してみます。
- アプリのナビゲーションで、[ルート ライブラリ] タブをクリックします。そのようなタブがない場合は、ライブ プレビューの下部を確認してください。プレビューを更新するために [保存] ボタンを押すよう求められることがあります。それでも解決しない場合は、チャット ウィンドウで AI とやり取りして、ルート ライブラリの場所を尋ねてみてください。
- [Save New Route]（または [Add Route]）をクリックし、詳細の例を入力します。
- ルートのタイトル:
Riverfront Trail Loop - 距離:
8.5 km - 難易度:
Moderate - 開始位置:
Waterfront Pier 4
- ルートのタイトル:
- [ライブラリに保存] をクリックします。
- 新しいルートカードの [スケジュールを設定] ボタンをクリックして、このルートを使用したランニングのスケジュールを設定します。
- 距離、難易度、場所の詳細が自動的に入力されます。
- [Publish Run] をクリックし、新しいグループ ランがホームフィードに表示されていることを確認します。
5. 出欠確認とメンバー招待を実装する
コミュニティ アプリは参加によって活性化します。ランナーは、今後のランニングに参加するユーザーを確認したり、ワンクリックで登録したり、招待リンクを友だちと共有したりできます。
AI に出欠確認と招待状の追加を依頼する
チャット プロンプト ボックスに次のリクエストを入力して、Enter キーを押します。
Allow registered members to RSVP ("Join Run") to any upcoming run.
Show the list of attending runners on each run card, display an
attendee counter, and add a copyable invite link.
AI が参加者を追跡する舞台裏
どのランナーがどのランニングに参加するかを追跡するために、AI はデータベースに rsvps テーブルを自動的に作成します。これは、ランナーの名前を特定のイベントにリンクするデジタル登録シートのようなものです。
（このコードを記述したり編集したりする必要はありません。AI がデータベース内のこの登録シートを自動的に管理します）。
プレビューで出欠確認と招待状をテストする
AI によるアプリの更新が完了したら、ライブプレビュー ウィンドウで新しい出欠確認機能をテストします。
- プレビュー ウィンドウのホームフィードで、今後のランニングを探します。
- [ランニングに参加]（または [出欠確認]）ボタンをクリックします。
- [参加予定のランナー] セクションに自分の名前とアバターが表示され、参加者のカウンタが 1 増えていることを確認します。
- [招待リンクをコピー] をクリックし、共有可能なリンクが生成されていることを確認します。
6. テストデータの永続性と Cloud SQL のゼロへのスケーリング
アプリを構築するうえで最も重要なのは、コミュニティの情報が安全であると認識することです。ブラウザを更新したり、タブを閉じたり、パソコンをシャットダウンしたりしても、保存したルート、出欠確認、ディスカッションは、戻ってきたときにそのまま残っている必要があります。
このステップでは、データが Cloud SQL データベースに安全に保存されていることをテストし、アプリが静止しているときに Google Cloud がエネルギーと費用を節約する方法について学びます。
アプリの更新をテストする
- AI Studio のプレビュー ウィンドウ内の [再読み込み] ボタンをクリックします（または、ブラウザのタブを更新します）。
- プレビューでアプリを確認します。作成したメンバー プロフィール、保存したルート、スケジュールされたランニング、出欠確認、コメントはすべてそのまま残っています。
- アプリは、情報を画面に一時的に保存するだけでなく、Cloud SQL データベースに安全に保存しました。
Cloud SQL がエネルギーとコストを節約する方法（「ゼロへのスケーリング」）
真夜中にランニング クラブのアプリを使用している人がいない場合はどうなりますか？
- 自動スリープ（「ゼロへのスケーリング」）: アプリにアクセスしているユーザーやランニングに登録しているユーザーがいない場合、データベースはリソースを節約するために自動的に一時停止します。
- 瞬時の起動: ランナーがアプリを開くか招待リンクをクリックすると、データベースが瞬時に起動し、保存されたすべての情報がすぐに利用できるようになります。
- アイドル状態のコストがゼロ: アプリがアクティブでないときはスリープ状態になるため、アプリが静止しているときにコンピューティング リソースが消費されることはありません。
7. Cloud Run に公開してデプロイする
ランニング クラブ アプリがビルドされ、プレビューでテストされたので、コミュニティと共有しましょう。ウェブホスティングを購入したり、サーバーを構成したりする必要はありません。ワンクリックでアプリをインターネットに公開できます。
アプリをウェブに公開する
- Google AI Studio の右上にある [公開] ボタンをクリックします。
- 詳細を確認する概要ウィンドウが表示されます。
- ホスティング: Google Cloud Run でホストおよびデプロイされます。
- 接続されたサービス: Google ログインと Cloud SQL データベース。
- ホスティング: Google Cloud Run でホストおよびデプロイされます。
- [公開] をクリックしてアプリをリリースします。
ライブアプリを開いて共有する
- 公開が完了すると、Google AI Studio にライブ ウェブアドレスと QR コードが表示されます。
- リンクをクリックして新しいブラウザタブでライブ ウェブアプリを開くか、スマートフォンのカメラで QR コードをスキャンします。
- スマートフォンで試す: スマートフォンでログインし、パソコンで事前にスケジュールしたランニングの 1 つに RSVP します。共有 Cloud SQL データベースを利用して、参加者数がリアルタイムで更新される様子を確認できます。
8. （ボーナス）Google Cloud コンソールでリソースを検査する
Google AI Studio がアプリをビルドしてデプロイするとき、アプリはプライベート ブラック ボックス内にロックされません。ユーザーに代わって、プロダクション レディの実際の Google Cloud サービスが作成されます。Google Cloud コンソールは、ライブアプリとデータベースを表示できるコントロール センターです。
ステップ 1: Google Cloud コンソールを開く
- 新しいブラウザタブで、Google Cloud コンソールを開きます。
- 画面上部のプロジェクト プルダウン メニューをクリックし、AI Studio アプリ用に作成したプロジェクト（通常、名前は
continual-run-で始まります）を選択します。
ステップ 2: ウェブアプリの実行場所を確認する（Cloud Run）
- 上部の検索バーに「
Cloud Run」と入力し、結果から選択します。
- アプリ名（
running-clubなど）をクリックします。
- ここでは、ウェブサイトをホストしているエンジンを確認できます。
- 指標: ウェブサイトにアクセスしているユーザー数を示す便利なグラフ。
- ログ: サイト訪問者がアプリを操作したときに何が起こったかを示すアクティビティのリアルタイム記録。
ステップ 3: データベースの動作を確認する（Cloud SQL）
- 上部の検索バーに「
Cloud SQL」と入力し、結果から選択します。 - PostgreSQL データベース インスタンスをクリックします。
- ここでは、ライブ データベースの詳細を確認できます。データベースがアクティブで、ランニング クラブのデータを保存する準備ができていることがわかります。
9. リソースをクリーンアップする
このアプリを練習用プロジェクトとして作成した場合は、簡単に削除できます。コミュニティで Running Club アプリを引き続き使用する場合は、実行したままにしておいてください。
- Google AI Studio で、左側のサイドバーにある [マイアプリ] をクリックします。
- Running Club アプリを見つけます。
- [アプリを削除]（またはゴミ箱アイコン）をクリックします。これにより、ライブ ウェブページがオフになり、テスト データベースが 1 つの手順で削除されます。
10. 完了
Google AI Studio と Cloud SQL を使用して、最初のデータベース連動型ウェブアプリを構築、カスタマイズ、公開しました。
こちらのリンクにアクセスして、Completed Builder Journey バッジを獲得しましょう。
次のラボに進むには、goo.gle/builders にアクセスしてください。
学習した内容
- 平易な言葉でアプリを構築: シンプルなプロンプトで、コミュニティのランニング クラブのアプリを完成させました。
- Google ログインを有効にする: Google アカウントによる安全なログインを自動的に設定します。
- 実際のデータベースに接続: ルート、スケジュールされた実行、出欠確認、ディスカッションを Cloud SQL に安全に保存しました。
- 会話形式で機能を追加: AI とチャットするだけで、ルート ライブラリと出欠確認を作成できます。
- ウェブに公開: ワンクリックでアプリをインターネットにデプロイし、デバイス間でテストしました。
- Looked under the hood: Google Cloud でライブ ウェブアプリとデータベースをホストする方法について説明しました。
次のステップ
Google AI Studio で AI とのチャットを継続して、新しい機能でアプリを拡張できます。
- インタラクティブ マップ: AI に地図のプレビューと GPS ルートを追加するよう指示します。
- ランニング バディのマッチング: AI に、ペース目標が似ているランニング パートナーを提案するよう指示します。
- 天気予報: AI に、今後のランニング カードに週末の天気予報を表示するよう指示します。
- 写真の共有: グループ ランニング後にランナーが写真を共有できるように、AI に指示します。