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

More than 1 year has passed since last update.


はじめに

そうだ、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.png


さいごに

とりあえず動くもの公開するまでは超簡単に出来た。

Firebaseには認証とかの他の仕組みも色々と用意されているようで

個人でのアプリ開発にもなかなか使えるかも。

無料枠とその他の料金プランとかは以下に載ってる模様。

https://firebase.google.com/pricing/


おまけ

同じようなアプリ作成を Socket.IOでも試してみたので、リンクだけ貼っておく。

Socket.IOを利用してHTML,Javascript,CSSだけでわりと簡単にLINE風チャットアプリを作る