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

  • 34
    Like
  • 5
    Comment

前書き

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

以前、リアルタイムデータベースのMilkcocoa(ミルクココア)を用いた

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

Firebaseを使おう!

前回の記事でも書きましたが、

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

そこで今回使うのが、リアルタイムデータベースことFirebaseです!

Firebaseで何ができるの?

今回のゴールは
 1. javascriptとhtmlでチャットを作る
 2. Web上に公開
上記の2点です。

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

※今回はFirebaseでチャット部分も作るので、javascriptとhtmlだけ5分で作れるチャット!で作ったチャットを使いまわしたい場合は、Firebaseでチャットを作る部分は読み飛ばしてください。

導入

(1)Firebaseのセットアップ

Firebaseでアカウント登録。(Googleアカウントでサインアップなのでなければ作成)

ログインすると、以下の一番左の画面になる。
a9e4fba3-f4c6-49c0-9942-d281c4f9cac7.jpg

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

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

(2)Firebaseを使ってチャットを作る

①Firebaseでプロジェクト作成

Firebaseでチャットを使うために、先ほどの画像の③[ウェブアプリにFirebaseを追加]をクリックし、Firebaseを使用するのに必要なコードを入手します。
15eb082f-410b-ccbd-f1ce-b9cadaa673bd.jpeg

②チャット部分作成

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

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

 <head>
 //Firebaseライブラリを読み込む
  <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.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>
 </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のデータベース設定変更

Firebaseでチャットを使うためにデータベースの権限を変更します。現状だと読み込み書き込みができないので、図のように変更してください。
cda32cb7-bb93-485f-8ecc-b88c29b85366 (1).png

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

(3)Firebaseを使ってチャットをWeb上に公開する

Web上に公開するには、Web上にあるFirebaseにあげるため必要があります。
そのツールであるFirebase Command Line Interface (CLI)を用意する必要があります。

①Firebase Command Line Interfaceのインストール

node.js,npmのインストール

Macにnode.jsをインストールする手順

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

$ sudo npm install -g firebase-tools

(sudo つけといた方が無難)

②Firebaseにログイン

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

$ firebase login

ここで、googleのアカウントを許可していないと、terminal上で
7fa6d6c0-eec1-439a-a921-e21f187ba16a.png
とでるのでYを押してEnterで許可します。するとブラウザが勝手に開かれる。

2f290051-3990-4729-9e63-1066bb87003c.png
許可するとログイン成功となる。

③Firebaseをセットアップ

ディレクトリを初期化します。

$ firebase init

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

以下の選択が出るので、Hosting: Configure and deploy Firebase Hosting sitesを選択。

? 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

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

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

④Firebaseでサイトを公開

最後に入れ替えたファイルをFirebaseにデプロイ(アップロード)します。

$ firebase deploy

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

3bfc8bfb-cf0f-491f-8d91-a34351f8e8b7.png

※もしデプロイできなかったら

デプロイする前に以下を、terminal上で打ち込んでください。
(新しいエイリアスを作成するコマンド)

$ firebase use --add

すると以下のように出るので、
5944cef2-f4b9-4499-9d2a-f41402f8d94b.jpg
1、Which project do you want to add?
作ったプロジェクトID(最初なので1つしかないはず)を選択。

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

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

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

完成系

16ce0825-661f-4082-b38c-9f9b3d748fbd.gif

上記の時の、Firebaseコンソール上のデータベースを見てみると、
a8ac733d-72ca-4a31-be2a-fee321485636.png
見事に会話が保存されています!

後書き

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

参考

Firebase日本語リファレンス
FirebaseでWebサイトを無料でサクッと公開してみる
FirebaseでWebチャットアプリをデプロイするまで(1時間コース)
Firebaseでリアルタイムチャットを構築する