このページは Cloud Translation API によって翻訳されました。

ウェブ向け Firebase を理解する

1. 概要

この Codelab では、インタラクティブなウェブアプリケーションを作成するための Firebase の基本の一部について学習します。いくつかの Firebase プロダクトを使用して、イベントの出欠確認とゲストブックのチャットアプリを作成します。

このステップのスクリーンショット

ラボの内容

Firebase Authentication と FirebaseUI を使用してユーザーを認証します。
Cloud Firestore を使用してデータを同期する。
Firebase セキュリティルールを作成してデータベースを保護する。

必要なもの

Chrome などの任意のブラウザ。
stackblitz.com へのアクセス（アカウントもログインも不要）。
Google アカウント（Gmail アカウントなど）。GitHub アカウントですでに使用しているメールアカウントを使用することをおすすめします。これにより、StackBlitz の高度な機能を使用できるようになります。
Codelab のサンプルコード。コードを取得する方法については、次のステップをご覧ください。

2. 開始用コードを取得する

この Codelab では、複数の Firebase ワークフローが統合されたオンラインエディタである StackBlitz を使用してアプリを作成します。Stackblitz はソフトウェアのインストールや特別な StackBlitz アカウントを必要としません。

StackBlitz を使用すると、プロジェクトを他のユーザーと共有できます。あなたの StackBlitz プロジェクト URL を知っている他のユーザーは、あなたのコードを見てプロジェクトをフォークできますが、あなたの StackBlitz プロジェクトを編集することはできません。

開始コードの URL（https://stackblitz.com/edit/firebase-gtk-web-start）に移動します。
StackBlitz ページの上部で、[Fork] をクリックします。

このステップのスクリーンショット

これで、開始コードのコピーが、一意の名前と一意の URL を持つ独自の StackBlitz プロジェクトとして作成されました。すべてのファイルと変更は、この StackBlitz プロジェクトに保存されます。

3. 予定情報を編集する

この Codelab のスタートガイドでは、スタイルシートやアプリの HTML コンテナなど、ウェブアプリの構造を提供します。この Codelab の後半で、これらのコンテナを Firebase に接続します。

まず、StackBlitz インターフェースについて、もう少し詳しく見てみましょう。

StackBlitz で index.html ファイルを開きます。
event-details-container と description-container を見つけて、予定の詳細を編集してみてください。

テキストを編集すると、StackBlitz の自動ページ再読み込みによって新しいイベントの詳細が表示されます。便利です。

<!-- ... -->

<div id="app">
  <img src="..." />

  <section id="event-details-container">
     <h1>Firebase Meetup</h1>

     <p><i class="material-icons">calendar_today</i> October 30</p>
     <p><i class="material-icons">location_city</i> San Francisco</p>

  </section>

  <hr>

  <section id="firebaseui-auth-container"></section>

  <section id="description-container">
     <h2>What we'll be doing</h2>
     <p>Join us for a day full of Firebase Workshops and Pizza!</p>
  </section>
</div>

<!-- ... -->

アプリのプレビューは次のようになります。

アプリのプレビュー

このステップのスクリーンショット

4. Firebase プロジェクトを作成して設定する

イベント情報を表示するのはゲストにとっては便利ですが、イベントを表示するだけではあまり役に立ちません。このアプリに動的な機能を追加しましょう。そのためには、アプリに Firebase を接続する必要があります。Firebase の利用を開始するには、Firebase プロジェクトを作成して設定する必要があります。

Firebase プロジェクトを作成する

Firebase にログインします。
Firebase コンソールで [プロジェクトを追加]（または [プロジェクトを作成]）をクリックし、Firebase プロジェクトに「Firebase-Web-Codelab」という名前を付けます。
プロジェクト作成オプションをクリックします。Firebase の利用規約が表示されたら同意します。このアプリではアナリティクスを使用しないため、Google アナリティクスの画面で [無効にする] をクリックします。

Firebase プロジェクトの詳細については、Firebase プロジェクトについて理解するをご覧ください。

コンソールで Firebase プロダクトを有効にして設定する

作成しているアプリでは、ウェブアプリで利用可能な次の Firebase プロダクトを使用します。

ユーザーがアプリに簡単にログインできるようにする Firebase Authentication と Firebase UI。
構造化されたデータをクラウドに保存し、データが変更されたときに即座に通知を受け取る Cloud Firestore。
Firebase セキュリティルールでデータベースを保護します。

これらのプロダクトの一部は、特別な構成を必要とするか、Firebase コンソールを使用して有効にする必要があります。

ユーザーがウェブアプリにログインできるように、この Codelab ではメール/パスワードのログイン方法を使用します。

