firebaseでリアルタイム掲示板をたった２時間でWeb公開する方法

参考にしたサイトはこれ。

このサイトの通りに、掲示板を作成してみる。

Firebaseにログインする。

https://console.firebase.google.com/

プロジェクトを追加

⇒「chatroom」という名前にしてみた

アクセス権の変更

プロジェクトを開いて、「Database」の「ルール」タブを表示

認証をやらないので、アクセス権を下記のようにする。

{

  "rules": {

    ".read": "true",

    ".write": "true"

  }

}

Node.jsをインストールしておく

省略。これやらないと、後続のnpmコマンドが打てない。

firebaseコマンドを打てるようにする

npm install -g firebase-tools

firebaseにログインする

firebase login

⇒「Y」で進む。

もろもろ初期構築する

firebase init

ローカル上でサーバーを動かす

firebase serve

⇒ここでエラー発生。オーマイガー

firebase serveコマンドを実行したときに、エラーになる。

当然「http://localhost:5000/」にアクセスしてみても、何も表示されない。

どうやら、サーバー立ち上げ時に読み込まれるfirebase.jsonが空っぽで作成されてしまう模様。

⇒その前のfirebase initコマンドのときに、Hostingを選択するときの方法が悪かった。

　Hostingに⇒を合わせてEnterを押していた。

　正しくは、Hostingに⇒を合わせて、"Spaceを押してから"Enter

※英語でそうするように書いてあったのに、ちゃんと読めよおれ...

改めて、

firebase serveコマンドを実行したところ、

今度は「http://localhost:5000/」が正しく表示された。

index.htmlを置き換える

デフォルトのページは、なんとも質素な感じ。

firebase initを実行すると、index.htmlが./public配下に作成されている。

これを、掲示板用のhtmlに置き換える。↓

<!DOCTYPE html>

<html><head><meta charset="utf-8">

<title>掲示板</title>



<script>

alert("HTMLコードのTODOの部分を書き換えてください！");

</script>



</head><body>

<h1>掲示板</h1>

<div><textarea id="txt" rows="4" cols="80"></textarea></div>

<div><button onclick="post()">投稿</button></div>

<div><hr></div>

<div><ul id="logs"></ul></div>

<script>

// Firebaseのデータベースを取得

var db = firebase.database();

var bbs_db = db.ref("/bbs/logs");

// ログが追加されたときの処理を記述

function addLog(data) {

    var val = data.val();

    var e = document.getElementById("logs");

    var li = document.createElement("li");

    li.innerHTML = val.text;

    e.appendChild(li);

}

// 誰かがログに追加したら内容を通知するよう設定

bbs_db.limitToLast(10).on("child_added", addLog);

// 投稿ボタンが押されたとき

function post() {

    var txt = document.getElementById("txt");

    bbs_db.push({ text: txt.value });

    txt.value = "";

}

</script>

</body></html>

firebaseスクリプトをindex.htmlに追記する

firebaseサイトの「Overview」内の「ウェブアプリにFirebaseを追加」をクリック

index.htmlのTODO枠にコピペする。

web公開する

参考にしたサイトはこれ。

いまは認証に興味ないので、参考にしたのは３ページ目の

firebase deploy

のみ。

※でも認証やってみたくなったら、めっちゃ参考になりそう。

コマンドラインに表示されたURLにアクセスする

⇒インターネット経由で、サイトを確認することができた。