Cloud Firestoreとは
Cloud FirestoreはGoogle の柔軟でスケーラブルな NoSQL クラウド データベースを使用して、クライアント側開発とサーバー側開発のデータを保存、同期します。Firebase Realtime Database と同様に、リアルタイム リスナーを介してクライアント アプリ間でデータを同期し、モバイルとウェブのオフライン サポートを提供します。
ざっくり色々読んだ感じだとFirebase Realtime Databaseにある機能は持っていて、コレクションが使えたり、レイテンシが改善されたりと上位互換としてリリースされたのかなと思いましたね。
主な機能
Realtime Databaseとはデータモデルが大きく違いますね！コレクションが使えるようになり柔軟なデータ構造に対応できるみたいですね。
チャット開発
それではCloud Firestoreを使ってチャットを開発していきます。まずはGCPのコンソール上でプロジェクトを作成します。
Cloud Firestoreの作成
Firebaseのコンソールにアクセスしてプロジェクトを作成します。
https://console.firebase.google.com/
サイドメニューからDatabaseを選択し、Cloud Firestore Betaのデータベースを作成します。2018年5月時点ではまだBeta版となっています。
モードは簡単に読み書きできるようにテストモードで実行します。
クライアントの実装
WEBブラウザからアクセスするためのプログラムを書きます。メッセージの読み込みと書き込みだけなので下記のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script> <script src="https://www.gstatic.com/firebasejs/4.11.0/firebase.js"></script> <script src="https://www.gstatic.com/firebasejs/4.11.0/firebase-firestore.js"></script> </head> <body> <div> <input id="name" placeholder="名前"> <input id="message" placeholder="メッセージ"> <button id="send">投稿</button> </div> <ul id="messages"></ul> <script> // Initialize Firebase var config = { apiKey: "AIzaSyDPBkhALgxHOA45ubgK1AU8ox_b-fFn8iM", authDomain: "test-8665a.firebaseapp.com", projectId: "test-8665a" }; firebase.initializeApp(config) // データベースの参照を準備 var messagesRef = firebase.firestore().collection('messages') // メッセージを表示 messagesRef.onSnapshot(function(snapshot) { snapshot.docChanges.forEach(function(change) { if (change.type === 'added') { $('<li>').text(change.doc.data().name + ': ' + change.doc.data().body).prependTo('#messages'); } if (change.type === 'removed') { console.log(`User ${change.doc.id} has gone offline.`); } }); }); $('#send').click(function() { // 新規メッセージを投稿 messagesRef.add({ name: $('#name').val(), body: $('#message').val() }); }); </script> </body> </html> |
最初に読み込んでいるfirebase.jsは必須のスクリプトになります。次に読み込んでいるfirebase-firestore.jsがCloud Firestore用のスクリプトになります。initializeAppに設定する値はプロジェクトのトップから取得できます。
初期化部分はRealtime DatabaseでもFirestoreでも同じですね。
|
1 2 3 4 5 6 7 |
// Initialize Firebase var config = { apiKey: "AIzaSyDPBkhALgxHOA45ubgK1AU8ox_b-fFn8iM", authDomain: "test-8665a.firebaseapp.com", projectId: "test-8665a" }; firebase.initializeApp(config) |
コレクションへの参照を変数に保持します。
|
1 2 |
// データベースの参照を準備 var messagesRef = firebase.firestore().collection('messages') |
メッセージのリアルタイム取得は下記でできます。
|
1 2 3 4 5 6 7 8 9 10 11 |
// メッセージを表示 messagesRef.onSnapshot(function(snapshot) { snapshot.docChanges.forEach(function(change) { if (change.type === 'added') { $('<li>').text(change.doc.data().name + ': ' + change.doc.data().body).prependTo('#messages'); } if (change.type === 'removed') { console.log(`User ${change.doc.id} has gone offline.`); } }); }); |
データの登録はadd()関数を使うとFirestore保存できます。
|
1 2 3 4 |
messagesRef.add({ name: $('#name').val(), body: $('#message').val() }); |
dockerでnginxを起動
Firebaseはlocalhostか指定したドメインからしかアクセスできないのでnginxを使ってサーバを立てます。下記docker-compose.ymlを同じディレクトリに準備します。
|
1 2 3 4 5 6 7 8 |
version: '3' services: web: image: nginx:alpine ports: - "8080:80" volumes: - ./:/usr/share/nginx/html |
下記コマンドでdockerを起動できたらhttp://localhost:8080にアクセスします。
|
1 |
$ docker-compose up |
複数タブを開いてリアルタイムにメッセージのやりとりが確認できたら完成です。
データはFirestoreのコンソールからも確認できます。
髙妻智一
最新記事 by 髙妻智一 (全て見る)
- エンジニアがゼロから技術ブログを書くための方法をまとめました - 2019-05-25
- FlutterからCloud Firestoreのデータを追加、更新、取得、削除する方法 - 2019-05-23
- Mercari Meetup for Microservices Platform #2のまとめ！ - 2019-05-22
コメントを残す