Firebase コンソールの左側のパネルで、[ビルド] > [Authentication] をクリックします。[開始] をクリックします。認証ダッシュボードでは、登録ユーザーの確認、ログインプロバイダの設定、設定の管理を行えます。
[ログイン方法] タブを選択します（または、こちらをクリックしてタブに直接移動します）。
プロバイダのオプションから [メール/パスワード] をクリックし、スイッチを [有効にする] に切り替えて、[保存] をクリックします。

Cloud Firestore を設定する

このウェブアプリは、Cloud Firestore を使用して、チャットメッセージの保存と新しいチャットメッセージの受信を行います。

Cloud Firestore を設定する方法は次のとおりです。

Firebase コンソールの左側のパネルで、[構築] > [Firestore Database] をクリックします。[データベースを作成] をクリックします。
[データベースを作成] をクリックします。
[テストモードで開始] オプションを選択します。セキュリティルールに関する免責条項を確認します。テストモードでは、開発中にデータベースに自由に書き込めます。[次へ] をクリックします。

注意: この Codelab の最初のステージでは、テストモードを使用します。ただし、Codelab の後半では、データベースを保護するための Firebase セキュリティルールを作成します。

アプリ、特に本番環境のアプリでは、セキュリティルールを使用してデータベースを保護することが非常に重要です。セキュリティルールについて詳しくは、Firebase のドキュメントをご覧ください。
データベースのロケーションを選択します（デフォルトをそのまま使用できます）。ただし、この場所は後で変更できません。
[完了] をクリックします。

5. Firebase を追加して構成する

Firebase プロジェクトを作成し、一部のサービスを有効にしたところで、Firebase を使用するコードと使用する Firebase プロジェクトを指定しなければなりません。

Firebase ライブラリを追加する

アプリで Firebase を使用するには、Firebase ライブラリをアプリに追加する必要があります。追加するには、Firebase のドキュメントに記載されているように、複数の方法があります。たとえば、Google の CDN からライブラリを追加することも、npm を使用してローカルにインストールしてから、Browserify を使用している場合はアプリにパッケージ化することもできます。

StackBlitz では自動バンドルが提供されるため、import ステートメントを使用して Firebase ライブラリを追加できます。ライブラリのモジュラー（v9）バージョンを使用します。「ツリーシェイキング」と呼ばれるプロセスにより、ウェブページ全体のサイズを小さくできます。モジュラー SDK について詳しくは、こちらのドキュメントをご覧ください。

このアプリを作成するには、Firebase Authentication、FirebaseUI、Cloud Firestore ライブラリを使用します。この Codelab では、index.js ファイルの先頭に次の import ステートメントがすでに含まれています。今後、各 Firebase ライブラリからさらに多くのメソッドをインポートします。

// Import stylesheets
import './style.css';

// Firebase App (the core Firebase SDK) is always required
import { initializeApp } from 'firebase/app';

// Add the Firebase products and methods that you want to use
import {} from 'firebase/auth';
import {} from 'firebase/firestore';

import * as firebaseui from 'firebaseui';

Firebase ウェブアプリを Firebase プロジェクトに追加する

Firebase コンソールの左上にある [プロジェクトの概要] をクリックして、プロジェクトの概要ページに移動します。
プロジェクトの概要ページの中央にあるウェブアイコンをクリックして、新しい Firebase ウェブアプリを作成します。
ウェブアプリというニックネームでアプリを登録します。
この Codelab では、[このアプリの Firebase Hosting も設定する] のチェックボックスはオンにしないでください。ここでは StackBlitz のプレビューペインを使用します。
[アプリを登録] をクリックします。
Stackblitz が依存関係を管理するため、コンソールに表示される npm install firebase ステップはスキップできます。
Firebase 構成オブジェクトをクリップボードにコピーします。
[コンソールに進む] をクリックします。Firebase 構成オブジェクトをアプリに追加します。
StackBlitz に戻り、index.js ファイルに移動します。
Add Firebase project configuration object here コメント行を見つけて、コメントのすぐ下に構成スニペットを貼り付けます。

initializeApp 関数呼び出しを追加して、独自の Firebase プロジェクト構成を使用して Firebase を設定します。

// ...
// Add Firebase project configuration object here
const firebaseConfig = {
  apiKey: "random-unique-string",
  authDomain: "your-projectId.firebaseapp.com",
  databaseURL: "https://your-projectId.firebaseio.com",
  projectId: "your-projectId",
  storageBucket: "your-projectId.appspot.com",
  messagingSenderId: "random-unique-string",
  appId: "random-unique-string",
};

// Initialize Firebase
initializeApp(firebaseConfig);

6. ユーザーログイン（出欠確認）を追加する

これでアプリに Firebase が追加されたので、Firebase Authentication を使用してユーザーを登録する出欠確認ボタンを設定できます。

