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

2018年7月30日

トポロジ・ラボ（研究開発部）です。

数年前に無料で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をインストールします。

$ npm install -g firebase-tools

1	$ npm install -g firebase-tools

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

$ firebase login

1	$ firebase login

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

$ mkdir firestore_sample
$ cd firestore_sample
$ firebase init

$ mkdir firestore_sample

$ cd firestore_sample

$ firebase init

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

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Chat Service</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
  </head>
  <body>
    <div id="app" class="container">
      名前: <input type="text" class="form-control" style="width:250px" v-model="name">
      内容: <input type="text" class="form-control" style="width:400px" v-model="content"><br>
      <button class="btn btn-primary" @click="send">送信</button>
      <p v-for="(message, index) in sorted_messages" :key="index">{{message.name}} > {{message.content}}</p>
    </div>


    <script defer src="/__/firebase/5.3.0/firebase-app.js"></script>
    <script defer src="/__/firebase/5.3.0/firebase-firestore.js"></script>
    <script defer src="/__/firebase/init.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
    <script src="https://Vuejs.org/js/Vue.js" charset="utf-8"></script>
    <script src="https://unpkg.com/vue-firestore"></script>

    <script>
      document.addEventListener('DOMContentLoaded', function() {
        var db = firebase.firestore();
        db.settings({
          timestampsInSnapshots: true
        });
        

        var app = new Vue({
          el: '#app',
          data: {
            name:"",
            content:""
          },
          firestore: {
            messages: db.collection("messages"),
          },
          methods: {
            send:function() {
              date = new Date()
              var message = {
                name:this.name,
                content: this.content,
                timestamp: "" + date.getFullYear() + ("0"+date.getMonth()+1).slice(-2) + ("0"+date.getDate()).slice(-2) + ("0"+date.getHours()).slice(-2) + ("0"+date.getMinutes()).slice(-2) + ("0"+date.getSeconds()).slice(-2)
              };
              this.$firestore.messages.add(message);

              this.content = ""
            },
          },
          computed: {
            sorted_messages () {
              const list = this.messages.slice()
              list.sort((a, b) => {
                a = a["timestamp"]
                b = b["timestamp"]

                return a === b ? 0 : a > b ? -1 : 1 
              });
              return list
            }
          },
        })  
      })
    </script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Chat Service</title>

</head>

<body>

名前: <input type="text" class="form-control" style="width:250px" v-model="name">

内容: <input type="text" class="form-control" style="width:400px" v-model="content"><br>

<p v-for="(message, index) in sorted_messages" :key="index">{{message.name}} > {{message.content}}</p>

</div>

document.addEventListener('DOMContentLoaded', function() {

var db = firebase.firestore();

db.settings({

timestampsInSnapshots: true

});

var app = new Vue({

el: '#app',

data: {

name:"",

content:""

firestore: {

messages: db.collection("messages"),

methods: {

send:function() {

date = new Date()

var message = {

name:this.name,

content: this.content,

timestamp: "" + date.getFullYear() + ("0"+date.getMonth()+1).slice(-2) + ("0"+date.getDate()).slice(-2) + ("0"+date.getHours()).slice(-2) + ("0"+date.getMinutes()).slice(-2) + ("0"+date.getSeconds()).slice(-2)

};

this.$firestore.messages.add(message);

this.content = ""

computed: {

sorted_messages () {

const list = this.messages.slice()

list.sort((a, b) => {

a = a["timestamp"]

b = b["timestamp"]

return a === b ? 0 : a > b ? -1 : 1

});

return list

}

})

</script>

</body>

</html>

Firebase Hostingにデプロイ

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

$ firebase deploy

1	$ firebase deploy

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

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

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

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