ウェブ向け Firebase を理解する

1. 概要

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

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

ラボの内容

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

必要なもの

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

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

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

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

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

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

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

3. 予定情報を編集する

この Codelab の開始資料では、ウェブアプリ用の構造(いくつかのスタイルシートと 2 つの HTML コンテナなど)を提供します。この Codelab の後半で、これらのコンテナを Firebase にフックします。

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

  1. StackBlitz で index.html ファイルを開きます。
  2. event-details-containerdescription-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 プロジェクトを作成する

  1. Firebase にログインします。
  2. Firebase コンソールで [プロジェクトを追加](または [プロジェクトを作成])をクリックし、Firebase プロジェクトに「Firebase-Web-Codelab」という名前を付けます。

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

  3. プロジェクト作成オプションをクリックします。プロンプトが表示されたら、Firebase の利用規約に同意します。このアプリではアナリティクスを使用しないため、Google アナリティクスの画面で [有効化しない] をクリックします。

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

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

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

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

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

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

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

  1. Firebase コンソールの左側のパネルで、[ビルド] > [Authentication] をクリックします。[開始] をクリックします。すると、認証ダッシュボードが表示され、登録したユーザーの確認、ログイン プロバイダの構成、設定の管理を行うことができます。

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

  2. [ログイン方法] タブを選択します(またはここをクリックすると、このタブに直接移動できます)。

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

  3. プロバイダのオプションから [メール/パスワード] をクリックし、[有効にする] に切り替えて、[保存] をクリックします。

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

Cloud Firestore を設定する

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

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

  1. Firebase コンソールの左側のパネルで、[Build] > [Firestore Database] をクリックします。次に、[データベースを作成] をクリックします。
  2. [データベースを作成] をクリックします。

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

  3. [テストモードで開始] オプションを選択します。セキュリティ ルールに関する免責条項を読みます。テストモードを使用すると、開発中にデータベースに自由に書き込むことができます。[次へ] をクリックします。

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

  4. データベースの場所を選択します(デフォルトをそのまま使用できます)。ただし、この場所を後で変更することはできません。

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

  5. [完了] をクリックします。

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

Firebase プロジェクトを作成し、いくつかのサービスを有効にしたら、Firebase を使用するコードと、使用する Firebase プロジェクトを指定する必要があります。

Firebase ライブラリを追加する

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

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

このアプリをビルドするには、Firebase Authentication、FirebaseUI、Cloud Firestore の各ライブラリを使用します。この Codelab では、次の import ステートメントがすでに index.js ファイルの先頭に含まれています。この後、各 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 プロジェクトに追加する

  1. Firebase コンソールに戻り、左上の [プロジェクトの概要] をクリックして、プロジェクトの概要ページに移動します。
  2. プロジェクトの概要ページの中央にあるウェブアイコン ウェブアプリ アイコン をクリックして、新しい Firebase ウェブアプリを作成します。

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

  3. アプリをニックネーム Web App で登録します。
  4. この Codelab では、[このアプリの Firebase Hosting も設定します] の横にあるチェックボックスをオンにしないでください。ここでは、StackBlitz のプレビュー ペインを使用します。
  5. [アプリを登録] をクリックします。

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

  6. Firebase 構成オブジェクトをクリップボードにコピーします。

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

  7. [コンソールに進む] をクリックして、Firebase 構成オブジェクトをアプリに追加します。
  8. StackBlitz に戻り、index.js ファイルに移動します。
  9. Add Firebase project configuration object here コメント行を見つけて、コメントのすぐ下に構成スニペットを貼り付けます。
  10. 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. ユーザー ログインを追加する(RSVP)

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

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

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

FirebaseUI には、次の 2 つのことを行う構成(ドキュメントのオプションを参照)が必要です。

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

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

  1. StackBlitz で index.js ファイルに移動します。
  2. 上部で firebase/auth インポート ステートメントを見つけ、次のように getAuthEmailAuthProvider を追加します。
    // ...
    // Add the Firebase products and methods that you want to use
    import { getAuth, EmailAuthProvider } from 'firebase/auth';
    
    import {} from 'firebase/firestore';
    
  3. 次のように、initializeApp の直後に auth オブジェクトへの参照を保存します。
    initializeApp(firebaseConfig);
    auth = getAuth();
    
  4. FirebaseUI 構成が開始コードですでに指定されていることに注目してください。メール認証プロバイダを使用するようにすでに設定されています。
  5. index.jsmain() 関数の最後に、次のように FirebaseUI 初期化ステートメントを追加します。
    async function main() {
      // ...
    
      // Initialize the FirebaseUI widget using Firebase
      const ui = new firebaseui.auth.AuthUI(auth);
    }
    main();
    
    

