Firebaseを利用してHTML,Javascript,CSSだけで超簡単にLINE風チャットアプリを作る

# はじめに
そうだ、WEBでチャットアプリ作って公開してみよう。

でも、HerokuだとDBとかKVS使う場合はクレカ登録必要になるっぽいからやだなぁ。

・・・と思って色々見てたら、Firebaseならデータストアも無料枠で使えるしホスティングもできるっぽい！

ということで、試してみた。

# 新規プロジェクト作成
1.<https://firebase.google.com/>にアクセス。
2.[GET STARTED FOR FREE]を押す。
3.Googleアカウントでログイン。
4.[新規プロジェクトを作成]を押す。
5.プロジェクト名と国/地域を入力して[プロジェクトを作成]を押す。

# WEBアプリ作成
ローカルでHTML、JS、CSSを作る。
https://firebase.google.com/docs/web/setup 等を参考に。

以下はサンプル。

```html:index.html
<!DOCTYPE html>
<html>

<head>
    <title>Sample</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <input type="hidden" id="nameIn" value="guest">
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <input type="text" id="msgIn" class="form-control" placeholder="メッセージを入れてくださいな" value="" required="required" pattern="" title="">
        </div>
    </nav>

    <main>
        <div class="container">
            <div id="msgDiv"></div>
            <br class="clear_balloon" />
            <div id="bottomDiv"></div>
        </div>

    </main>
    <script src="https://www.gstatic.com/firebasejs/3.3.0/firebase.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="app.js"></script>

</body>
```

```js:app.js
//config内の値は自分のプロジェクトの設定に合わせて指定
var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    storageBucket: "<BUCKET>.appspot.com",
};

firebase.initializeApp(config);

var rootRef = firebase.database().ref();

$('#msgIn').keypress(function (e) {
    if (e.keyCode == 13) {
        var name = $('#nameIn').val();
        var text = $('#msgIn').val();
        rootRef.push({ name: name, text: text });
        $('#msgIn').val('');
    }
});

rootRef.on('child_added', function (ss) {
    var msg = ss.val();
    dspChatMsg(msg.name, msg.text);
});

function dspChatMsg(name, text) {
    $('<div class="right_balloon"/>').text(text).appendTo($('#msgDiv'));
    $("html,body").animate({ scrollTop: $('#bottomDiv').offset().top }, 0);
};
```

コードはこれだけ。CSSは割愛。
ちなみに、Firebaseは2.xから3.xでちょっとAPIが変わっていた。
今回使ったバージョンは、現時点の最新の3.3。


# Firebaseにホスティング
作ったHTML、JS、CSSをFirebaseにホスティングする。
https://firebase.google.com/docs/cli/ を参考に。

1.Firebaseツールをインストール

```bash
npm install -g firebase-tools
```

2.Firebaseツールでログイン

```bash
firebase login
```

3.プロジェクト設定ファイル初期化

```bash
firebase init
```

以下が生成される。
・.firebaserc
・database.rules.json
・firebase.json

4.Databaseアクセスルール設定
database.rules.jsonを編集。

```database.rules.json（以下は無制限公開の場合の例。適宜適切な値を指定）
{
  "rules": {
    ".read": true,
    ".write": true
  }
}
```

5.Firebaseホストにデプロイ

```bash
firebase deploy --project xxxx　　（注：xxxxはPROJECT_ID）
```

6.デプロイしたWEBアプリケーションにアクセス
デプロイ成功したら以下のようなURLでアクセスできる。
https://PROJECT_ID.firebaseapp.com

今回作った画面はこんな感じ。
投稿したメッセージがリアルタイムに同期される。
![firebase.png](https://qiita-image-store.s3.amazonaws.com/0/111365/a0385bce-7830-1d94-1704-b557c4d4780d.png)

# さいごに
とりあえず動くもの公開するまでは超簡単に出来た。
Firebaseには認証とかの他の仕組みも色々と用意されているようで
個人でのアプリ開発にもなかなか使えるかも。

無料枠とその他の料金プランとかは以下に載ってる模様。
https://firebase.google.com/pricing/

# おまけ
同じようなアプリ作成を Socket.IOでも試してみたので、リンクだけ貼っておく。
[Socket.IOを利用してHTML,Javascript,CSSだけでわりと簡単にLINE風チャットアプリを作る](http://qiita.com/cacarrot/items/5618359a9af44cc2fe1b)