Cloud Firestore(Firebase)とVue.jsを利用して1時間でチャットサービスを作ろう

 

トポロジ・ラボ(研究開発部)です。

数年前に無料でWebサイトが公開できること等で盛り上がりを見せていたGoogleのFirebaseですが、最近ではオンライン/オフラインでデバイス間のデータを簡単に同期できるCloud Firestoreが公開され、それ関連の記事や書籍を多く見るようになりました。

今回はこのCloud FirestoreとjavascriptのフレームワークVue.jsを組み合わせて、チャットサービスを簡単に作れることを示して、Cloud Firestoreの便利さをお伝えしたいと思います。プログラムの詳細等は後日、解説編として説明したいと思います。

前提:Googleのアカウントの取得済み、npm環境の構築済み

Firebaseのコンソールからプロジェクトの作成

Firebaseのページ(https://firebase.google.com/?hl=ja)右上の”コンソールに移動”をクリック(Googleにログインする必要あり)

プロジェクト追加を選択し、プロジェクト名、地域を選択してプロジェクトを作成します。例ではプロジェクト名をfirestore-sampleとしています。

 

Firestore Databaseを作成

先程作成したプロジェクトの管理画面に入り、画面左側に表示されているサービス一覧からDatabaseを選択してFirestore用のDatabaseを作成します。

作成時に以下図のようなセキュリティルールを選択しますが、今回はテストモードで開始します。(ルールを記述することで、細かいデータベースへのアクセス制御ができます。)

 

ローカル環境にFirebaseのプロジェクトをCLIから作成

npmでfirebase-toolsをインストールします。

Googleアカウントにログインします。

今回のプロジェクト用にフォルダを作成してその中でFirebaseプロジェクトを初期化します。

いくつか質問されますが基本はデフォルトの設定で問題ありません。今回作成するチャットサービスでは、Firebaseの使うサービスの選択でHostingを選択し、Firebaseのdefault projectの選択では先程Firebaseのページのコンソールで作成したプロジェクトを選択してください。

 

チャットプログラムの実装

初期化が完了するとFirebase Hostingへのデプロイ用の設定ファイル.firebaserc, firebase.jsonとwebページのソースコードがpublicフォルダの中にindex.htmlとして作成されます。index.htmlを以下のように変更してください。(プログラムの詳細は解説編で説明します。)

 

Firebase Hostingにデプロイ

さきほど $firebase init したフォルダで以下のコマンドを実行することでFirebaseのHosting環境へデプロイすることができます。

実行後にHosting URLが表示されるので、ブラウザでそのURLにアクセスすると以下のような画面が表示されます。

名前と内容を入力して送信することで、チャットの発言ができるようになります。

以下の動画のように、2つのブラウザに分けて、チャットをすることでデータが同期されていることが確認できます。また、動画ではtest2の2つ目の発言fugaという内容をオフラインで送信した場合、当然同期しないが、オンラインに切り替えることで自動で同期していることがわかります。

 

今回はチャットサービスを簡単に構築できることを紹介しました。Firebaseを利用することでサーバーサイドの開発コストが大幅に削減でき、簡単にサービスを開発できることがおわかり頂けたと思います。