ユーザーにメールアドレスでログインするよう促す出欠確認ボタンが必要です。そのためには、FirebaseUI を出欠確認ボタンに接続します。FirebaseUI は、Firebase Auth で構築済みの UI を提供するライブラリです。

FirebaseUI には、次の 2 つの処理を行う構成が必要です（ドキュメントのオプションを参照）。

メール/パスワードのログイン方法を使用することを FirebaseUI に伝えます。
ログイン成功のコールバックを処理し、リダイレクトを回避するために false を返します。単一ページのウェブアプリを作成しているため、ページを更新したくありません。

FirebaseUI Auth を初期化するコードを追加する

StackBlitz で index.js ファイルに移動します。

上部で firebase/auth インポートステートメントを見つけ、次のように getAuth と EmailAuthProvider を追加します。

// ...
// Add the Firebase products and methods that you want to use
import { getAuth, EmailAuthProvider } from 'firebase/auth';

import {} from 'firebase/firestore';

次のように、auth オブジェクトへの参照を initializeApp の直後に保存します。
```
initializeApp(firebaseConfig);
auth = getAuth();
```
FirebaseUI の構成が開始時のコードですでに提供されていることに注目してください。メール認証プロバイダを使用するようにすでに設定されています。

index.js の main() 関数の下部に、次のように FirebaseUI の初期化ステートメントを追加します。

async function main() {
  // ...

  // Initialize the FirebaseUI widget using Firebase
  const ui = new firebaseui.auth.AuthUI(auth);
}
main();

HTML に出欠確認ボタンを追加する

StackBlitz で index.html ファイルに移動します。
以下の例のように、event-details-container 内に出欠確認ボタンの HTML を追加します。

この Codelab には、index.js ファイル内にすでにこれらの ID のフックがあるため、以下に示す同じ id 値を使用することに注意してください。

index.html ファイルには、ID が firebaseui-auth-container のコンテナがあります。この ID を、ログインを保持するために FirebaseUI に渡します。
```


<section id="event-details-container">
    
    
    <button id="startRsvp">RSVP</button>
</section>
<hr>
<section id="firebaseui-auth-container"></section>

```
アプリのプレビュー
出欠確認ボタンにリスナーを設定し、FirebaseUI の開始関数を呼び出します。これにより、ログインウィンドウを表示することを FirebaseUI に指示します。

index.js の main() 関数の末尾に次のコードを追加します。
```
async function main() {
  // ...

  // Listen to RSVP button clicks
  startRsvpButton.addEventListener("click",
   () => {
        ui.start("#firebaseui-auth-container", uiConfig);
  });
}
main();
```

アプリへのログインをテストする

StackBlitz のプレビューウィンドウで、出欠確認ボタンをクリックしてアプリにログインします。
- この Codelab のメール確認ステップは設定しないため、架空のメールアドレスであっても任意のメールアドレスを使用できます。
- auth/operation-not-allowed または The given sign-in provider is disabled for this Firebase project というエラーメッセージが表示された場合は、Firebase コンソールでログインプロバイダとしてメール/パスワードが有効になっていることを確認してください。
アプリのプレビュー
Firebase コンソールの [Authentication] ダッシュボードに移動します。[Users] タブに、アプリにログインするために入力したアカウント情報が表示されます。

UI に認証状態を追加する

次に、UI がログイン状態を反映していることを確認します。

ユーザーのログインステータスが変わるたびに通知を受ける Firebase Authentication の状態リスナーコールバックを使用します。現在ログインしているユーザーがいる場合は、アプリで [出欠確認] ボタンが [ログアウト] ボタンに切り替わります。

StackBlitz で index.js ファイルに移動します。

上部で firebase/auth インポートステートメントを見つけ、次のように signOut と onAuthStateChanged を追加します。

// ...
// Add the Firebase products and methods that you want to use
import {
  getAuth,
  EmailAuthProvider,
  signOut,
  onAuthStateChanged
} from 'firebase/auth';

import {} from 'firebase/firestore';

main() 関数の末尾に次のコードを追加します。

async function main() {
  // ...

  // Listen to the current Auth state
  onAuthStateChanged(auth, user => {
    if (user) {
      startRsvpButton.textContent = 'LOGOUT';
    } else {
      startRsvpButton.textContent = 'RSVP';
    }
  });
}
main();

ボタンリスナーで、現在のユーザーが存在するかどうかを確認してログアウトします。これを行うには、現在の startRsvpButton.addEventListener を次のように置き換えます。

// ...
// Called when the user clicks the RSVP button
startRsvpButton.addEventListener('click', () => {
  if (auth.currentUser) {
    // User is signed in; allows user to sign out
    signOut(auth);
  } else {
    // No user is signed in; allows user to sign in
    ui.start('#firebaseui-auth-container', uiConfig);
  }
});

