自分用のメモです。
導入は以下の記事を参考に。
・Firebaseの始め方
手っ取り早く試したい方はFirebase導入後、"/public/index.html" に以下のコードを貼り付ければ動きます。（Firebase設定の記述は削除）
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Firebase BBS</title>
<style lang="">
.entry {
border-top: 1px solid #ccc;
padding-top: 10px;
margin-top: 10px;
}
#comment {
border-radius: 3px;
padding: 5px 10px;
width: 400px;
font-size: 16px;
}
#submit {
background: #eee;
border-radius: 3px;
display: inline-block;
padding: 5px 10px;
}
#submit:hover {
cursor: pointer;
}
</style>
</head>
<body>
<input type="text" id="comment" placeholder="コメント">
<div id="submit">登録</div>
<div id="entryArea"></div>
<script>
const db = firebase.database();
const commentRef = db.ref();
const submit = document.getElementById("submit");
const entryArea = document.getElementById("entryArea");
let id = 0;
const getNow = ()=> {
const dt = new Date();
let formatStr = 'YYYY-MM-DD hh:mm:ss';
formatStr = formatStr.replace(/YYYY/g, dt.getFullYear());
formatStr = formatStr.replace(/MM/g, dt.getMonth());
formatStr = formatStr.replace(/DD/g, dt.getDate());
formatStr = formatStr.replace(/hh/g, dt.getHours());
formatStr = formatStr.replace(/mm/g, dt.getMinutes());
formatStr = formatStr.replace(/ss/g, dt.getSeconds());
return formatStr;
}
const appendElm = (elm, dataArr)=> {
for (let i = 0; i < dataArr.length; i++) {
elm.appendChild(dataArr[i])
}
}
const createElm = (tag, clsName, html)=> {
let elm = document.createElement(tag);
if(clsName){
elm.className = clsName;
}
if(html){
elm.innerHTML = html;
}
return elm;
}
const createEntry = (comment, date)=> {
let commentElm = createElm("div", "entry-comment", comment);
let dateElm = createElm("div", "entry-date", date);
let entryElm = createElm("div", "entry");
appendElm(entryElm, [commentElm, dateElm]);
appendElm(entryArea, [entryElm]);
}
submit.addEventListener("click", ()=> {
let comment = document.getElementById("comment").value;
if(!comment) {
alert("入力してください");
return false;
}
let myComment = db.ref("/" + id);
let date = getNow();
myComment.set({comment:comment, date:date});
}, false);
// 以下からがコア
commentRef.on("value", (snapshot)=> {
let comments = snapshot.val();
if(comments !== null) {
id = comments.length;
}
});
commentRef.on("child_added", (snapshot)=> {
createEntry(snapshot.val().comment, snapshot.val().date);
});
commentRef.on("child_changed", (snapshot)=> {
createEntry(snapshot.val().comment, snapshot.val().date);
});
</script>
</body>
</html>
フロントとかデザイナーの人がこれ覚えるだけでサービスとアプリ作れちゃいます。すごい便利。