HTML への出欠確認ボタンの追加

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

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

    index.html ファイルには、ID が firebaseui-auth-container のコンテナがあります。この ID を FirebaseUI に渡してログインを保持します。
    <!-- ... -->
    
    <section id="event-details-container">
        <!-- ... -->
        <!-- ADD THE RSVP BUTTON HERE -->
        <button id="startRsvp">RSVP</button>
    </section>
    <hr>
    <section id="firebaseui-auth-container"></section>
    <!-- ... -->
    
    アプリのプレビュー

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

  3. RSVP ボタンにリスナーを設定し、FirebaseUI start 関数を呼び出します。これにより、ログイン ウィンドウを表示したいと FirebaseUI に伝えられます。

    次のコードを index.jsmain() 関数の一番下に追加します。
    async function main() {
      // ...
    
      // Listen to RSVP button clicks
      startRsvpButton.addEventListener("click",
       () => {
            ui.start("#firebaseui-auth-container", uiConfig);
      });
    }
    main();
    

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

  1. StackBlitz のプレビュー ウィンドウで、[RSVP] ボタンをクリックしてアプリにログインします。
    • この Codelab ではメール確認の手順を設定していないため、任意のメールアドレスを使用できます(偽のメールアドレスでもかまいません)。
    • auth/operation-not-allowed」または「The given sign-in provider is disabled for this Firebase project」というエラー メッセージが表示された場合は、Firebase コンソールでメール/パスワードをログイン プロバイダとして有効にしてください。
    アプリのプレビュー

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

  2. Firebase コンソールの [Authentication] ダッシュボードに移動します。[ユーザー] タブに、アプリにログインするために入力したアカウント情報が表示されます。

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

UI に認証状態を追加する

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

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

  1. StackBlitz で index.js ファイルに移動します。
  2. 上部で firebase/auth インポート ステートメントを見つけ、次のように signOutonAuthStateChanged を追加します。
    // ...
    // Add the Firebase products and methods that you want to use
    import {
      getAuth,
      EmailAuthProvider,
      signOut,
      onAuthStateChanged
    } from 'firebase/auth';
    
    import {} from 'firebase/firestore';
    
  3. main() 関数の最後に次のコードを追加します。
    async function main() {
      // ...
    
      // Listen to the current Auth state
      onAuthStateChanged(auth, user => {
        if (user) {
          startRsvpButton.textContent = 'LOGOUT';
        } else {
          startRsvpButton.textContent = 'RSVP';
        }
      });
    }
    main();
    
  4. ボタンリスナーで、現在のユーザーがいるかどうかを確認してログアウトします。これを行うには、現在の 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 要素を追加するには:

  1. StackBlitz で index.html ファイルに移動します。
  2. 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 メソッドはメッセージ コンテンツを guestbook コレクションの新しいドキュメント(自動生成された ID を持つ)に追加します。

  1. StackBlitz で index.js ファイルに移動します。
  2. 上部で firebase/firestore インポート ステートメントを見つけ、次のように getFirestoreaddDoccollection を追加します。
    // ...
    
    // 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';
    
  3. 次に、initializeApp の直後に Firestore db オブジェクトへの参照を保存します。
    initializeApp(firebaseConfig);
    auth = getAuth();
    db = getFirestore();
    
  4. 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();
    

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

ゲストのチャットは誰にも見られないようにする必要があります。チャットを保護する方法の 1 つは、ログインしているユーザーのみがゲストブックを閲覧できるようにすることです。とはいえ、実際のアプリでは Firebase セキュリティ ルールを使用してデータベースを保護することも必要です。(セキュリティ ルールについては、この Codelab で後ほど詳しく説明します)。

  1. StackBlitz で index.js ファイルに移動します。
  2. 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';
      }
    });
    

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

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

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

新しく追加されたメッセージは Firebase コンソールに表示されます。

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

Firebase コンソール

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

8. メッセージを読む

メッセージを同期する

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

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

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

  1. StackBlitz で index.html ファイルに移動します。
  2. guestbook-container に、ID が guestbook の新しいセクションを追加します。
    <!-- ... -->
    
      <section id="guestbook-container">
       <h2>Discussion</h2>
    
       <form><!-- ... --></form>
    
       <section id="guestbook"></section>
    
     </section>
    
    <!-- ... -->
    

次に、データに対する変更をリッスンするリスナーを登録します。

  1. StackBlitz で index.js ファイルに移動します。
  2. 上部で firebase/firestore インポート ステートメントを見つけ、次のように queryorderByonSnapshot を追加します。
    // ...
    import {
      getFirestore,
      addDoc,
      collection,
      query,
      orderBy,
      onSnapshot
    } from 'firebase/firestore';
    
  3. 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 コンソールの [データベース] セクションで、メッセージを手動で削除、変更、追加してみてください。変更内容は UI に表示されます。

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

アプリのプレビュー

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

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

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

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

Cloud Firestore のセキュリティ ルールは Firebase コンソールで記述できます。

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

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

