GSP643

概要

リリーさんは 12 年前、獣医クリニック チェーン「Pet Theory」を開業しました。Pet Theory チェーンはここ数年で急速に拡大しました。古い予約システムでは増加したトラフィックを処理しきれず、クライアントが自分の予約をスケジュールすることもできないため、リリーさんは IT 部門のパトリックさんとコンサルタントのルビーさんに対して、簡単にスケーリングできるクラウドベースのシステムを構築するよう依頼しました。このラボでは、ユーザーが情報を記録し、予約をリアルタイムでスケジュールできる本格的な Firebase ウェブアプリを構築します。

アーキテクチャ

この図は、使用するサービスの概要と、そのつながりを示しています。

目標

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

• サーバーサイドの認証と認可が自動化されるように Firestore セキュリティ ルールを構成する。
• Google ログインをウェブアプリに追加する。
• ユーザーが連絡先情報を追加できるようにデータベースを構成する。
• ユーザーによる予約のスケジュールを可能にするコードを確認してデプロイする。
• ウェブアプリで Firebase のリアルタイム更新を確認する。

前提条件

これは中級レベルのラボです。Cloud コンソール環境とシェル環境に精通していることを前提としています。Firebase の使用経験は役立ちますが、必須ではありません。このラボを受講する前に、次のラボを完了しておくことをおすすめします。

• Firestore データベースにデータを読み込む

ファイルの編集にも慣れている必要があります。ご自身で使い慣れたテキスト エディタ（nano、vi など）を使用するか、上部のリボンにある Cloud Shell からコードエディタを起動できます。

準備ができたら下にスクロールし、手順に沿ってラボ環境をセットアップします。

Firebase バックエンド

ルビーさんはパトリックさんにメールを送りました。

ルビーさん（ソフトウェア コンサルタント）	パトリックさん 先週はお疲れ様でした。クリニックのデータが Firestore に移行されたことを確認しました。 次のタスクは Firebase を使用して Pet Theory のウェブサイトをホストすることですね。 ルビー
パトリックさん（IT 管理者）	ルビーさん Firebase Hosting については聞いたことがありませんが、どのようなメリットがありますか？何から始めればよいですか？ パトリック
ルビーさん（ソフトウェア コンサルタント）	パトリックさん Firebase Hosting の主なメリットは、サーバーレスであるため、インフラストラクチャを管理しなくてよいことです。セキュリティ ルールもアプリケーション内に埋め込まれるため、権限を絞り込んで、顧客データを処理する際の問題を最小限に抑えることができます。 「従量課金制」料金モデルも用意されているので、Firebase は今回のユースケースに合った包括的なモバイル開発プラットフォームといえます。 ルビー
パトリックさん（IT 管理者）	ルビーさん Firebase を使用すると、セキュリティとインフラストラクチャの管理（私の仕事の大部分）がずっと簡単になるように思います。アイドル状態のサーバーには課金されないというのもいいですね。 パトリック

ルビーさんはパトリックさんに背景情報を電子メールで送信し、重要な作業について検討するための打ち合わせを設定します。この打ち合わせで、パトリックさんは次のことを行う必要があることがわかりました。

• Firebase プロジェクトを構成する。
• セキュリティ ポリシーを確立する。
• Firestore CLI を Google Cloud プロジェクトに追加する。

次に、パトリックさんが行うこれらの作業をサポートしていきます。

タスク 1. Firebase アプリケーションを登録する

シークレット ウィンドウを開き、Firebase コンソールに移動します。

プロンプトが表示されたら、次の情報を入力します。

• ユーザー名:
• パスワード:

注: というラベルの Firebase プロジェクトがあらかじめプロビジョニングされています。このプロジェクトを選択してコンソールにアクセスします。

1. Firebase の利用規約が表示されたら、内容を読み、同意して [続行] をクリックします。

2. [プロジェクトの概要] ページで [+ アプリを追加] をクリックし、ウェブアイコンを選択します。

