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

Switch to English

Firebase forWebについて知る

1。概要

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

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

学習内容

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

必要なもの

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

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

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

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

開始コードについては、次の URL にアクセスしてください: https://stackblitz.com/edit/firebase-gtk-web-start
StackBlitz ページの上部にあるForkをクリックします。

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

これで、独自の StackBlitz プロジェクトとして開始コードのコピーが作成されました。これには一意の名前と一意の URL があります。すべてのファイルと変更は、この 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 の利用規約に同意します。このアプリでは Analytics を使用しないため、Google Analytics 画面で [有効にしない] をクリックします。

Firebase プロジェクトの詳細については、 Firebase プロジェクトについてを参照してください。

コンソールで Firebase 製品を有効にして設定する

構築中のアプリは、ウェブアプリで利用できるいくつかの Firebase プロダクトを使用しています。

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

これらの製品の中には、特別な構成が必要なものや、Firebase コンソールを使用して有効にする必要があるものがあります。

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

Firebase コンソールの左側のパネルで、 [Build ] > [Authentication]をクリックします。次に、 [開始する]をクリックします。認証ダッシュボードが表示され、サインアップしたユーザーを確認したり、サインインプロバイダーを構成したり、設定を管理したりできます。
[サインイン方法]タブを選択します (または、ここをクリックして直接タブに移動します)。
プロバイダーオプションから[電子メール/パスワード]をクリックし、スイッチを[有効]に切り替えて、 [保存]をクリックします。

Cloud Firestore をセットアップする

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

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

Firebase コンソールの左側のパネルで、 [Build ] > [Firestore Database]をクリックします。次に、 [データベースの作成]をクリックします。
[データベースの作成]をクリックします。
[テストモードで開始]オプションを選択します。セキュリティルールに関する免責事項をお読みください。テストモードでは、開発中にデータベースに自由に書き込むことができます。 [次へ]をクリックします。

注意:このコードラボの最初の段階では、テストモードを使用します。ただし、Codelab の後半で、Firebase セキュリティルールを記述してデータベースを保護します。
アプリ、特に運用アプリでは、セキュリティルールを使用してデータベースを保護することが非常に重要です。セキュリティルールの詳細については、 Firebase ドキュメントをご覧ください。
データベースの場所を選択します (デフォルトをそのまま使用できます)。ただし、この場所は後で変更できないことに注意してください。
[完了]をクリックします。

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

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

Firebase ライブラリを追加する

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

StackBlitz は自動バンドルを提供するため、インポートステートメントを使用して Firebase ライブラリを追加できます。ライブラリのモジュラー (v9) バージョンを使用します。これは、「ツリーシェーキング」と呼ばれるプロセスによって Web ページの全体的なサイズを縮小するのに役立ちます。 docs でモジュラー 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 ウェブアプリを追加する

Firebase コンソールに戻り、左上の [プロジェクトの概要] をクリックして、プロジェクトの概要ページに移動します。
プロジェクトの概要ページの中央にあるウェブアイコンをクリックします。新しい Firebase Web アプリを作成します。
Web Appというニックネームでアプリを登録します。
この Codelab では、 [このアプリの Firebase Hosting もセットアップする]の横にあるチェックボックスをオンにしないでください。ここでは、StackBlitz のプレビューペインを使用します。
[アプリを登録]をクリックします。
Stackblitz が依存関係を管理するため、コンソールに表示されるnpm install firebaseステップをスキップできます。
Firebase 構成オブジェクトをクリップボードにコピーします。
[Continue to console]をクリックします。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. ユーザーサインイン (RSVP) を追加する

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

ユーザーに電子メールアドレスでサインインするよう求める RSVP ボタンが必要です。これを行うには、 FirebaseUI をRSVP ボタンに接続します。FirebaseUI は、Firebase Auth の上に構築済みの UI を提供するライブラリです。

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

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

コードを追加して 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';

次のように、 initializeAppの直後に auth オブジェクトへの参照を保存します:
```
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 に RSVP ボタンを追加する

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

以下に示すのと同じid値を使用するように注意してください。このコードラボでは、これらの特定の ID のフックがindex.jsファイルに既に存在するためです。

index.htmlファイルには、ID がfirebaseui-auth-containerのコンテナーがあることに注意してください。これは、ログインを保持するために FirebaseUI に渡す ID です。
```


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

```
アプリのプレビュー
RSVP ボタンにリスナーを設定し、FirebaseUI の開始関数を呼び出します。これにより、サインインウィンドウを表示する必要があることが FirebaseUI に伝えられます。

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

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

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

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

UI に認証状態を追加する

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

ユーザーのサインインステータスが変化するたびに通知を受け取る Firebase Authentication 状態リスナーコールバックを使用します。現在サインインしているユーザーがいる場合、アプリは「RSVP」ボタンを「ログアウト」ボタンに切り替えます。

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メソッドは、 guestbookコレクションの新しいドキュメント (自動生成された ID を持つ) にメッセージコンテンツを追加します。

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';

ここで、 initializeApp直後に Firestore dbオブジェクトへの参照を保存します:
```
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();

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

