2019JimdoにFirebaseを導入して開発工数大幅削減!近年バックエンドでコードを書かずFirebaseを利用する方が増えてきています。Firebaseを利用することにより、今までバックエンドを書かないと実現できなかったデータの共有などがバックエンドを書かずに実現することが可能です。結果、フロントエンジニアでも気軽に複雑なサービスを提供することができます。今回は、そんなFirebaseをどうやってJimdoに取り込むかを記載します。FirebaseとはFirebaseはGoogleが提供している、モバイルおよびWebアプリケーションのバックエンドサービスです。Messaging)などいろいろなサービスを保有しています。今までバックエンドを作らないと実現できなかった機能を、バックエンドを作らず実現することができ、Firebaseを使えば開発費削減や工数削減が可能です。Firebaseの準備Firebaseの設定まずはじめに、Firebaseの設定を行います。新しくFirebaseにアプリを設定します。Firebaseの表示用の名前を入力して、「アプリを登録」をクリックします。SDKの組み込み方法をメモしておきます。Overviewの隣にある歯車ボタンをクリックして、「プロジェクトの設定」から確認することができます。JimdoへFirebaseを組み込むJimdoの設定Jimdoで作成したホームページのヘッダーに先ほど、Firebaseで表示されたSDKの内容を転記します。Jimdoのヘッダー設定画面を表示します。続いて、ヘッダーにFirebaseで表示されたSDKの設定方法を転記します。最後に、保存ボタンを押してFirebaseの導入完了です。おまけ(FireStoreを使ってみる)最後に、実際に組み込んだFirebaseを使って、FireStoreにアクセスしてデータを読み出してみます。FireStoreを組み込むFireStoreを組み込みたい画面を表示し、HTMLブロックを追加します。作成した、HTMLブロックにFireStoreからデータを取得しコンソールに表示するコードを記述します。※読み出すデータはダミーとなっています。サンプルを試す際は「users」の部分をご自身で用意した内容に書き換えてください。これで組み込み完了です!正しく設定できていれば、デベロッパーツールのコンソールに読み出した内容が表示されています。Cookie(クッキー)を利用しています。使用に同意いただける場合は、「同意します」をクリックしてください。ポリシーをご確認ください。