はじめに

そうだ、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 等を参考に。

以下はサンプル。

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>

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ツールをインストール

npm install -g firebase-tools

2.Firebaseツールでログイン

firebase login

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

firebase init

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

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

database.rules.json（以下は無制限公開の場合の例。適宜適切な値を指定）

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

5.Firebaseホストにデプロイ

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

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

今回作った画面はこんな感じ。
投稿したメッセージがリアルタイムに同期される。

さいごに

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

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

おまけ

同じようなアプリ作成を Socket.IOでも試してみたので、リンクだけ貼っておく。
Socket.IOを利用してHTML,Javascript,CSSだけでわりと簡単にLINE風チャットアプリを作る

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

はじめに

新規プロジェクト作成

WEBアプリ作成

Firebaseにホスティング

さいごに

おまけ