3. [アプリのニックネーム] の入力を求められたら、「Pet Theory」と入力します。

4. [このアプリの Firebase Hosting も設定します] の横にあるチェックボックスをオンにします。

5. サイトのプルダウンで、[新しいサイトを作成] を選択するか、サイトが自分のプロジェクト ID と一致していることを確認します（またはラボの詳細に記載されている指示に従います）。

6. [アプリの登録] ボタンをクリックします。

7. 以降のステップ（[Firebase SDK の追加]、[Firebase CLI のインストール]、[Firebase Hosting へのデプロイ]）で、[次へ] または [コンソールに進む] をクリックしてメイン ダッシュボードに戻ります。

これで、Firebase アプリケーションが構成されました。

完了したタスクをテストする

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

Firebase アプリを登録する

タスク 2. Firebase プロダクトを有効にする

Firebase Authentication

Firebase コンソールで、ユーザーが Google でログインできるように Firebase Authentication を設定します。

1. 左側のナビゲーション メニューで、[認証] をクリックします（固定されていない場合は、[プロジェクト ショートカット] または [プロダクトのカテゴリ] > [セキュリティ] の下にあります）。

2. 初めての場合は、[使ってみる] をクリックします。

3. [ログイン方法] タブで、プロバイダのリストから [Google] を選択します。

4. 構成ダイアログで、[有効にする] 切り替えボタンをクリックします。

5. プルダウン メニューからサポートメールを選択し、[保存] をクリックします。

6. 認証用のカスタム ドメインを追加するために、[認証] ページの上部にある [設定] タブをクリックします。

7. 設定ペインの左側のメニューから [承認済みドメイン] を選択します。

8. [ドメインを追加] ボタンをクリックします。

9. 次のドメインを入力します（必要に応じて、自分のプロジェクト ID に置き換えます）。

   {{{ project_0.project_id | PROJECT_ID }}}.web.app

10. [追加] ボタンをクリックします。

完了したタスクをテストする

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

Firebase Authentication を設定する

Firebase Firestore

次に、Firestore データベースを設定します。

1. 左側のナビゲーション メニューで、[Database と Storage] の下にある [Firestore] をクリックします。

2. Cloud Firestore のランディング ページで、[データベースを作成] ボタンをクリックします。

3. [ステップ 1: エディションを選択] で、[Standard エディション] を選択して [次へ] をクリックします。

4. [ステップ 2: データベース ID とロケーション] で、適切なロケーション（nam5 など）を選択するか、デフォルトを受け入れて、[次へ] をクリックします。

5. [ステップ 3: 構成] で、[テストモードで開始する] を選択して [作成] をクリックします。

6. データベースがプロビジョニングされたら、[ルール] タブをクリックします。

7. 認証されたユーザーが自分のデータを読み書きできるように、セキュリティ ルールを以下に置き換えます。

   rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /customers/{email} { allow read, write: if request.auth.token.email == email; } match /customers/{email}/{document=**} { allow read, write: if request.auth.token.email == email; } } }

[公開] をクリックして、変更を Firebase にデプロイします。

これで、Firebase Authentication と Firestore が設定されました。バックエンドの構成が完了しました。

Firebase Localhost

ここまで、ウェブ デベロッパーがコードをデプロイできるように Firebase Hosting 環境をセットアップするパトリックさんの作業をサポートしてきました。

しかし、パトリックさんは Firebase Authentication を有効にしたことも、コードを Firebase にデプロイしたこともないため、メールでルビーさんにサポートを求めます...

