
近年バックエンドでコードを書かずFirebaseを利用する方が増えてきています。
Firebaseを利用することにより、今までバックエンドを書かないと実現できなかったデータの共有などがバックエンドを書かずに実現することが可能です。
結果、フロントエンジニアでも気軽に複雑なサービスを提供することができます。
今回は、そんなFirebaseをどうやってJimdoに取り込むかを記載します。
Firebaseとは
FirebaseはGoogleが提供している、モバイルおよびWebアプリケーションのバックエンドサービスです。
Firebaseの中には、バックエンドを作らずデータを共有できるデータベース(FireStore)やストレージ(Storage)、プッシュ通知を送れる機能(Cloud Messaging)などいろいろなサービスを保有しています。
今までバックエンドを作らないと実現できなかった機能を、バックエンドを作らず実現することができ、Firebaseを使えば開発費削減や工数削減が可能です。
Firebaseの準備
Firebaseの設定
まずはじめに、Firebaseの設定を行います。
新しくFirebaseにアプリを設定します。


Firebaseの表示用の名前を入力して、「アプリを登録」をクリックします。

SDKの組み込み方法をメモしておきます。
※この画面を閉じてしまった場合、Project Overviewの隣にある歯車ボタンをクリックして、「プロジェクトの設定」から確認することができます。

JimdoへFirebaseを組み込む
Jimdoの設定
Jimdoで作成したホームページのヘッダーに先ほど、Firebaseで表示されたSDKの内容を転記します。
まず、Jimdoのヘッダー設定画面を表示します。



続いて、ヘッダーにFirebaseで表示されたSDKの設定方法を転記します。

最後に、保存ボタンを押してFirebaseの導入完了です。
おまけ
(FireStoreを使ってみる)
最後に、実際に組み込んだFirebaseを使って、FireStoreにアクセスしてデータを読み出してみます。
FireStoreを組み込む
FireStoreを組み込みたい画面を表示し、HTMLブロックを追加します。



FireStoreからデータを読み出すコードを記述
作成した、HTMLブロックにFireStoreからデータを取得しコンソールに表示するコードを記述します。
※読み出すデータはダミーとなっています。サンプルを試す際は「users」の部分をご自身で用意した内容に書き換えてください。

これで組み込み完了です!
正しく設定できていれば、デベロッパーツールのコンソールに読み出した内容が表示されています。