これで、アプリのボタンに LOGOUT が表示され、クリックすると RSVP に戻ります。

アプリのプレビュー

このステップのスクリーンショット

7. Cloud Firestore にメッセージを書き込む

ユーザーがアクセスしていることがわかっていれば、アプリ上で他にすべきことをゲストに提供しましょう。ゲストブックにメッセージを残してもらえるとしたらどうでしょうか。来場を楽しみにしている理由や、誰に会いたいと思っているのかを共有できる。

ユーザーがアプリに作成したチャットメッセージを保存するには、Cloud Firestore を使用します。

データモデル

Cloud Firestore は NoSQL データベースであり、データベースに保存されたデータはコレクション、ドキュメント、フィールド、サブコレクションに分割されます。チャットの各メッセージを、guestbook という最上位のコレクションにドキュメントとして保存します。

複数のメッセージドキュメントを含むゲストブックコレクションを示す Firestore データモデルのグラフィック

Firestore にメッセージを追加する

このセクションでは、ユーザーが新しいメッセージをデータベースに書き込む機能を追加します。まず、UI 要素（メッセージフィールドと送信ボタン）の HTML を追加します。次に、これらの要素をデータベースに接続するコードを追加します。

メッセージフィールドと送信ボタンの UI 要素を追加するには:

StackBlitz で index.html ファイルに移動します。

guestbook-container を見つけて次の HTML を追加し、メッセージ入力フィールドと送信ボタンを備えたフォームを作成します。

<!-- ... -->

 <section id="guestbook-container">
   <h2>Discussion</h2>

   <form id="leave-message">
     <label>Leave a message: </label>
     <input type="text" id="message">
     <button type="submit">
       <i class="material-icons">send</i>
       <span>SEND</span>
     </button>
   </form>

 </section>

<!-- ... -->

アプリのプレビュー

このステップのスクリーンショット

ユーザーが [送信] ボタンをクリックすると、以下のコードスニペットがトリガーされます。メッセージ入力フィールドの内容をデータベースの guestbook コレクションに追加します。具体的には、addDoc メソッドにより、メッセージコンテンツを（自動生成された ID を持つ）新しいドキュメント guestbook コレクションに追加します。

StackBlitz で index.js ファイルに移動します。

上部で firebase/firestore インポートステートメントを見つけ、次のように getFirestore、addDoc、collection を追加します。

// ...

// Add the Firebase products and methods that you want to use
import {
  getAuth,
  EmailAuthProvider,
  signOut,
  onAuthStateChanged
} from 'firebase/auth';

import {
  getFirestore,
  addDoc,
  collection
} from 'firebase/firestore';

次に、Firestore db オブジェクトへの参照を initializeApp の直後に保存します。
```
initializeApp(firebaseConfig);
auth = getAuth();
db = getFirestore();
```

main() 関数の最後に、次のコードを追加します。

auth.currentUser.uid は、Firebase Authentication がすべてのログインユーザーに付与する自動生成された一意の ID への参照です。

async function main() {
  // ...

  // Listen to the form submission
  form.addEventListener('submit', async e => {
    // Prevent the default form redirect
    e.preventDefault();
    // Write a new message to the database collection "guestbook"
    addDoc(collection(db, 'guestbook'), {
      text: input.value,
      timestamp: Date.now(),
      name: auth.currentUser.displayName,
      userId: auth.currentUser.uid
    });
    // clear message input field
    input.value = '';
    // Return false to avoid redirect
    return false;
  });
}
main();

ログインしているユーザーのみにゲストブックを表示する

ゲストのチャットを誰にも見せたくない場合、チャットを保護するためにできることの一つは、ログインしているユーザーのみにゲストブックの閲覧を許可することです。ただし、独自のアプリでは Firebase セキュリティルールを使用してデータベースを保護する必要もあります。（セキュリティルールについては、この Codelab の後半で詳しく説明します）。

StackBlitz で index.js ファイルに移動します。

ゲストブックの表示 / 非表示を切り替えるには、onAuthStateChanged リスナーを編集します。

// ...

// Listen to the current Auth state
onAuthStateChanged(auth, user => {
  if (user) {
    startRsvpButton.textContent = 'LOGOUT';
    // Show guestbook to logged-in users
    guestbookContainer.style.display = 'block';
  } else {
    startRsvpButton.textContent = 'RSVP';
    // Hide guestbook for non-logged-in users
    guestbookContainer.style.display = 'none';
  }
});

メッセージの送信をテストする

アプリにログインしていることを確認します。
「こんにちは」などのメッセージを入力して、[送信] をクリックします。

