Firebaseを使って30分で作るリアルタイムチャット

■Firebaseとは
Firebaseは、2014年10月にGoogleに買収されたことで一躍有名になったBaaS(Backend as a Service)です。
BaaSは、サービスの運用に必要な汎用的なサーバー機能を提供するクラウドサービスの一形態です。提供される機能はサービスにより様々ですが、ユーザ管理・認証、データの保存などの機能を持っていることが多くあります。
Firebaseも同様に様々な機能を持っていますが、今回はその中からリアルタイムデータベース機能を活用し、簡易的なリアルタイムチャットを構築してみたいと思います。

b5e25fcfebd231d340dc274c7e98fe0b

■Firebaseに登録
以下のURLよりFirebaseにアクセスし、アカウント登録します。
https://www.firebase.com/login/
3178d963cbb28c1e747bd44a92eab241

■プロジェクトを作成
以下の画面にて「新規プロジェクトを作成」を押してプロジェクトを作成する。
f6a47aadd2f33c35cb51c7423da35e1b

6ad662d86756e998917250552619c812

■コードスニペットを取得
「ウェブアプリにFirebaseを追加」を押して、コードスニペットを取得する。
b1b7849997303711f727c5ff388b013a

以下をコピーしてHTMLに貼り付ける。
f47f0325073e4e745bedc12d7bd4a7dc

■パーミッションを設定
左側のメニューのDatabaseを選択し、パーミッションを設定する。
b1b7849997303711f727c5ff388b013a

「ルール」を押す。
f06aebcc6338e4bdd6bf32544bff7545

以下になるようにルールを書き換える。

■HTMLの用意
・Firebaseを初期化する。

・データを保存するときは次のように書きます。

・データを取得するときは次のように書きます。

■まとめ
今まではリアルタイムチャットを作ろうとすると、自前でサーバを用意しSocket.IOなどを使って、少し時間をかけて実現していましたが、Firebaseを使うとこれほど簡単に構築することができました。
特に、限られるリソースで制作を進めるスタートアップでは積極的に導入を検討してみると良いと思います。

以下に今回作成した全コードのリストは以下となります。

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です