Firebase を使ってリアルタイムウェブアプリを作ってみる ｜ SiTest (サイテスト) ブログ

前回の記事では、Firebase を使って静的なサイトを公開する方法をご紹介しました。
今回は、Firebase の目玉機能の一つである Realtime Database を使って、簡単なチャットアプリを作ってみようと思います。

Firebase 自体の概要や、ホスティングサービスについては、前回の記事をご参照ください。

今からご紹介する Realtime Database は、この Firebase の機能群の一つです。
その名の通り、リアルタイムでデータの同期が可能なので、チャットアプリなどと相性が良いです。

オフライン時に投稿したメッセージを、オンラインになった瞬間に同期する仕組みが備わっているので、特に意識せずともリアルタイムアプリケーションが作れてしまいます。
これは、データをローカルのデータベースを介してやり取りすることで実現されています。

また、Web、iOS、Android に対応しているので、クロスプラットフォームでデータを共有することも可能です。

それでは実際に、Realtime Database で作ったアプリがどんなものかを確認するために、超簡易なチャットアプリを作ってみようと思います。
今回は JavaScript API を使って、ウェブアプリとして作ります。

こんな感じのものです。
メッセージが投稿でき、それが順番に表示されるだけのミニマルなチャットアプリです。

ただ、リアルタイムアプリケーションとして作るので、ブラウザを更新しなくても勝手に他の人が投稿したメッセージが表示されます。

ちなみに、Firebase のプロジェクト作成や環境構築がまだの場合は前回の記事を参考に行ってください。

作ったサンプルがこちらになります。
そして、そのコードが下記になります。

Firebase チャットサンプル
<script defer src="/__/firebase/4.1.3/firebase-app.js"></script>
<script defer src="/__/firebase/4.1.3/firebase-database.js"></script>
<script defer src="/__/firebase/init.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<div class="content"><section class="section">
<h1>Firebase チャットサンプル</h1>
<div class="filed"><input id="message" class="input inline" style="width: 200px;" type="text" placeholder="メッセージ" />
<a id="submit" class="button is-primary"></a>投稿する</div>
<ul id="message-list"></ul>
</section></div>
</div>
<script>
      $(function() {
        // 参照を取得
        var ref = firebase.database().ref('/messages');

        // データの読み込み
        ref.on('child_added', function(snapshot) {
          $('</p>
<li>').text(snapshot.val().message).prependTo('#message-list');
        });

        // データの書き込み
        $('#submit').on('click', function() {
          ref.push({
            message: $('#message').val()
          });
        });
      });
    </script>

どうでしょうか。簡易なチャットアプリとはいえ、驚くほど短い記述でリアルタイムアプリケーションが作れることがお分かりいただけたのではないでしょうか。
JavaScript は10行程しか書いていません。

肝は「データの読み込み」の箇所で使っている「on」メソッドです。
データベースの参照に対して、これを使ってコールバックを指定するだけで、後はデータベース側で変更が発生すると自動的にデータが同期されます。

蛇足ですが、ずっとデータを同期する必要がない場合は「once」メソッドに切り替えてやれば、初回のみデータを取ってくるようにすることも可能です。
無料版だと同時にコネクションを張れる数が100までなので、要件に合わせて使い分けるのがよいでしょう。

複数のブラウザを並べて、サンプルを開いてみると、リアルタイム更新が簡単に味わえます。
一方でメッセージを送ると、もう片方のページ上にも自動的にメッセージが追加されるはずです。

また、オフラインにも対応しているので、興味のある方は試してみてください。
PCやスマホをオフラインにした状態でメッセージを投稿すると、その端末上では新着メッセージとして表示されますが、他の端末では表示されません。
そこからオンラインに切り替えると、自動的に投稿したメッセージがデータベースへと同期され、他の端末でも表示されるようになります。

こうしたオフライン処理を自前で作るとなるとなかなか大変ですが、Firebase の Realtime Database だと、さっきのコードだけでオフライン対応ができてしまいます。

簡単にではありますが、Firebase の Realtime Database を使ったアプリ作成の基礎をお伝えさせていただきました。
次回からは、NoSQL 特有のデータ設計や、データの更新・削除についてもご紹介していきたいと思います。

【関連記事】
Firebase を使ってサイトを無料で公開してみる ｜ SiTest (サイテスト) ブログ