この操作により、Cloud Firestore データベースにメッセージが書き込まれます。ただし、データの取得はまだ実装する必要があるため、実際のウェブアプリにはメッセージが表示されません。あとでこれを行います。

ただし、新しく追加されたメッセージは Firebase コンソールで確認できます。

Firebase コンソールの [Firestore Database] ダッシュボードに、新しく追加したメッセージとともに guestbook コレクションが表示されます。メッセージの送信を続けると、ゲストブックコレクションには次のような多数のドキュメントが含まれます。

Firebase コンソール

このステップのスクリーンショット

8. メッセージを読む

メッセージを同期する

ゲストがデータベースにメッセージを書き込むことができるのは素晴らしいことですが、アプリではまだメッセージを確認できません。

メッセージを表示するには、データが変更されたときにトリガーされるリスナーを追加してから、新しいメッセージを表示する UI 要素を作成する必要があります。

新たに追加されたアプリからメッセージをリッスンするコードを追加します。まず、メッセージを表示するセクションを HTML に追加します。

StackBlitz で index.html ファイルに移動します。

guestbook-container に、ID が guestbook の新しいセクションを追加します。

<!-- ... -->

  <section id="guestbook-container">
   <h2>Discussion</h2>

   <form><!-- ... --></form>

   <section id="guestbook"></section>

 </section>

<!-- ... -->

次に、データに加えられた変更をリッスンするリスナーを登録します。

StackBlitz で index.js ファイルに移動します。
上部で firebase/firestore インポートステートメントを見つけ、次のように query、orderBy、onSnapshot を追加します。
```
// ...
import {
  getFirestore,
  addDoc,
  collection,
  query,
  orderBy,
  onSnapshot
} from 'firebase/firestore';
```

main() 関数の最後に次のコードを追加して、データベース内のすべてのドキュメント（ゲストブックメッセージ）をループします。このコードの内容について詳しくは、以下のスニペットをご覧ください。

async function main() {
  // ...

  // Create query for messages
  const q = query(collection(db, 'guestbook'), orderBy('timestamp', 'desc'));
  onSnapshot(q, snaps => {
    // Reset page
    guestbook.innerHTML = '';
    // Loop through documents in database
    snaps.forEach(doc => {
      // Create an HTML entry for each document and add it to the chat
      const entry = document.createElement('p');
      entry.textContent = doc.data().name + ': ' + doc.data().text;
      guestbook.appendChild(entry);
    });
  });
}
main();

データベース内のメッセージをリッスンするために、collection 関数を使用して特定のコレクションに対するクエリを作成しました。上記のコードは、チャットメッセージが保存されている guestbook コレクションの変更をリッスンします。また、メッセージは日付で並べ替えられ、orderBy('timestamp', 'desc') を使用して最新のメッセージが一番上に表示されます。

onSnapshot 関数は、使用するクエリとコールバック関数の 2 つのパラメータを受け取ります。クエリに一致するドキュメントに変更があった場合、コールバック関数がトリガーされます。メールが削除、変更、追加された場合が該当します。詳細については、Cloud Firestore のドキュメントをご覧ください。

メッセージの同期をテストする

Cloud Firestore は、データベースにサブスクライブしているクライアントとデータを自動的かつ瞬時に同期します。

前にデータベースで作成したメッセージがアプリに表示されます。新しいメッセージを自由に書いてください。すぐに表示されます。
複数のウィンドウやタブでワークスペースを開いた場合、メッセージはタブ間でリアルタイムで同期されます。
（省略可）Firebase コンソールの [Database] セクションで、新しいメッセージを手動で削除、変更、追加してみることができます。変更内容は UI に表示されます。

お疲れさまでした。アプリで Cloud Firestore ドキュメントを読み取っています。

アプリのプレビュー

このステップのスクリーンショット

9. 基本的なセキュリティルールを設定する

最初に、テストモードを使用するように Cloud Firestore をセットアップしました。つまり、データベースは読み取りと書き込みに対してオープンな状態になっています。ただし、テストモードは開発の非常に初期段階でのみ使用してください。ベストプラクティスとして、アプリの開発時にデータベースのセキュリティルールをセットアップすることをおすすめします。セキュリティは、アプリの構造と動作に不可欠であるべきです。

セキュリティルールを使用すると、データベース内のドキュメントやコレクションへのアクセスを制御できます。柔軟なルール構文により、データベース全体に対するすべての書き込みから特定のドキュメントに対するオペレーションまで、あらゆるものに一致するルールを作成できます。

Firebase コンソールで Cloud Firestore のセキュリティルールを作成できます。

