Firebaseの初期設定をCDNで行う
記事IT・テクノロジー
Firebaseの初期設定をCDNで行う
Firebase の機能を利用するには、Firebase の設定を行う必要があります。 Firebase の設定方法はいくつかありますが、この記事では CDN(Contents Delivery Network)を利用して設定する方法を紹介します。
Firebase をはじめとして、Web サイトから提供するアプリやサービスはネットワーク（インターネット）を利用することを前提にしているので、必要な「モジュール」をインターネットを通じて読み込むことで、特別なインストールをしないで利用する事が可能になります。Web ブラウザで動作するフロントエンドのプログラムは基本的に Javascript です。
Web アプリや Web サービスのプログラムも Web ブラウザで動作する部分は Javascript で記述して、Web サーバーにプログラムをおく事で読み込んでいるわけですが、これをインターネット上の別のサーバーが提供するプログラムを読み込んで利用するのが CDN です。
CDN を使うとインストールなしで利用できる
Firebase も Web アプリや Web サービスで利用することを想定しているので、フロントエンドから利用するプログラムは CDN で取り込む事ができます。
Firebase もこの CDN のプログラムを提供していて、HTML ファイルで必要な Javascript のファイルをインターネットを通して読み込むことで利用できるようになります。
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="ｈｔｔｐｓ://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
ｈｔｔｐｓ://firebase.google.com/docs/web/setup#available-libraries -->
<script src="ｈｔｔｐｓ://www.gstatic.com/firebasejs/8.2.1/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
const firebaseConfig = {
apiKey: "API_KEY",
authDomain: "PROJECT_ID.firebaseapp.com",
databaseURL: "ｈｔｔｐｓ://PROJECT_ID.firebaseio.com",
projectId: "PROJECT_ID",
storageBucket: "PROJECT_ID.appspot.com",
messagingSenderId: "SENDER_ID",
appId: "APP_ID",
measurementId: "G-MEASUREMENT_ID",
;
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
の記述を HTML に貼り付けるだけで利用できます。 これは、Firebase コンソールの「プロジェクトを設定（Project settings）」に行って、メニューから「全般（General）」を選択して、「マイアプリ（Your apps）」のところで「CDN」を選択すると、登録した Firebase の情報が表示されるので、これをカット＆ペーストすれば利用できます。
これだけで、Firebase の機能が利用できるようになるので簡単です。
Firebase のホスティングを使うとさらに簡単にできる！
「マイアプリ（Your apps）」の選択肢の中に CDN の前に「自動（Automatic）」という選択肢があるのにお気づきの方もいらっしゃるかと思いますが、実は Firebase のホスティングを利用するとさらに簡単な設定で Firebase を利用できます。
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="/__/firebase/8.2.1/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
ｈｔｔｐｓ://firebase.google.com/docs/web/setup#available-libraries -->
<script src="/__/firebase/8.2.1/firebase-analytics.js"></script>
<!-- Initialize Firebase -->
<script src="/__/firebase/init.js"></script>
先程の CDN の読み込みよりシンプルになっています。これは、Firebase のホスティングサーバから必要な情報を取得できるため記述を省略できるためです。
こうした初期設定を考えると、Firebase を利用した Web サービスや Web アプリを実装する場合、Web ホスティングも含めて Firebase の機能を利用すると、実装がシンプルになります。
Firebase はトータルソリューションを提供
一言で言ってしまえば、Firebase は Web アプリや Web サービスで必要な「裏方」の機能をまとめて提供しているという事です。 実際に開発する方は、開発で求められている「機能の実現」に集中できます。
Web ブラウザで動作しているフロントエンドのプログラムは Web サービス、Web サービスの「表の顔」です。しかし、殆どの Web サービスや Web アプリはバックエンドで動作している「裏の顔」があります。フロントエンドは利用者から目に見える部分なので、目立ちますが実は沢山の「裏方」にサポートされて初めて機能するアプリやサービスが殆どです。
もちろん、Web サービスも Web アプリも「必要な機能」が決まって仕舞えばやる事殆ど同じ仕事をやる必要があるので、フロントエンド中心でバックエンドを極力減らした開発ももちろんできます。 しかし、セキュリティや全体のバランスを考えると役割を決めて分担して実装した方がより良いアプリやサービスを実装できます。
Firebase は、多くの Web サービスや Web アプリで必要とされる機能をまとめて「裏方」の仕事としてまとめたものです。
Firebase を利用すると、フロントエンドの実装はシンプルにできて初心者でも、限られた時間とリソースで開発をしなければいけないフリーランスの方でも手軽に本格的な Web アプリや Web サービスを開発できます。
まとめ
Firebase の初期設定は、いくつかやり方があります。一番シンプルな方法は HTML ファイルから CDN を利用して必要なモジュール（Javascript）読み込む方法です。さらに、Web ホスティングにも Firebase を利用する場合、さらに初期設定を簡単にすることができます。これは、必要な情報を Web ホスティングをしている Firebase のサーバーが取得できるためです。
Firebase のサポートする機能を利用すると、開発者は「必要な機能」の実装に集中できるため、短期間で高品質の Web アプリや Web サービスの開発が可能になります。多くの、裏方の仕事を Firebase に任せる事ができるため、初心者や時間とリソースに限りがあるフリーランスの方でも高度の開発が可能になります。
詳細の設定は、別途ドキュメント作成中です。近日中にダウンロード可能な資料の配布を始めますのでご利用ください。