ゲストのチャットを誰にも見られたくありません。チャットを保護するためにできることの 1 つは、サインインしているユーザーだけがゲストブックを表示できるようにすることです。とはいえ、独自のアプリの場合は、データベースも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';
  }
});

メッセージ送信のテスト

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

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

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

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

Firebase コンソール

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

8. メッセージを読む

メッセージを同期する

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

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

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

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

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

<!-- ... -->

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

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

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

 </section>

<!-- ... -->

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

StackBlitz で、 index.jsファイルに移動します。
上部で、 firebase/firestore import ステートメントを見つけて、次のように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 コンソールの[データベース]セクションで、新しいメッセージを直接手動で削除、変更、または追加することができます。変更はすべて UI に表示されます。

おめでとう！アプリで Cloud Firestore ドキュメントを読んでいます。

アプリのプレビュー

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

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

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

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

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

Firebase コンソールの[ビルド]セクションで、 [Firestore データベース]をクリックし、 [ルール]タブを選択します (または、ここをクリックして[ルール]タブに直接移動します)。
次のデフォルトのセキュリティルールが表示されます。パブリックアクセスの時間制限は、今日から数週間です。

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

コレクションを特定する

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

既存の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クエリを移動する必要があります。そうしないと、権限エラーが発生し、ユーザーがログアウトしたときにアプリが切断されます。

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

ゲストブックコレクションonSnapshotリスナーをsubscribeGuestbookという新しい関数にプルします。また、 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. ボーナスステップ: 学んだことを実践する

出席者の RSVP ステータスを記録する

現在、あなたのアプリでは、イベントに興味がある場合にのみチャットを開始できます。また、誰かが来るかどうかを知る唯一の方法は、チャットに投稿することです。整理して、何人の人が来るかを知らせましょう。

イベントに参加したい人を登録するためのトグルを追加し、参加者数を集計します。

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

guestbook-containerに、次のようにYESボタンとNOボタンのセットを追加します:

<!-- ... -->
  <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 を使用して応答をデータベースに保存します。

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()関数の最後に、RSVP ステータスをリッスンする次のコードを追加します:

async function main() {
  // ...

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

次に、 attendeesという新しいコレクションを作成し、いずれかの RSVP ボタンがクリックされた場合にドキュメント参照を登録します。クリックされたボタンに応じて、その参照を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 ダッシュボードに移動します。

RSVP ステータスの読み取り

応答を記録したので、誰が来ているかを見て、UI に反映させましょう。

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

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

<!-- ... -->

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

<!-- ... -->

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

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

main()関数の最後に、次のコードを追加して、RSVP ステータスをリッスンし、 YESクリックをカウントします。

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 = '';
}

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

// ...
// 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();
      // Subcribe 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 認証
FirebaseUI
クラウドファイアストア
Firebase セキュリティルール

次のステップ

Firebase デベロッパーワークフローについて詳しく知りたいですか？アプリを完全にローカルでテストして実行する方法については、Firebase エミュレータの Codelabをご覧ください。
他の Firebase プロダクトについて詳しく知りたいですか？ユーザーがアップロードした画像ファイルを保存したいですか?または、ユーザーに通知を送信しますか?ウェブ用の多くの Firebase プロダクトについて詳しく説明しているコードラボについては、Firebase ウェブコードラボをご覧ください。
Cloud Firestore について詳しく知りたいですか?サブコレクションとトランザクションについて学びたいと思いませんか? Cloud Firestore について詳しく説明しているコードラボについては、Cloud Firestore ウェブコードラボをご覧ください。または、このYouTube シリーズをチェックして、Cloud Firestore について理解してください。

もっと詳しく知る

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

どうだった？

フィードバックをお待ちしております。ここで（非常に）短いフォームに記入してください。

Firebase forWebについて知る

1。概要

学習内容

必要なもの

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

3. イベント情報の編集

アプリのプレビュー

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

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

コンソールで Firebase 製品を有効にして設定する

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

Cloud Firestore をセットアップする

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

Firebase ライブラリを追加する

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

6. ユーザー サインイン (RSVP) を追加する

メール サインインと FirebaseUI を使用してユーザーを認証する

コードを追加して FirebaseUI Auth を初期化します

HTML に RSVP ボタンを追加する

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

UI に認証状態を追加する

アプリのプレビュー

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

データ・モデル

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

アプリのプレビュー

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

メッセージ送信のテスト

Firebase コンソール

8. メッセージを読む

メッセージを同期する

同期メッセージのテスト

アプリのプレビュー

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

コレクションを特定する

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

検証ルールを追加する

リスナーをリセットする

10. ボーナスステップ: 学んだことを実践する

出席者の RSVP ステータスを記録する

アプリのプレビュー

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

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

検証ルールを追加する

RSVP ステータスの読み取り

アプリのプレビュー

11.おめでとう！

カバーした内容

次のステップ

もっと詳しく知る

どうだった？

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

6. ユーザーサインイン (RSVP) を追加する

メールサインインと FirebaseUI を使用してユーザーを認証する

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

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

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

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