Firebase コンソールの [構築] セクションで [Firestore Database] をクリックし、[ルール] タブを選択します（または、こちらをクリックして、[ルール] タブに直接移動します）。
次のデフォルトのセキュリティルールが表示されます。公開アクセスの制限時間は、今日から数週間後になります。

このステップのスクリーンショット

コレクションを特定する

まず、アプリがデータを書き込むコレクションを特定します。

既存の match /{document=**} 句を削除します。ルールは次のようになります。

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
  }
}

match /databases/{database}/documents で、保護するコレクションを特定します。

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
     // You'll add rules here in the next step.
  }
}

セキュリティルールを追加する

各ゲストブックドキュメントのフィールドとして認証 UID を使用したため、認証 UID を取得して、ドキュメントに書き込もうとするユーザーが一致する認証 UID を持っていることを確認できます。

次のように、読み取り / 書き込みルールをルールセットに追加します。

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
      allow read: if request.auth.uid != null;
      allow create:
        if request.auth.uid == request.resource.data.userId;
    }
  }
}

[公開] をクリックして新しいルールをデプロイします。ゲストブックでは、ログインしているユーザーだけがメッセージ（すべてのメッセージ）を読むことができますが、メッセージの作成にはユーザー ID を使用する必要があります。また、メッセージの編集や削除も許可されません。

検証ルールを追加する

データの入力規則を追加して、想定されているすべてのフィールドがドキュメントに存在することを確認します。

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /guestbook/{entry} {
      allow read: if request.auth.uid != null;
      allow create:
      if request.auth.uid == request.resource.data.userId
          && "name" in request.resource.data
          && "text" in request.resource.data
          && "timestamp" in request.resource.data;
    }
  }
}

[公開] をクリックして新しいルールをデプロイします。

リスナーをリセットする

今度は認証されたユーザーのみがログインできるようになったため、ゲストブックの firestore クエリを Authentication リスナー内に移動する必要があります。そうしないと、権限エラーが発生し、ユーザーがログアウトしたときにアプリの接続が解除されます。

StackBlitz で index.js ファイルに移動します。

ゲストブックコレクションの onSnapshot リスナーを subscribeGuestbook という新しい関数に pull します。また、onSnapshot 関数の結果を guestbookListener 変数に代入します。

Firestore onSnapshot リスナーは、後でスナップショットリスナーをキャンセルするために使用できる登録解除関数を返します。

// ...
// Listen to guestbook updates
function subscribeGuestbook() {
  const q = query(collection(db, 'guestbook'), orderBy('timestamp', 'desc'));
  guestbookListener = onSnapshot(q, snaps => {
    // Reset page
    guestbook.innerHTML = '';
    // Loop through documents in database
    snaps.forEach(doc => {
      // Create an HTML entry for each document and add it to the chat
      const entry = document.createElement('p');
      entry.textContent = doc.data().name + ': ' + doc.data().text;
      guestbook.appendChild(entry);
    });
  });
}

下に unsubscribeGuestbook という新しい関数を追加します。guestbookListener 変数が null でないことを確認してから、関数を呼び出してリスナーをキャンセルします。
```
// ...
// Unsubscribe from guestbook updates
function unsubscribeGuestbook() {
  if (guestbookListener != null) {
    guestbookListener();
    guestbookListener = null;
  }
}
```

最後に、新しい関数を onAuthStateChanged コールバックに追加します。

if (user) の末尾に subscribeGuestbook() を追加します。

else ステートメントの末尾に unsubscribeGuestbook() を追加します。

// ...
// Listen to the current Auth state
onAuthStateChanged(auth, user => {
  if (user) {
    startRsvpButton.textContent = 'LOGOUT';
    // Show guestbook to logged-in users
    guestbookContainer.style.display = 'block';
    // Subscribe to the guestbook collection
    subscribeGuestbook();
  } else {
    startRsvpButton.textContent = 'RSVP';
    // Hide guestbook for non-logged-in users
    guestbookContainer.style.display = 'none';
    // Unsubscribe from the guestbook collection
    unsubscribeGuestbook();
  }
});

10. ボーナスステップ: 学習した内容を実践する

参加者の出欠確認状況を記録する

現在のところ、お客様のアプリでは、ユーザーがイベントに興味を持った場合にチャットを開始できます。また、相手が参加しているかどうかを知る唯一の方法は、その人がチャットで投稿することです。イベントを整理して、何人の人が来場するか知らせましょう。

イベントへの参加を希望する人を登録して、来場者数の件数を収集する切り替えボタンを追加します。

StackBlitz で index.html ファイルに移動します。

guestbook-container で、次のように [はい] と [いいえ] ボタンのセットを追加します。

