近年バックエンドでコードを書かずFirebaseを利用する方が増えてきています。

Firebaseを利用することにより、今までバックエンドを書かないと実現できなかったデータの共有などがバックエンドを書かずに実現することが可能です。

結果、フロントエンジニアでも気軽に複雑なサービスを提供することができます。

今回は、そんなFirebaseをどうやってJimdoに取り込むかを記載します。

FirebaseはGoogleが提供している、モバイルおよびWebアプリケーションのバックエンドサービスです。

Firebaseの中には、バックエンドを作らずデータを共有できるデータベース(FireStore)やストレージ(Storage)、プッシュ通知を送れる機能(Cloud Messaging)などいろいろなサービスを保有しています。

今までバックエンドを作らないと実現できなかった機能を、バックエンドを作らず実現することができ、Firebaseを使えば開発費削減や工数削減が可能です。

まずはじめに、Firebaseの設定を行います。

新しくFirebaseにアプリを設定します。

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

SDKの組み込み方法をメモしておきます。

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

Jimdoで作成したホームページのヘッダーに先ほど、Firebaseで表示されたSDKの内容を転記します。

まず、Jimdoのヘッダー設定画面を表示します。

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

最後に、保存ボタンを押してFirebaseの導入完了です。

最後に、実際に組み込んだFirebaseを使って、FireStoreにアクセスしてデータを読み出してみます。

FireStoreを組み込みたい画面を表示し、HTMLブロックを追加します。

作成した、HTMLブロックにFireStoreからデータを取得しコンソールに表示するコードを記述します。

※読み出すデータはダミーとなっています。サンプルを試す際は「users」の部分をご自身で用意した内容に書き換えてください。

これで組み込み完了です！

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