2019JimdoでFirebaseを使ってデータのリアルタイム更新!前回JimdoにFirebaseを導入する記事を書いたので、今回は実際にFirebaseを使ってどんなことができるのかご紹介しようと思います。今回はFirebaseの中のリアルタイムで更新を反映できるデータベースのFireStoreを使って、ボタンをタップすると画面がリアルタイムで更新される機能を作ってみようと思います。FireStoreは自分でサーバーを立てなくても、WEBアプリやモバイルアプリから簡単に接続できる、SDKを提供しています。それを組み込むことで、簡単にクラウド上にあるデータベースにアクセスできます。B」のボタンをクリックすると、それぞれのクリック回数がリアルタイムで更新される機能を作ります。データベースにデータを保存しているため画面をリロードしても回数が消えることはありません。クラウド上にデータを保存しているため、自分以外の人がクリックしても即座に画面に情報が反映されます。クリエーターを前提としています。HTMLとJavaScriptのプログラムを読める、または書ける方を対象としています。以下手順にてこの機能を作ります。※この記事はFirebase導入済みを前提といたします。Firebaseを導入できていない方はこちらの記事を参照してください。1.【Firebase】FireStoreにデータを登録する2.【Jimdo】データ表示用のグラフを作る3.【Jimdo】データ更新用のボタンを作る4.【Jimdo】2で作ったコードを編集して、更新があったら画面を更新する1.【firebase】firestoreにデータを登録するまず、今回作る機能用にFireStoreにデータを登録します。Firebaseを開き、使うプロジェクトを選択します。プロジェクトを開いたら、左のメニューの中から「Database」を選択し、Firestoreの画面を開きます。今回はサンプルなので、テストモードで開始します。「asia-northeast2」(大阪)をお勧めします。「コレクションを開始」をクリックしてコレクションを作成します。コレクションIDを「shop」と入力します。引き続き以下のように設定し、保存をクリックします。※フィールドは+ボタンで追加できます。B」のドキュメントを追加します。Bのドキュメントを作成します。これで手順1の作業は終了です。【Jimdo】データ表示用のグラフを作る続いて、Jimdo側でデータを表示できるようにします。Jimdoでウィジェット/HTMLブロックを追加します。ブロックを追加できたら以下ソースコードを記述します。グラフ更新myBarChart.update();});/*]]>*/</script>最後に保存ボタンを押して、保存してください。グラフが表示されればOKです。※もし表示されない場合は、デバッグツールを使ってwebページをデバッグしてください。3.【Jimdo】データ更新用のボタンを作るボタン用のウィジェット/HTMLブロックを追加します。追加できたら、以下コードを記述します。{db.collection('shop').doc(doc.id).update({"count":0});});});};/*]]>*/</script>4.【Jimdo】2で作ったコードを編集して、更新があったら画面を更新する最後に、データの更新があった時に画面の更新がされるようにコードを記述します。手順2で作ったウィジェット/HTMLブロックのscriptタグの最後に以下コードを追記します。doc.data().count;}});myBarChart.update();});保存を押したら、全最初に想定していた機能ができているはずです!まとめさて、皆さんはうまく機能を作ることができたでしょうか。できた方はおめでとうございます!新しくアイディアが浮かんだらぜひ活用してみてください!できなかったはもう一歩!Firebaseのエンジニアコミュニティもありその辺で相談してみるのもいいかもしれません。最近では、色々な技術を組み合わせることにより実現したい機能をより早く、より手軽に実現することが可能です。Cookie(クッキー)を利用しています。使用に同意いただける場合は、「同意します」をクリックしてください。ポリシーをご確認ください。