##アジェンダ
- Firebaseとは
- Firebaseの特徴
- Firebaseの料金
- Firebaseでウェブチャットを作ってみよう
##Firebaseとは
- 2011年アメリカで始まったBaaSが、2014年Googleに買収された
- Firebaseはその他のBaaSと同様、サーバー構築やメンテナスが不要である
- さらに、リアルタイムでデータを格納したり引き出したりすることができる
##Firebaseの特徴
- リアルタイムデータベース
- 静的ウェブサイトホスティング
- ユーザ認証とデータベースアクセス管理
##Firebaseの特徴
##Firebaseの特徴
- よいアプリを開発するために、いろいろな機能が提供されている
- Firebaseを利用してユーザ層の拡大や収益の増加もできる
##料金 - 無料範囲
-
リアルタイムデータベース
-
100の同時接続
-
1GBの容量
-
10GBの転送量
-
ストレージ
-
5GBの容量
-
1GB/dayの転送量
-
2万回のUpload
-
5万回のDownload
-
静的ページホスティング
-
1GBの容量
-
10GBの転送量
-
独自ドメイン＆無料SSL
-
開発のために、ぜんぜん余裕である
##料金 - 有料
- 25ドル/月以下
- 同時接続数が無制限など
- 25ドル/月以上
- 従量課金
##Firebaseでウェブチャットを作ってみよう
###新規プロジェクト
###新規プロジェクト
###開発ツール
- インストール
$ npm install -g firebase-tools
$ firebase --version
3.5.0
###ログイン
- CLIコマンド実行
$ firebase login
-
ブラウザでアカウントログイン
-
ログイン成功
###初期化
$ firebase init
- Hostingを選べる
-
プロジェクトを選べる
-
完成
###リアルタイムデータベース機能の組み込み
<script src="https://www.gstatic.com/firebasejs/3.7.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "XXXXXXX",
authDomain: "webchatdemo-XXXXX.firebaseapp.com",
databaseURL: "https://webchatdemo-XXXXX.firebaseio.com",
storageBucket: "webchatdemo-XXXXXx.appspot.com",
messagingSenderId: "00000000000000"
};
firebase.initializeApp(config);
</script>
###firebaseのリアルタイムデータベースのルールを設定する
###chat機能を追加
<div id='messagesDiv'></div>
<input type='text' id='nameInput' placeholder='Name'>
<input type='text' id='messageInput' placeholder='Message...'>
<script type='text/javascript'>
var messagesRef = firebase.database().ref('/');
$('#messageInput').keypress(function (e) {
if (e.keyCode == 13) {
var name = $('#nameInput').val();
var text = $('#messageInput').val();
messagesRef.push({name:name, text:text});
$('#messageInput').val('');
}
});
messagesRef.on('child_added', function (snapshot) {
var message = snapshot.val();
console.log(message.name);
if (message.name) {
$('<div/>').text(message.text).prepend($('<em/>').text(message.name+': ')).appendTo($('#messagesDiv'));
$('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
}
});
</script>
###説明 - pushメソッド
- データのリストに追加する
- 新しいノードをリストにプッシュするたびに、データベースから /[unique-user-id]/[xxx] のような一意のキーが生成される
###説明 - on('child_added')イベント
- child_added イベントがデータベースからアイテムのリストを取得するために使用する
- コンテンツ全体を返すvalueメソッドとは異なり、child_addedは既存の子ごとに1回トリガーされる
- さらに、指定されたパスに新しい子が追加されると、再トリガーされる
- イベントコールバックには、新しい子のデータを含んでいるスナップショットが渡される
###リリース
firebase deploy
firebase open hosting:site
#ご静聴ありがとうございます