【続】javascriptとhtmlだけ5分で作れるチャット！+ Firebaseを使ってWeb上に公開しちゃおう！

#前書き
esa.ioで社内向けに書いたものをこちらに移転。

以前、リアルタイムデータベースの[Milkcocoa（ミルクココア）](https://mlkcca.com/)を用いた

 - [javascriptとhtmlだけ5分で作れるチャット！](http://qiita.com/H_Crane/items/a1e19c5d9c62cb686d1f)

を記事として書きましたが、今回は同時にWeb上に公開する手順まで書きたいと思います。
（タイトルに【続】がついていますが、こちらから読んでも内容が伝わるように、一部上記の記事と内容が被っております、ご了承ください。）

#[Firebase](https://console.firebase.google.com/)を使おう！
前回の記事でも書きましたが、

```
通常チャットのようなものを作る場合、フロントだけで作るというのはほぼ無理
・ サーバーで相手からの通信を確認し別の人に送る
・ トーク内容をデータベースに保存してor取り出して
のような処理を自前で作らなきゃいけない、、、
```

そこで今回使うのが、リアルタイムデータベースこと[Firebase](https://console.firebase.google.com/)です！

##[Firebase](https://console.firebase.google.com/)で何ができるの？
今回のゴールは
　1. javascriptとhtmlでチャットを作る
　2. Web上に公開
上記の２点です。

Firebaseを用いれば、**上記の２つを同時に実装することができる**のです！

※今回は[Firebase](https://console.firebase.google.com/)でチャット部分も作るので、[javascriptとhtmlだけ5分で作れるチャット！](http://qiita.com/H_Crane/items/a1e19c5d9c62cb686d1f)で作ったチャットを使いまわしたい場合は、Firebaseでチャットを作る部分は読み飛ばしてください。

#導入
##（１）Firebaseのセットアップ
[Firebase](https://firebase.google.com/)でアカウント登録。（Googleアカウントでサインアップなのでなければ作成）

ログインすると、以下の一番左の画面になる。
![a9e4fba3-f4c6-49c0-9942-d281c4f9cac7.jpg](https://qiita-image-store.s3.amazonaws.com/0/175242/aee54c76-1efb-1366-ea40-58d504697b8b.jpeg)

①[``新規プロジェクトを作成``]でプロジェクトの作成をする。
② [``プロジェクト名``]と[``国/地域``]を設定。（プロジェクト名は自分が好きなもので大丈夫です。）

以上で必要なセットアップは完了です。

##（２）Firebaseを使ってチャットを作る
###①Firebaseでプロジェクト作成

Firebaseでチャットを使うために、アプリを追加します。

![スクリーンショット 2021-05-23 4.38.43 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/a8993159-735e-f0bb-90ff-c13ce48cfb58.png)

手順に従うと必要なコードが入手できます。

![スクリーンショット 2021-05-23 4.43.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/0166cd39-bb97-6000-d3fd-e3c53b156fe7.png)


###②チャット部分作成
以下、チャット部分はコピペでok。入手したコードは各自置き換えてください。

```index.html
<!doctype html>
<html lang="ja">

 <head>
　<!-- Firebaseライブラリを読み込む バージョンは2.3.2という古いのを使っています -->
  <script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script>

  <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="chat.js"></script>

  <!-- ↓ 先ほど入手したコード　↓ -->
  <script src="https://www.gstatic.com/firebasejs/3.7.8/firebase-app.js"></script>
  <script>
      // Initialize Firebase
      var config = {
        apiKey: "各自",
        authDomain: "各自",
        databaseURL: "https://各自",
        storageBucket: "各自",
        messagingSenderId: "各自"
      };
      firebase.initializeApp(config);
  </script>
  <!-- ↑ 先ほど入手したコード ↑ -->

  <!-- ↓ 少ないのでcssベタ張り ↓ -->
  <style>
    ul > li:first-child {
     color: black;
     font-size: 25px;
    }
    ul > li:nth-child(2n) {
     color: blue;
    }
    ul > li:nth-child(2n):before {
     content:"ユーザー名："
    }
  </style>
  <!-- ↑ 少ないのでcssベタ張り ↑ -->

 </head>

 <body>

  <div>
   <!-- 投稿者 -->
   <div>
    <p>ユーザ名</p>
    <textarea name="" id="jsi-name" cols="10" rows="1"></textarea>
   </div>

   <!-- メッセージを打ち込む部分 -->
   <div>
    <p>内容</p>
    <textarea name="" id="jsi-msg" cols="30" rows="4"></textarea>
   </div>
  </div>

  <!-- メッセージを送る部分 -->
  <button name="button" id="jsi-button">send message!</button>

  <!-- チャット内容が動的に生成される部分 -->
  <ul id="jsi-board" style="list-style:none;">
    <li>〜チャット内容〜</li>
  </ul>
 </body>
</html>
```

```chat.js
var CHAT = CHAT || {};

CHAT.fire = {
  init:function(){
    this.setParameters();
    this.bindEvent();
  },

  setParameters:function(){
    this.$name = $('#jsi-name');
    this.$textArea = $('#jsi-msg');
    this.$board = $('#jsi-board');
    this.$button = $('#jsi-button');

    //データベースと接続する。各自登録時に出たコードに書き換え。
    this.chatDataStore = new Firebase('https://<各自>.firebaseio.com/');
  },

  bindEvent:function(){
    var self = this;
    this.$button.on('click',function(){
      self.sendMsg();
    });

    //DBの「talks」から取り出す
    this.chatDataStore.child('talks').on('child_added',function(data){
      var json = data.val();
      self.addText(json['user']);
      self.addText(json['message']);
    });
  },

  //ユーザー、メッセージ送信
  sendMsg:function(){
    var self = this;
    if (this.$textArea.val() == ''){ return }

    var name = this.$name.val();
    var text = this.$textArea.val();

    //データベースの中の「talks」に値を送り格納（'talks'は各自任意に設定可能）
    self.chatDataStore.child('talks').push({user:name, message:text});
    self.$textArea.val('');
  },

  //受け取り後の処理
  addText:function(json){
   var msgDom = $('<li>');
   msgDom.html(json);
   this.$board.append(msgDom[0]);
  }
}

$(function(){
  CHAT.fire.init();
});
```
※本来はサーバーへ通信成功・失敗のエラーハンドリングをすべきですが、省略しています。

###③Firebaseのデータベース設定変更

管理画面から``Realtime Database``を選択し、データベースを作成します。

![スクリーンショット 2021-05-23 5.04.12 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175242/5dbf3936-81e1-2af1-d0aa-b4d8046ade52.png)

Firebaseでチャットを使うためにデータベースの権限を変更します。
デフォルトでは読み込み書き込みができないので、図のように変更してください。
（``false``になっている箇所を**true**に変更します）

ここまでで、チャット部分は完成です。

##（３）Firebaseを使ってチャットをWeb上に公開する
Web上に公開するには、Web上にあるFirebaseにあげるため必要があります。
そのツールである**Firebase Command Line Interface (CLI)**を用意する必要があります。
###①Firebase Command Line Interfaceのインストール
####node.js,npmのインストール 
[Macにnode.jsをインストールする手順](http://qiita.com/akakuro43/items/600e7e4695588ab2958d)

####npmコマンドでCLIインストール

```
$ sudo npm install -g firebase-tools
```
(sudo つけといた方が無難)

###②Firebaseにログイン
プロジェクトファイルを置きたいディレクトリを作成し、terminal上で移動。
そのディレクトリでFirebaseにログインする。以下のコマンドから

```
$ firebase login
```

ここで、googleのアカウントを許可していないと、terminal上で
![7fa6d6c0-eec1-439a-a921-e21f187ba16a.png](https://qiita-image-store.s3.amazonaws.com/0/175242/b052ee49-9279-43da-0033-6cb1d9348e78.png)
とでるので``Y``を押して``Enter``で許可します。するとブラウザが勝手に開かれる。

![2f290051-3990-4729-9e63-1066bb87003c.png](https://qiita-image-store.s3.amazonaws.com/0/175242/dd186d71-4454-129c-7703-d130f8a6376c.png)
許可するとログイン成功となる。

###③Firebaseをセットアップ
ディレクトリを初期化します。

```
$ firebase init
```
イメージとしては``$ git init``みたいなものです。

以下の選択が出るので、``Hosting: Configure and deploy Firebase Hosting sites``を選択。
（``space``で選択してからEnterを押してください）

```
? What Firebase CLI features do you want to setup for this folder? 
 ◉ Database: Deploy Firebase Realtime Database Rules
❯◉ Hosting: Configure and deploy Firebase Hosting sites
```

あとは２、３個聞かれますが、全部終わるまで``enter``でok。

上記全てをこなしていれば、ディレクトリ内に``publicディレクトリ``が勝手に作られおり、その中に``index.html``と``404.html``が生成されているはず。
このpublicディレクトリ内のindex.htmlを、先ほど作ったものをと置き換え、jsファイルも追加する。

###④Firebaseでサイトを公開
最後に入れ替えたファイルをFirebaseにデプロイ（アップロード）します。

```
$ firebase deploy
```

これで完了！
Firebase管理画面の左メニューの``Hosting``からサイトのURLに飛ぶことができる。

<img width="290" alt="3bfc8bfb-cf0f-491f-8d91-a34351f8e8b7.png" src="https://qiita-image-store.s3.amazonaws.com/0/175242/4f3bfdb3-ff94-f0a3-8fee-587e621e6b97.png">

####※もしデプロイできなかったら
デプロイする前に以下を、terminal上で打ち込んでください。
（新しいエイリアスを作成するコマンド）

```
$ firebase use --add
```
すると以下のように出るので、
![5944cef2-f4b9-4499-9d2a-f41402f8d94b.jpg](https://qiita-image-store.s3.amazonaws.com/0/175242/dddf6259-db46-d80d-ec5b-35ca1df7db90.jpeg)
１、Which project do you want to add?
作ったプロジェクトID（最初なので１つしかないはず）を選択。

２、What alias do you want to use for this project?
※入力なしでエンター押し続けても何も反応しないので注意してください。

なにかエイリアス名をつける必要があるので、適当につけてください。
(自分は適当に``demo``ってつけました)

その後もう一度``$ firebase deploy``コマンドを打ってみてください。

追記
先の設定でプロジェクトを指定してしまった場合以下のエラーが出るようです

```terminal
Error: Cannot understand what targets to deploy. Check that you specified valid targets if you used the --only or --except flag. Otherwise, check your firebase.json to ensure that your project is initialized for the desired features.
```

この場合は``firebase.json``を以下に書き換え

```json
{
  "hosting": {
    "public": "public"
  }
}
```

その場に,``public``を作成して、``index.html``を``public``ディレクトリ内に入れてから、サイドデプロイコマンドでお願いします！

##完成系
![16ce0825-661f-4082-b38c-9f9b3d748fbd.gif](https://qiita-image-store.s3.amazonaws.com/0/175242/99e48429-31a2-49ec-e2b6-68c712cb8808.gif)

上記の時の、Firebaseコンソール上のデータベースを見てみると、
<img width="550" alt="a8ac733d-72ca-4a31-be2a-fee321485636.png" src="https://qiita-image-store.s3.amazonaws.com/0/175242/9daaad0e-56e8-a366-500e-20fec3affb3d.png">
見事に会話が保存されています！

#後書き
~~半年ほど前に社内向けにこの記事を書いたのですが、その頃よりも触られる方が増え、だいぶFirebaseも賑わってきました。
Firebaseまわりの設定をすると、１５分くらいかかってしまうかもしれませんね、、、笑
多機能な分だけ、使いこなせていないので、もっといろんな機能を試してみたいところです。~~

追記 2021/5/23
３年以上も前の記事なのでだいぶ古くなりました。
コードは動くことを確認していますが、firebaseのバージョンが古いので書き方は古いものとなっています。
新しい書き方で覚えたい場合は、firebaseのリファレンスを読むことをオススメします。

##参考
[Firebase日本語リファレンス](https://firebase.google.com/docs/cli/)
[FirebaseでWebサイトを無料でサクッと公開してみる](http://qiita.com/Ijoru/items/5b27f1c32df2222514fb)</strong>
[FirebaseでWebチャットアプリをデプロイするまで（1時間コース）](http://qiita.com/st5757/items/9e651e8cffaa90681426)
[Firebaseでリアルタイムチャットを構築する](http://qiita.com/ryotakodaira/items/e41c3a60348a9e1c7616)