パトリックさん（IT 管理者）	ルビーさん ヒントをいただきありがとうございます。Firebase 環境はすべて設定できたようです。次のタスクは、ウェブサイト開発者が作成したコードのデプロイですね。 コードのデプロイにはどのような作業が伴うのか、次に何をする必要があるか教えていただけませんか？ パトリック
ルビーさん（コンサルタント）	パトリックさん 環境を設定できたんですね。アプリケーションを実行して、次の機能を追加する方法をメールにてご説明します。 ログインする際のウェブ認証をセットアップする。 顧客の詳細をプロフィール ページに記録できるようにする。 予約用のセルフサービス ポータルを作成する。 ルビー
パトリックさん（DevOps エンジニア）	ルビーさん かなりの作業量になりそうですね。 新しい機能を追加するたびに構造を変更する必要があるということですか？確認するだけでも時間がかかりますが... パトリック
ルビーさん（コンサルタント）	パトリックさん 面倒な作業のほとんどは Firebase ライブラリで行うことができます。 Firebase には、ローカルホストをバックエンドの Firebase プロジェクトに接続するための優れたコマンドライン ツールが用意されています。 `firebase init` を使用して、使用するプロダクトを Firebase に通知します。 プロジェクトの設定が完了したら、コマンドラインから `firebase deploy` を呼び出すだけです。 ルビー
パトリックさん（IT 管理者）	ルビーさん それを聞いて安心しました。Firebase Hosting の良いところがだんだんわかってきました。 パトリック

タスク 3. リポジトリのクローンを作成して依存関係をインストールする

このタスクでは、Cloud Shell と Cloud Shell エディタを使用して、アプリケーション コードのクローンを作成し、必要な Node.js パッケージをインストールします。

1. Firebase コンソールで使用しているのと同じシークレット ウィンドウで、新しいタブを開き、Google Cloud コンソールに移動して、利用規約に同意します（同意を求められた場合）。

2. Google Cloud コンソールのツールバーで [Cloud Shell をアクティブにする] をクリックします。

3. Cloud Shell ターミナルで次のコマンドを実行して、Cloud Storage バケットからラボファイルをコピーします。

   gcloud storage cp -r gs://spls/gsp643/pet-theory .

4. コードを表示して編集するために、Cloud Shell ツールバーの [エディタを開く] ボタンをクリックします。

5. Cloud Shell エディタで、ファイル エクスプローラを使用して pet-theory/lab02 フォルダに移動します。

6. Cloud Shell エディタでターミナルを開き（または既存の Cloud Shell ターミナルを使用し）、lab02 ディレクトリに移動します。

   cd pet-theory/lab02

7. 次のコマンドを実行して、Node.js パッケージをインストールします。

   npm install 注: Cloud Shell 環境には、Node.js と npm がプリインストールされています。

これで、アプリケーションをバックエンドの Firebase プロジェクトにリンクする準備が整いました。

タスク 4. Firebase へのアクセスを承認する

IDE で Firebase を接続し、アプリケーションをデプロイします。

1. 次のコマンドを入力して、Firebase プロジェクトへのアクセスを承認します。

   firebase login --no-localhost

   注:

   Firebase は、ローカル環境が Firebase プロジェクトに接続できるように承認しようとします。そのため、適切な認証情報を使用してこの操作が円滑に行われるように、ブラウザ アクティビティをシークレット ウィンドウで行っていることを確認してください。

2. 「Y」と入力して、Firebase で Gemini 機能を有効にします。

3. Firebase にエラー報告情報の収集を許可するかどうかを尋ねられたら「Y」と入力し、Enter キーを押します。

4. 生成された URL をクリックして、同じシークレット ウィンドウで別のタブを開きます。

5. ラボのアカウントを選択し、[許可] をクリックします。

6. [Yes, I just ran this command] をクリックして続行します。

7. [Yes, this is my session ID] をクリックしてセッション ID を確認します。

8. 生成されたアクセスコードをコピーして Cloud Shell プロンプト [Enter authorization code:] に貼り付け、Enter キーを押します。

次のような出力が返されます。

出力例:

✔ Success! Logged in as student-02-21ab4a7ce0d1@qwiklabs.net

注:

この時点で、localhost はバックエンドの Firebase プロジェクトにリンクされています。