コレクションを特定する

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

  1. 既存の match /{document=**} 句を削除します。ルールは次のようになります。
    rules_version = '2';
    service cloud.firestore {
      match /databases/{database}/documents {
      }
    }
    
  2. 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 と一致することを確認できます。

  1. 以下のように、読み取りルールと書き込みルールをルールセットに追加します。
    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;
        }
      }
    }
    
  2. [公開] をクリックして新しいルールをデプロイします。ゲストブックの場合、メッセージ(どのようなメッセージでも可)を読むことができるのはログインしたユーザーのみですが、メッセージを作成するにはユーザー ID を使用する必要があります。また、メッセージの編集や削除もできません。

確認ルールを追加する

  1. データ検証を追加して、想定されるすべてのフィールドがドキュメントに存在することを確認します。
    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;
        }
      }
    }
    
  2. [公開] をクリックして新しいルールをデプロイします。

リスナーをリセットする

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

  1. StackBlitz で index.js ファイルに移動します。
  2. ゲストブック コレクションの 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);
        });
      });
    }
    
  3. 下に unsubscribeGuestbook という新しい関数を追加します。guestbookListener 変数が null でないかどうかを確認し、関数を呼び出してリスナーをキャンセルします。
    // ...
    // Unsubscribe from guestbook updates
    function unsubscribeGuestbook() {
      if (guestbookListener != null) {
        guestbookListener();
        guestbookListener = null;
      }
    }
    

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

  1. if (user) の最後に subscribeGuestbook() を追加します。
  2. 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. ボーナス ステップ: 学習した内容の実践

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

現時点では、イベントに興味があるユーザーはチャットを開始できるだけです。また、相手がチャットに参加しているかどうかを知る唯一の方法は、そのユーザーがチャットに投稿した場合です。予定を整理して、参加人数を知らせましょう。

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

  1. StackBlitz で index.html ファイルに移動します。
  2. 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>
    <!-- ... -->
    

アプリのプレビュー

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

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

  1. StackBlitz で index.js ファイルに移動します。
  2. 上部で firebase/firestore インポート ステートメントを見つけ、次のように docsetDocwhere を追加します。
    // ...
    // Add the Firebase products and methods that you want to use
    import {
      getFirestore,
      addDoc,
      collection,
      query,
      orderBy,
      onSnapshot,
      doc,
      setDoc,
      where
    } from 'firebase/firestore';
    
  3. main() 関数の最後に次のコードを追加して、出欠確認ステータスをリッスンします。
    async function main() {
      // ...
    
      // Listen to RSVP responses
      rsvpYes.onclick = async () => {
      };
      rsvpNo.onclick = async () => {
      };
    }
    main();
    
    
  4. 次に、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 コレクションへの追加を許可するように、ルールを更新する必要があります。

  1. 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;
        }
      }
    }
    
  2. [公開] をクリックして新しいルールをデプロイします。

確認ルールを追加する

  1. データ検証ルールをいくつか追加して、想定するすべてのフィールドがドキュメントに存在することを確認します。
    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;
    
        }
      }
    }
    
  2. 忘れずに [公開] をクリックしてルールをデプロイしてください。

(省略可)ボタンのクリック結果を確認できるようになりました。Firebase コンソールで Cloud Firestore ダッシュボードに移動します。

出欠確認の状況を確認する

回答を録画したので、今度は参加者を確認して UI に反映しましょう。

  1. StackBlitz で index.html ファイルに移動します。
  2. description-container に、ID が number-attending の新しい要素を追加します。
    <!-- ... -->
    
     <section id="description-container">
         <!-- ... -->
         <p id="number-attending"></p>
     </section>
    
    <!-- ... -->
    

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

  1. StackBlitz で index.js ファイルに移動します。
  2. 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();
    

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

  1. 現在の認証 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';
          }
        }
      });
    }
    
  2. また、サブスクライブを解除する関数を作成しましょう。これはユーザーのログアウト時に使用されます。
    // ...
    function unsubscribeCurrentRSVP() {
      if (rsvpListener != null) {
        rsvpListener();
        rsvpListener = null;
      }
      rsvpYes.className = '';
      rsvpNo.className = '';
    }
    
  3. 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();
        }
      });
    
  4. 複数のユーザーでログインしてみると、[はい] ボタンをクリックするたびにカウントが増えます。

アプリのプレビュー

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

11. お疲れさまでした

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

学習した内容

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

次のステップ

  • Firebase デベロッパー ワークフローの詳細アプリを完全にローカルでテストして実行する方法については、Firebase エミュレータの Codelab をご覧ください。
  • 他の Firebase プロダクトの詳細については、ユーザーがアップロードした画像ファイルを保存する場合は、または、ユーザーに通知を送信しますか?Firebase ウェブ Codelab の Codelab では、ウェブ向け Firebase プロダクトを多数紹介していますので、そちらをご確認ください。
  • Cloud Firestore について詳しくは、たとえば、サブコレクションとトランザクションについて知りたい場合、Cloud Firestore についてより詳しく説明する Codelab については、Cloud Firestore ウェブ Codelab をご覧ください。または、Cloud Firestore についての YouTube シリーズをご覧ください。

詳細

いかがでしたか?

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