<!-- ... -->
  <section id="guestbook-container">
   <h2>Are you attending?</h2>
     <button id="rsvp-yes">YES</button>
     <button id="rsvp-no">NO</button>

   <h2>Discussion</h2>

   <!-- ... -->

 </section>
<!-- ... -->

アプリのプレビュー

このステップのスクリーンショット

次に、ボタンのクリックに対するリスナーを登録します。ユーザーが [YES] をクリックした場合は、ユーザーの認証 UID を使用してレスポンスをデータベースに保存します。

StackBlitz で index.js ファイルに移動します。

上部で firebase/firestore インポートステートメントを見つけ、次のように doc、setDoc、where を追加します。

// ...
// Add the Firebase products and methods that you want to use
import {
  getFirestore,
  addDoc,
  collection,
  query,
  orderBy,
  onSnapshot,
  doc,
  setDoc,
  where
} from 'firebase/firestore';

main() 関数の最後に次のコードを追加して、出欠確認ステータスをリッスンします。

async function main() {
  // ...

  // Listen to RSVP responses
  rsvpYes.onclick = async () => {
  };
  rsvpNo.onclick = async () => {
  };
}
main();

次に、attendees という新しいコレクションを作成し、出欠確認ボタンがクリックされたときにドキュメントの参照を登録します。クリックするボタンに応じて、参照を true または false に設定します。

まず、rsvpYes の場合:

// ...
// Listen to RSVP responses
rsvpYes.onclick = async () => {
  // Get a reference to the user's document in the attendees collection
  const userRef = doc(db, 'attendees', auth.currentUser.uid);

  // If they RSVP'd yes, save a document with attendi()ng: true
  try {
    await setDoc(userRef, {
      attending: true
    });
  } catch (e) {
    console.error(e);
  }
};

rsvpNo についても同じ手順ですが、値は false にします。

rsvpNo.onclick = async () => {
  // Get a reference to the user's document in the attendees collection
  const userRef = doc(db, 'attendees', auth.currentUser.uid);

  // If they RSVP'd yes, save a document with attending: true
  try {
    await setDoc(userRef, {
      attending: false
    });
  } catch (e) {
    console.error(e);
  }
};

セキュリティルールを更新する

すでにルールが設定されているため、ボタンを使って追加する新しいデータは拒否されます。

`attendees` コレクションへの追加を許可する

attendees コレクションに追加できるようにするには、ルールを更新する必要があります。

attendees コレクションでは、認証 UID をドキュメント名として使用したため、これを取得して、送信者の uid が作成しているドキュメントと同じであることを確認できます。参加者リストには個人データがないため、すべてのユーザーに読み取りを許可しますが、更新できるのは作成者のみにします。
```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ... //
    match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId;
    }
  }
}
```
[公開] をクリックして新しいルールをデプロイします。

検証ルールを追加する

いくつかのデータ入力規則を追加して、想定されているすべてのフィールドがドキュメントに存在することを確認します。

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ... //
    match /attendees/{userId} {
      allow read: if true;
      allow write: if request.auth.uid == userId
          && "attending" in request.resource.data;

    }
  }
}

ルールをデプロイするには、忘れずに [公開] をクリックします。

（省略可）ボタンをクリックした場合の結果が表示されます。Firebase コンソールで Cloud Firestore ダッシュボードに移動します。

出欠確認のステータスを確認する

レスポンスを記録したので、次は誰が来ているかを確認し、それを UI に反映しましょう。

StackBlitz で index.html ファイルに移動します。

description-container に、ID が number-attending の新しい要素を追加します。

<!-- ... -->

 <section id="description-container">
     <!-- ... -->
     <p id="number-attending"></p>
 </section>

<!-- ... -->

次に、attendees コレクションのリスナーを登録し、YES レスポンスの数をカウントします。

StackBlitz で index.js ファイルに移動します。

main() 関数の最後に次のコードを追加して、出欠確認ステータスをリッスンし、「はい」のクリック数をカウントします。

async function main() {
  // ...

  // Listen for attendee list
  const attendingQuery = query(
    collection(db, 'attendees'),
    where('attending', '==', true)
  );
  const unsubscribe = onSnapshot(attendingQuery, snap => {
    const newAttendeeCount = snap.docs.length;
    numberAttending.innerHTML = newAttendeeCount + ' people going';
  });
}
main();

最後に、現在のステータスに対応するボタンをハイライト表示しましょう。

現在の認証 UID の attendees コレクションにエントリがあるかどうかを確認する関数を作成して、ボタンクラスを clicked に設定します。

// ...
// Listen for attendee list
function subscribeCurrentRSVP(user) {
  const ref = doc(db, 'attendees', user.uid);
  rsvpListener = onSnapshot(ref, doc => {
    if (doc && doc.data()) {
      const attendingResponse = doc.data().attending;

      // Update css classes for buttons
      if (attendingResponse) {
        rsvpYes.className = 'clicked';
        rsvpNo.className = '';
      } else {
        rsvpYes.className = '';
        rsvpNo.className = 'clicked';
      }
    }
  });
}

