Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

前書き

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コマンドを打ってみてください。

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

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を以下に書き換え

{
  "hosting": {
    "public": "public"
  }
}

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

完成系

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

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

後書き

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

参考

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

hcrane
iOS Developer
fablic
満足度No.1 のフリマアプリ「ラクマ」を運営しています。
https://fril.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away