これで Firebase が接続され、承認されました。次のステップは、使用する Firebase プロダクトを初期化することです。

タスク 5. Firebase プロダクトを初期化する

IDE で、必要なプロダクトを Firebase に通知します。

1. 現在の作業ディレクトリで新しい Firebase プロジェクトを初期化します。

   firebase init

   注:

   このコマンドを実行すると、プロジェクト ディレクトリと Firebase プロダクトを順に設定できます。このフォルダに設定する Firebase CLI 機能を選択します。矢印キーを使用してリスト内を上下移動します。プロダクト オプションを選択するには Space キーを使用します。

2. 以下のプロダクトを選択します。

   • Firestore
   • Hosting

3. 矢印キーと Space キーを使用して、[Firestore] と [Hosting] を選択します。シェルで次のように選択されていることを確認して、Enter キーを押します。

   ? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. ◯ Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default insta ◉ Firestore: Configure security rules and indexes files for Firestore ◯ Functions: Configure a Cloud Functions directory and its files ❯◉ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys ◯ Hosting: Set up GitHub Action deploys ◯ Storage: Configure a security rules file for Cloud Storage

4. 残りの手順を実行して Firebase を構成します。

   • [Use an existing project] まで矢印キーで移動して、Enter キーを押します。
   • リスト からプロジェクト ID を選択して、Enter キーを押します。
   • N キーを押してから Enter キーを押して firestore.rules ファイルを保持します。
   • N キーを押してから Enter キーを押して firestore.indexes.json ファイルを保持します。
   • Enter キーを押して public ディレクトリを保持します。
   • N キーを押して index.html ファイルの書き換えを禁止し、Enter キーを押します。
   • GitHub による自動ビルド / デプロイを設定するかどうかを尋ねるメッセージが表示されたら、N キーを押して、Enter キーを押します。
   • 404.html ファイルの上書きを確認するメッセージが表示されたら、N キーを押します。
   • index.html ファイルの上書きを確認するメッセージが表示されたら、N キーを押します。
   • Firebase のエージェント スキルをインストールするかどうかを尋ねるメッセージが表示されたら、Y キーを押して、Enter キーを押します。

   出力例:

   ✔ Agent skills installation started ✔ Wrote configuration info to firebase.json ✔ Wrote project information to .firebaserc ✔ Wrote .gitignore ✔ Firebase initialization complete!

これでローカルの構成が完了しました。

タスク 6. Firebase にデプロイする

Cloud Shell でこのステップの操作を続けます。 コードエディタで、pet-theory/lab02 フォルダにいることを確認します。

1. firebase.json を編集し、hosting セクションを site キーに更新します。

   { ... "hosting": { "site": "{{{ project_0.project_id | PROJECT_ID }}}", ... } }

2. ターミナルを開き、サイト ID 値を使用して Firebase アプリケーションをデプロイします。次に例を示します。

   firebase deploy --only hosting:{{{ project_0.project_id | PROJECT_ID }}}

   出力:

   ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/project_0.project_id| "PROJECT_ID"/overview Hosting URL: https://{{{ project_0.project_id| "site" }}}.web.app

3. 生成されたホスティング URL（.web.app など）をクリックして、新しいシークレット タブで開きます。

   https://{{{ project_0.project_id | PROJECT_ID }}}.web.app

   重要:

   個人の認証情報をこのラボの認証として使用しないでください。 アカウントを使用して Google ログインを行ってください。

4. [Google でログイン] ボタンをクリックします。

   注:

   「browser is not supported or 3rd party cookies and data may be disabled」というエラーが表示された場合は、ブラウザで Cookie を有効にしてください。

   

   Chrome の場合は、URL タブの右端にある目のアイコンをクリックし、ポップアップに表示される青いリンクをクリックします。[サイトが動作していない場合] をクリックしてブラウザ設定を更新し、Cookie の使用を許可します。

