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 高妻智一 (全て見る)
- なぜエンジニアである自分が発信を続けるのか - 2018-10-08
- プログラミングスクールの値段は？個人的には回収できる先行投資だと思います！ - 2018-10-08
- エンジニア未経験な学生はインターンに行って学びながら内定を勝ち取るのがおすすめ！ - 2018-10-07
コメントを残す