また、サブスクライブを解除する関数を作成します。ユーザーがログアウトしたときに使用されます。

// ...
function unsubscribeCurrentRSVP() {
  if (rsvpListener != null) {
    rsvpListener();
    rsvpListener = null;
  }
  rsvpYes.className = '';
  rsvpNo.className = '';
}

Authentication リスナーから関数を呼び出します。

// ...
// Listen to the current Auth state
  // Listen to the current Auth state
  onAuthStateChanged(auth, user => {
    if (user) {
      startRsvpButton.textContent = 'LOGOUT';
      // Show guestbook to logged-in users
      guestbookContainer.style.display = 'block';

      // Subscribe to the guestbook collection
      subscribeGuestbook();
      // Subscribe to the user's RSVP
      subscribeCurrentRSVP(user);
    } else {
      startRsvpButton.textContent = 'RSVP';
      // Hide guestbook for non-logged-in users
      guestbookContainer.style.display = 'none'
      ;
      // Unsubscribe from the guestbook collection
      unsubscribeGuestbook();
      // Unsubscribe from the guestbook collection
      unsubscribeCurrentRSVP();
    }
  });

複数のユーザーでログインしてみると、[はい] ボタンをクリックするたびにユーザー数が増えます。

アプリのプレビュー

このステップのスクリーンショット

11. お疲れさまでした

ここでは、Firebase を使用して、インタラクティブなリアルタイムのウェブアプリケーションを構築しました。

学習した内容

Firebase Authentication
FirebaseUI
Cloud Firestore
Firebase セキュリティルール

次のステップ

Firebase デベロッパーワークフローの詳細については、アプリを完全にローカルでテストして実行する方法については、Firebase Emulator Codelab をご覧ください。
他の Firebase プロダクトの詳細については、ユーザーがアップロードした画像ファイルを保存する場合は、ユーザーに通知を送信するか。Firebase ウェブ Codelab で、さらに多くのウェブ向け Firebase プロダクトについて掘り下げている Codelab をご確認ください。
Cloud Firestore の詳細については、サブコレクションやトランザクションについて知りたい場合は、Cloud Firestore についてより深く学習するための Codelab については、Cloud Firestore ウェブ Codelab をご覧ください。または、こちらの Cloud Firestore についての YouTube シリーズをご覧ください。

詳細

Firebase サイト: firebase.google.com
Firebase YouTube チャンネル

いかがでしたか？

皆様からのご意見をお待ちしております。こちらの簡単なフォームにご記入ください。

ウェブ向け Firebase を理解する

1. 概要

ラボの内容

必要なもの

2. 開始用コードを取得する

3. 予定情報を編集する

アプリのプレビュー

4. Firebase プロジェクトを作成して設定する

Firebase プロジェクトを作成する

コンソールで Firebase プロダクトを有効にして設定する

Firebase Authentication でメールによるログインを有効にする

Cloud Firestore を設定する

5. Firebase を追加して構成する

Firebase ライブラリを追加する

Firebase ウェブアプリを Firebase プロジェクトに追加する

6. ユーザー ログイン（出欠確認）を追加する

メールログインと FirebaseUI でユーザーを認証する

FirebaseUI Auth を初期化するコードを追加する

HTML に出欠確認ボタンを追加する

アプリへのログインをテストする

UI に認証状態を追加する

アプリのプレビュー

7. Cloud Firestore にメッセージを書き込む

データモデル

Firestore にメッセージを追加する

アプリのプレビュー

ログインしているユーザーのみにゲストブックを表示する

メッセージの送信をテストする

Firebase コンソール

8. メッセージを読む

メッセージを同期する

メッセージの同期をテストする

アプリのプレビュー

9. 基本的なセキュリティ ルールを設定する

コレクションを特定する

セキュリティ ルールを追加する

検証ルールを追加する

リスナーをリセットする

10. ボーナス ステップ: 学習した内容を実践する

参加者の出欠確認状況を記録する

アプリのプレビュー

セキュリティ ルールを更新する

attendees コレクションへの追加を許可する

検証ルールを追加する

出欠確認のステータスを確認する

アプリのプレビュー

11. お疲れさまでした

学習した内容

次のステップ

詳細

いかがでしたか？

6. ユーザーログイン（出欠確認）を追加する

9. 基本的なセキュリティルールを設定する

セキュリティルールを追加する

10. ボーナスステップ: 学習した内容を実践する

セキュリティルールを更新する

`attendees` コレクションへの追加を許可する