5. 指定されたユーザー名（例: ）でログインします。次のページが開きます。

   

   Pet Theory のような小さな会社には、これを行うためのリソースや必要なスキルがありません。 この場合、アプリケーション ユーザーが既存の Google アカウント（または他の ID プロバイダ）でログインできるようにすると便利です。

   注:

   パスワードの管理は難しく、会社側のリスクを高める可能性があります。ユーザーも、別のユーザー ID やパスワードを作成することは望みません。

これで、ユーザーが Google 認証を使用して予約アプリにアクセスするためのコードがデプロイされました。

タスク 7. ウェブアプリに顧客ページを追加する

ターミナルに戻り、エディタを使用して public フォルダにあるファイルの内容を表示します。

1. public/customer.js ファイルを開き、次のコードをコピーして貼り付けます。

   let user; firebase.auth().onAuthStateChanged(function(newUser) { user = newUser; if (user) { const db = firebase.firestore(); db.collection("customers").doc(user.email).onSnapshot(function(doc) { const cust = doc.data(); if (cust) { document.getElementById('customerName').setAttribute('value', cust.name); document.getElementById('customerPhone').setAttribute('value', cust.phone); } document.getElementById('customerEmail').innerText = user.email; }); } }); document.getElementById('saveProfile').addEventListener('click', function(ev) { const db = firebase.firestore(); var docRef = db.collection('customers').doc(user.email); docRef.set({ name: document.getElementById('customerName').value, email: user.email, phone: document.getElementById('customerPhone').value, }) })

2. public/styles.css ファイルを開き、次のコードを貼り付けます。

   body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; } #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; } #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; } #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; } #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;} #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; } #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; } #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; } @media (max-width: 600px) { body, #message { margin-top: 0; background: white; box-shadow: none; } body { border-top: 16px solid #ffa100; } }

3. ターミナル コマンドラインから次のコマンドを実行します。

   firebase deploy --only hosting:{{{ project_0.project_id | PROJECT_ID }}}

   出力:

   ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/project_0.project_id| "PROJECT_ID"/overview Hosting URL: https://{{{ project_0.project_id | PROJECT_ID }}}.web.app

4. アプリのタブに移動し、CMD+SHIFT+R キー（Mac の場合）または CTRL+SHIFT+R キー（Windows の場合）でページのハード再読み込みを行います。通常の方法でページを更新しても、必要な更新内容は表示されません。

   

5. いくつかの顧客情報を入力します。名前と電話番号を入力します。

   顧客名:

   John

   顧客の電話番号:

   98473757454

6. [Save Profile] をクリックします。

7. Firebase コンソールに戻ります。

8. [構築] > [Firestore Database] をクリックして、保存されたプロフィール情報を表示します。

   

9. ウェブアプリのページに戻り、[Appointments] リンクをクリックします。予約コードがまだデプロイされていないため、空白のページが表示されます。

完了したタスクをテストする

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

ウェブアプリに顧客ページを追加する

正しく表示されました。

Firestore では、クライアント（ウェブアプリとネイティブ モバイルアプリ）がリアルタイムで更新されるので、ユーザーが更新または再読み込みを行う必要はありません。

お疲れさまでした

このラボでは、Firebase を使用して堅牢なサーバーレス ウェブ アプリケーションを作成しました。Firebase プロジェクトを作成して構成してから、サーバーサイドの認証と認可を自動化する Firestore セキュリティを追加しました。次に、Google ログインをウェブアプリに追加し、ユーザーが連絡先情報や予約を追加できるようにデータベースを構成しました。最後に、ユーザーによる予約のスケジュールを可能にするコードを確認してデプロイし、ウェブアプリで Firebase のリアルタイムの更新を確認しました。これで、この学習プログラムの他のラボを受講する準備が整いました。

次のステップと詳細情報

• Google Cloud - サーバーレスとは

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

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

マニュアルの最終更新日: 2026 年 5 月 31 日

ラボの最終テスト日: 2026 年 5 月 31 日

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