1. 概要
この Codelab では、インタラクティブなウェブ アプリケーションを作成するための Firebase の基本を学びます。複数の Firebase プロダクトを使用して、イベントの RSVP とゲストブックのチャットアプリを作成します。
ラボの内容
- 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] をクリックします。
これで、独自の 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 の利用規約が表示されたら同意します。このアプリではアナリティクスを使用しないため、Google アナリティクスの画面で [無効にする] をクリックします。
Firebase プロジェクトの詳細については、Firebase プロジェクトについて理解するをご覧ください。
コンソールで Firebase プロダクトを有効にして設定する
作成しているアプリでは、ウェブアプリで利用可能な次の Firebase プロダクトを使用します。
- ユーザーがアプリに簡単にログインできるようにする Firebase Authentication と Firebase UI。
- 構造化されたデータをクラウドに保存し、データが変更されたときに即座に通知を受け取る Cloud Firestore。
- データベースを保護するための Firebase セキュリティ ルール。
これらのプロダクトの中には、特別な構成が必要なものや、Firebase コンソールを使用して有効にする必要があるものがあります。
Firebase Authentication でメールによるログインを有効にする
この Codelab では、ユーザーがウェブアプリにログインできるようにするために、メール / パスワードによるログイン方法を使用します。
- Firebase コンソールの左側のパネルで、[Build] > [Authentication] をクリックします。[開始] をクリックします。認証ダッシュボードでは、登録ユーザーの確認、ログイン プロバイダの設定、設定の管理を行えます。
- [ログイン方法] タブを選択します(または、こちらをクリックしてタブに直接移動します)。
- プロバイダ オプションで [メール / パスワード] をクリックし、スイッチを [有効にする] に切り替えて、[保存] をクリックします。
Cloud Firestore を設定する
このウェブアプリは Cloud Firestore を使用してチャット メッセージを保存し、新しいチャット メッセージを受信します。
Cloud Firestore を設定する方法は次のとおりです。
- Firebase コンソールの左側のパネルで、[Build] > [Firestore Database] をクリックします。次に、[データベースを作成] をクリックします。
- [データベースを作成] をクリックします。
- [テストモードで開始] オプションを選択します。セキュリティ ルールに関する免責条項を確認します。テストモードでは、開発中に自由にデータベースに書き込むことができます。[次へ] をクリックします。
- データベースのロケーションを選択します(デフォルトをそのまま使用できます)。ただし、この場所は後で変更できません。
- [完了] をクリックします。
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
ファイルの先頭にすでに含まれています。この後、各 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 のプレビュー ペインを使用します。
- [アプリを登録] をクリックします。
- 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. ユーザーのログイン(RSVP)を追加する
これでアプリに Firebase が追加されたので、Firebase Authentication を使用してユーザーを登録する出欠確認ボタンを設定できます。
メールログインと FirebaseUI でユーザーを認証する
ユーザーにメールアドレスでログインするよう促す出欠確認ボタンが必要です。これを行うには、FirebaseUI を RSVP ボタンに接続します。FirebaseUI は、Firebase Auth 上に構築済みの UI を提供するライブラリです。
FirebaseUI には、次の 2 つの処理を行う構成が必要です(ドキュメントのオプションを参照)。
- メール/パスワードのログイン方法を使用することを FirebaseUI に指示します。
- ログインの成功に関するコールバックを処理し、リダイレクトを回避するために false を返します。単一ページのウェブアプリを作成しているため、ページを更新したくない。
FirebaseUI Auth を初期化するコードを追加する
- StackBlitz で
index.js
ファイルに移動します。 - 上部で
firebase/auth
import ステートメントを見つけ、次のようにgetAuth
とEmailAuthProvider
を追加します。// ... // Add the Firebase products and methods that you want to use import { getAuth, EmailAuthProvider } from 'firebase/auth'; import {} from 'firebase/firestore';
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 では、これらの特定の ID のフックがすでにindex.js
ファイルに存在するため、以下に示すid
値と同じ値を使用するようにしてください。index.html
ファイルには、ID がfirebaseui-auth-container
のコンテナがあります。これは、ログインを保持するために FirebaseUI に渡す ID です。
アプリのプレビュー<!-- ... --> <section id="event-details-container"> <!-- ... --> <!-- ADD THE RSVP BUTTON HERE --> <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 コンソールの [Authentication] ダッシュボードに移動します。[Users] タブに、アプリにログインするために入力したアカウント情報が表示されます。
認証状態を UI に追加する
次に、ログインしていることが UI に反映されていることを確認します。
ユーザーのログイン ステータスが変わるたびに通知を受ける Firebase Authentication の状態リスナー コールバックを使用します。現在ログインしているユーザーがいる場合は、アプリの「出欠確認」が切り替わります「ログアウト」するボタンを] ボタンを離します。
- StackBlitz で
index.js
ファイルに移動します。 - 上部で
firebase/auth
import ステートメントを見つけ、次のように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); } });
これで、アプリのボタンに [ログアウト] と表示され、クリックすると [RSVP] に戻ります。
アプリのプレビュー
7. Cloud Firestore にメッセージを書き込む
ユーザーが訪問していることはわかりますが、ゲストがアプリ内で何か他のこともできるようにしましょう。ゲストブックにメッセージを残せるようにしたらどうでしょうか?参加を楽しみにしている理由や、会いたい人などを共有できます。
ユーザーがアプリに作成したチャット メッセージを保存するには、Cloud Firestore を使用します。
データモデル
Cloud Firestore は NoSQL データベースであり、データベースに保存されたデータはコレクション、ドキュメント、フィールド、サブコレクションに分割されます。チャットの各メッセージを、guestbook
という最上位のコレクションにドキュメントとして保存します。
メッセージを 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
import ステートメントを見つけ、次のように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
の直後に Firestoredb
オブジェクトへの参照を保存します。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();
ログインしたユーザーにのみゲストブックを表示する
誰にもゲストの訪問履歴をGoogle Chat で管理できます。チャットを保護するためにできることの一つは、ログインしたユーザーのみがゲストブックを閲覧できるようにすることです。ただし、独自のアプリでは 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
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 コンソールの [データベース] セクションで、直接手動で削除、変更、新しいメッセージの追加を試すことができます。変更内容が管理画面に表示されます
これで完了です。アプリで 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
クエリを Authentication リスナー内に移動する必要があります。そうしないと、権限エラーが発生し、ユーザーがログアウトするとアプリの接続が切断されます。
- StackBlitz で
index.js
ファイルに移動します。 - ゲストブック コレクションの
onSnapshot
リスナーをsubscribeGuestbook
という新しい関数に引き込みます。また、onSnapshot
関数の結果をguestbookListener
変数に割り当てます。
FirestoreonSnapshot
リスナーは、後でスナップショット リスナーをキャンセルするために使用できる登録解除関数を返します。// ... // 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
に、[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> <!-- ... -->
アプリのプレビュー
次に、ボタンのクリックに対するリスナーを登録します。ユーザーが [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()
関数の一番下に、次のコードを追加して 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 ダッシュボードに移動します。
出欠確認のステータスを読み取る
回答を記録したので、誰が来るかを確認し、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()
関数の一番下に、次のコードを追加して 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 = ''; }
- 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 プロダクトについて詳しく学ぶには、Firebase Web Codelab をご覧ください。
- Cloud Firestore の詳細については、サブコレクションとトランザクションについて学びたい場合は、Cloud Firestore についてより深く学習できる Codelab については、Cloud Firestore ウェブ Codelab をご覧ください。または、こちらの Cloud Firestore についての YouTube シリーズをご覧ください。
詳細
- Firebase サイト: firebase.google.com
- Firebase YouTube チャンネル
結果はいかがでしたか?
皆様からのご意見をお待ちしております。こちらの(非常に)簡単なフォームにご記入ください。