Firebase Realtime Databaseとは
Firebase Realtime Database はクラウドでホスティングされるデータベースです。データは JSON として保存され、接続されているすべてのクライアントとリアルタイムで同期されます。
iOS、Android、JavaScript SDK を使用してクロスプラットフォーム アプリを構築した場合、すべてのクライアントが、1 つの Realtime Database インスタンスを共有して、最新のデータによる更新を自動的に受信します。
クライアントから直接アクセスできて、データの変更をリアルタイムで受け取って状態を反映させることができる良いう優れものです！最近だとFirebase Realtime Databaseの上位互換となるCloud Firestoreというものがリリースされています。
初めて触るのでとりあえずFirebaseから順番に触ってみたいと思います！
主な機能
この機能の中でも特にすごいなと思ったのがオフライン機能ですね。アプリでSDKを使った時だけだと思いますが、端末がオフライン中にデータ更新をした場合、ローカルディスクに永続化してオンラインになった時に差分をデータベースに更新してくれる機能です。
差分更新で問題が出ないかきになるところですが、UX的によくなりそうですね！
チャット開発
それではFirebase Realtime Databaseを使ってチャットを開発していきます。まずはGCPのコンソール上でプロジェクトを作成します。
Firebase Realtime Databaseを作成
Firebaseのコンソールにアクセスしてプロジェクトを作成します。
https://console.firebase.google.com/
サイドメニューからDatabaseを選択し、Realtime Databaseのデータベースを作成します。
モードは簡単に読み書きできるようにテストモードで実行します。
これだけでFirebase Realtime Databaseの作成が完了します。簡単ですね！
クライアントの実装
WEBブラウザからアクセスするためのプログラムを書きます。メッセージの読み込みと書き込みだけなので下記のようになります。
<html>
<head>
<script src="https://www.gstatic.com/firebasejs/5.0.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.0.1/firebase-database.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.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: "<apiKey>",
authDomain: "<projectId>.firebaseapp.com",
databaseURL: "https://<projectId>.firebaseio.com",
projectId: "<projectId>",
storageBucket: "",
messagingSenderId: "<messagingSenderId>"
};
firebase.initializeApp(config);
<script>
// データベースの参照を準備
var messagesRef = firebase.database().ref().child('messages')
// 既存メッセージを表示
messagesRef.on('child_added', function(snapshot) {
var msg = snapshot.val();
$('<li>').text(msg.name + ': ' + msg.body).prependTo('#messages');
});
$('#send').click(function() {
// 新規メッセージを投稿
messagesRef.push({
name: $('#name').val(),
body: $('#message').val()
});
});
</script>
</body>
</html>
最初に読み込んでいるfirebase-app.jsは必須のスクリプトになります。
次に読み込んでいるfirebase-database.jsがRealtime Database用のスクリプトになります。initializeAppに設定する値はプロジェクトのトップから取得できます。
下記１行でコレクションに対してデータを登録したり、変更のイベントを取得できるようになります。
var messagesRef = firebase.database().ref().child('messages')
メッセージの受信はchild_addedイベントから取得します。
messagesRef.on('child_added', function(snapshot) {
var msg = snapshot.val();
$('<li>').text(msg.name + ': ' + msg.body).prependTo('#messages');
});
メッセージの送信はpush関数を使ってデータベースに登録します。
messagesRef.push({
name: $('#name').val(),
body: $('#message').val()
});
dockerでnginxを起動
Firebaseはlocalhostか指定したドメインからしかアクセスできないのでnginxを使ってサーバを立てます。下記docker-compose.ymlを同じディレクトリに準備します。
version: '3'
services:
web:
image: nginx:alpine
ports:
- "8080:80"
volumes:
- ./:/usr/share/nginx/html
下記コマンドでdockerを起動できたらhttp://localhost:8080にアクセスします。
$ docker-compose up
複数タブを開いてリアルタイムにメッセージのやりとりが確認できたら完成です。
Firebaseのコンソールからも同様にデータが確認できます。
まとめ
WEBでのチャット開発がものすごく簡単になったことが分かったと思います。Firesbaseを使うとチャット以外にもリアルタイムな要素をもったサービスを簡単に作れます。
Firestoreは他にもホスティング機能、Cloud Functions、Cloud Strageの機能があり、サービス開発を楽にしてくれるので是非試してみてください。
髙妻智一
最新記事 by 髙妻智一 (全て見る)
- Polkadot(Substrate)のアドレスとトランザクションについて - 2023-03-09
- 【無料公開】「Goで始めるBitcoin」3章 Bitcoinノードとの通信 技術書典8 - 2020-03-08
- エンジニアがゼロから技術ブログを書くための方法をまとめました - 2019-05-25
初めまして、私は現在日本の大学で学生をやっているものです。
現代のコミュニティに興味があり、xcodeでアプリ開発をやっています。
アプリを活用するにあたってfirebaseに目を付け、データベースの構築に現在取り組もうとしているのですが、様々な文献を頼りに学習を行ってもどうしても上手くアウトプット出来ませんでした。
そんな中、このような記事を拝見させていただき、とても分かりやすく感じました。
そこで、この記事と全く同じように操作を行い勉強を試みたく思い、もし差しさわりありませんでしたら。
お使いになられていた「チャットアプリケーション」のデータを頂けませんでしょうか。
大変失礼であるとは思いますが、お力添え頂けると大変嬉しいです。
どうかよろしくお願い致します。
三浦さんコメントありがとうございます。
「チャットアプリケーション」のデータがプログラムの事でしたら「クライアントの実装」という項目だけなのでこの記事だけで完結できます。
もしGCPの設定が分からないようでしたらまたコメントください！