JavaScriptで始めるFirebase入門

##アジェンダ
* Firebaseとは
* Firebaseの特徴 
* Firebaseの料金
* Firebaseでウェブチャットを作ってみよう

---
##Firebaseとは
* 2011年アメリカで始まったBaaSが、2014年Googleに買収された
* Firebaseはその他のBaaSと同様、サーバー構築やメンテナスが不要である
* さらに、リアルタイムでデータを格納したり引き出したりすることができる


---

##Firebaseの特徴
* リアルタイムデータベース
* 静的ウェブサイトホスティング
* ユーザ認証とデータベースアクセス管理

---
##Firebaseの特徴
![スクリーンショット 2017-03-12 14.57.00.png](https://qiita-image-store.s3.amazonaws.com/0/13451/b8c26604-800d-f7e1-9319-c210dbeefe2d.png)

---
##Firebaseの特徴
* よいアプリを開発するために、いろいろな機能が提供されている
* Firebaseを利用してユーザ層の拡大や収益の増加もできる


---
##料金 - 無料範囲
* リアルタイムデータベース
 * 100の同時接続
 * 1GBの容量
 * 10GBの転送量
* ストレージ
 * 5GBの容量
 * 1GB/dayの転送量
 * 2万回のUpload
 * 5万回のDownload
* 静的ページホスティング
 * 1GBの容量
 * 10GBの転送量
 * 独自ドメイン＆無料SSL

* 開発のために、ぜんぜん余裕である

---
##料金 - 有料
* 25ドル/月以下
 * 同時接続数が無制限など
* 25ドル/月以上
 * 従量課金 



---
##Firebaseでウェブチャットを作ってみよう


---
###新規プロジェクト
![スクリーンショット 2017-03-12 18.52.20.png](https://qiita-image-store.s3.amazonaws.com/0/13451/f2163c7b-6566-6762-2bc6-ee6f3f0e2015.png)

---
###新規プロジェクト
![スクリーンショット 2017-03-12 18.53.03.png](https://qiita-image-store.s3.amazonaws.com/0/13451/41bcd5d6-a915-8bc7-45cc-b538b52a8ca8.png)

---
###開発ツール
* インストール

```js
$ npm install -g firebase-tools
$ firebase --version
3.5.0
```



---

###ログイン

* CLIコマンド実行

```js
$ firebase login
```

* ブラウザでアカウントログイン
![スクリーンショット 2017-03-12 20.08.39.png](https://qiita-image-store.s3.amazonaws.com/0/13451/3982bef8-a205-ab00-16ce-aa56b9219975.png)

* ログイン成功
![スクリーンショット 2017-03-12 20.09.01.png](https://qiita-image-store.s3.amazonaws.com/0/13451/fef62d73-ef2e-8085-810f-6a152bbe541e.png)

---
###初期化


```js

$ firebase init
```

* Hostingを選べる

![スクリーンショット 2017-03-12 20.39.54.png](https://qiita-image-store.s3.amazonaws.com/0/13451/61e202cf-a596-b0b0-9c2c-22df63793f32.png)

* プロジェクトを選べる
![スクリーンショット 2017-03-12 20.42.37.png](https://qiita-image-store.s3.amazonaws.com/0/13451/dc65b07e-062d-1d08-bdfe-405e6c07af0c.png)

* 完成
![スクリーンショット 2017-03-12 21.06.07.png](https://qiita-image-store.s3.amazonaws.com/0/13451/a510b9b5-8f06-cd18-d7da-08eed624eef1.png)


---
###リアルタイムデータベース機能の組み込み

```js

<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>
```
![スクリーンショット 2017-03-12 21.10.36.png](https://qiita-image-store.s3.amazonaws.com/0/13451/411f2c5c-f50c-a04d-15a2-df925149b6c6.png)


---
###firebaseのリアルタイムデータベースのルールを設定する
![スクリーンショット 2017-03-12 22.08.54.png](https://qiita-image-store.s3.amazonaws.com/0/13451/cc0710cd-c247-730a-94b5-6bba69c6c260.png)




---
###chat機能を追加

```js
<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] のような一意のキーが生成される

<img width="566" alt="スクリーンショット 2017-03-13 8.14.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/13451/46520469-1bb4-0179-5d55-974aeaa2d357.png">


---
###説明 - on('child_added')イベント
 * child_added イベントがデータベースからアイテムのリストを取得するために使用する
 * コンテンツ全体を返すvalueメソッドとは異なり、child_addedは既存の子ごとに1回トリガーされる
 * さらに、指定されたパスに新しい子が追加されると、再トリガーされる
 * イベントコールバックには、新しい子のデータを含んでいるスナップショットが渡される


---
###リリース

```js
firebase deploy

firebase open hosting:site
```

* デモ
 * https://webchatdemo-6350f.firebaseapp.com

---
#ご静聴ありがとうございます