前回JimdoにFirebaseを導入する記事を書いたので、今回は実際にFirebaseを使ってどんなことができるのかご紹介しようと思います。
今回はFirebaseの中のリアルタイムで更新を反映できるデータベースのFireStoreを使って、ボタンをタップすると画面がリアルタイムで更新される機能を作ってみようと思います。
FireStoreは自分でサーバーを立てなくても、WEBアプリやモバイルアプリから簡単に接続できる、SDKを提供しています。それを組み込むことで、簡単にクラウド上にあるデータベースにアクセスできます。
作る機能
以下「shop A」、「shop B」のボタンをクリックすると、それぞれのクリック回数がリアルタイムで更新される機能を作ります。
また、データベースにデータを保存しているため画面をリロードしても回数が消えることはありません。しかも、クラウド上にデータを保存しているため、自分以外の人がクリックしても即座に画面に情報が反映されます。
必要知識
本記事では、Jimdo クリエーターを前提としています。
HTMLとJavaScriptのプログラムを読める、または書ける方を対象としています。
作りかた
手順
以下手順にてこの機能を作ります。
※この記事はFirebase導入済みを前提といたします。
まだFirebaseを導入できていない方はこちらの記事を参照してください。
１．【Firebase】FireStoreにデータを登録する
２．【Jimdo】データ表示用のグラフを作る
３．【Jimdo】データ更新用のボタンを作る
４．【Jimdo】２で作ったコードを編集して、更新があったら画面を更新する
１．【firebase】firestoreにデータを登録する
まず、今回作る機能用にFireStoreにデータを登録します。
今回はshopという括りの中に「shop A」と「shop B」を作ります。
Firebaseを開き、使うプロジェクトを選択します。
プロジェクトを開いたら、左のメニューの中から「Database」を選択し、Firestoreの画面を開きます。
今回はサンプルなので、テストモードで開始します。
ロケーションは事前に設定されているものに依存することがありますが
もし選択できるのであれば「asia-northeast1」(東京) or 「asia-northeast2」(大阪)をお勧めします。
「コレクションを開始」をクリックしてコレクションを作成します。
コレクションIDを「shop」と入力します。
引き続き以下のように設定し、保存をクリックします。
※フィールドは+ボタンで追加できます。
続いて、ドキュメントを追加をクリックして、「shop B」のドキュメントを追加します。
以下内容でshop Bのドキュメントを作成します。
これで手順１の作業は終了です。
【Jimdo】データ表示用のグラフを作る
続いて、Jimdo側でデータを表示できるようにします。
まず、Jimdoでウィジェット/HTMLブロックを追加します。
ブロックを追加できたら以下ソースコードを記述します。
<canvas id="myBarChart">
</canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-firestore.js"></script>
<script>
/* <![CDATA[ */
var ctx = document.getElementById("myBarChart");
// firestore初期化
var db = firebase.firestore();
// Default
var labels = [];
var count = [];
var maxCount = 0;
var config = {
type: 'bar',
data: {
labels: labels,
datasets: [
{
label: '数',
data: count,
backgroundColor: "rgba(219,39,91,0.5)"
}
]
},
options: {
title: {
display: true,
text: 'クリック数'
},
animation: {
duration: 0
},
scales: {
yAxes: [{
ticks: {
suggestedMax: maxCount + 10,
suggestedMin: 0,
stepSize: 10,
callback: function (value, index, values) {
return value + '人'
}
}
}]
},
}
};
// グラフ作成
var myBarChart = new Chart(ctx, config);
// 初期表示
db.collection("shop").get().then((querySnapshot) => {
querySnapshot.forEach((doc) => {
labels.push(doc.data().name)
count.push(doc.data().count)
if (maxCount < doc.data().count) {
maxCount = doc.data().count;
}
});
// グラフ更新
myBarChart.update();
});
/*]]>*/
</script>
最後に保存ボタンを押して、保存してください。
グラフが表示されればOKです。
※もし表示されない場合は、デバッグツールを使ってwebページをデバッグしてください。
３．【Jimdo】データ更新用のボタンを作る
ボタン用のウィジェット/HTMLブロックを追加します。
追加できたら、以下コードを記述します。
<button type="button" id="text-buttonA">shop A</button> <button type="button" id="text-buttonB">shop B</button> <button type="button" id="text-buttonClear">クリア</button>
<script>
/* <![CDATA[ */
// shopAボタンが押された時
document.getElementById("text-buttonA").onclick = function() {
db.collection("shop").where("name", "==", "shop A").get().then((querySnapshot) => {
db.collection('shop').doc(querySnapshot.docs[0].id).update({"count":querySnapshot.docs[0].data().count + 1});
});
};
// shopBボタンが押された時
document.getElementById("text-buttonB").onclick = function() {
db.collection("shop").where("name", "==", "shop B").get().then((querySnapshot) => {
db.collection('shop').doc(querySnapshot.docs[0].id).update({"count":querySnapshot.docs[0].data().count + 1});
});
};
// クリアボタンが押された時
document.getElementById("text-buttonClear").onclick = function() {
db.collection("shop").get().then((querySnapshot) => {
querySnapshot.forEach((doc) => {
db.collection('shop').doc(doc.id).update({"count":0});
});
});
};
/*]]>*/
</script>
４．【Jimdo】２で作ったコードを編集して、更新があったら画面を更新する
最後に、データの更新があった時に画面の更新がされるようにコードを記述します。
手順２で作ったウィジェット/HTMLブロックのscriptタグの最後に以下コードを追記します。
// 情報が更新された時の処理をセット
db.collection("shop").onSnapshot(function (querySnapshot) {
labels.length = 0;
count.length = 0;
querySnapshot.forEach((doc, index) => {
labels.push(doc.data().name);
count.push(doc.data().count);
console.log(doc.data());
console.log(count[index]);
if (maxCount < doc.data().count) {
maxCount = doc.data().count;
}
});
myBarChart.update();
});
保存を押したら、全最初に想定していた機能ができているはずです！
まとめ
さて、皆さんはうまく機能を作ることができたでしょうか。
できた方はおめでとうございます！
新しくアイディアが浮かんだらぜひ活用してみてください！
できなかったはもう一歩！
Firebaseのエンジニアコミュニティもありその辺で相談してみるのもいいかもしれません。
最近では、色々な技術を組み合わせることにより
実現したい機能をより早く、より手軽に実現することが可能です。
Jimdoだけで閉じるのではなく色々な技術と組み合わせて見るのも面白いと思います！