FirebaseをJavaScriptから利用する方法

2018/07/10 2018/08/18

Firebaseを利用するにあたって、最初にWeb上でプロジェクトを作成しておく必要があります。今回はその設定方法と、ローカル上のJavaScriptから接続するところまで書き留めておきます。

FirebaseはGoogle社のリアルタイムデータベースで主にモバイルアプリ用のサービスなのですが、無償（正確には従量課金だけど個人で使う範囲では無償でいける）で利用できるのでモバイルアプリじゃなくてもいろいろ使えそうです。

個人的にはファーストステップとしてWebブックマークを作ろうと思っています。いつも使っているGoogleブックマークにはちょっと不満があったので、この際自作しようかと思っていて、そのデータ保存先にFirebaseを使おうと思った次第です。（使い方として正しいかはひとまず置いておいて…）

[ad#top-1]

Firebaseのプロジェクト作成方法

まずはFirebaseのWebサイトに行きましょう。

ページの下にスクロールすると色々なサービスのメニューが現れます。今回は「Cloud Firestore」を選びます。こちらはRealtime Databaseの後継版のようです。

以下の画面になります。青い「コンソールを表示する」ボタンをクリックします。

次に「プロジェクトを作成」をクリックします。

以下のような画面が現れます。「プロジェクト名」に任意のプロジェクト名を入力すると自動でプロジェクトIDが生成されます。「国/地域」を日本に設定します。

スクロールしてチェックボックスにチェックした上で、「プロジェクトを作成」ボタンをクリックします。

プロジェクトが作成されます。少し時間がかかるので待ちましょう。

以下のような画面になりました。先ほど設定した「BookMarks」というプロジェクトが生成されています。こちらをクリックしましょう。

以下の管理画面が現れます。左ショルダーバーから「開発」−「Database」をクリックします。

右画面が以下のようになります。白い「Create Database」ボタンをクリックします。

以下の画面が現れるので、「テストモードで開始」を選択し、「有効にする」ボタンを押します。

Databaseが生成されました。ここでは特にフィールドの設定はしません。JavaScript側でフィールドを指定すると自動で生成してくれるみたいです。ここではあくまでテーブルを用意すればいいだけです。

それではJavaScript側からFirebaseに接続してみましょう。

ソースコードは管理画面からゲットできます。

管理画面の「Project Overview」をクリックすると初期画面に戻ります。右画面の「ウェブアプリにFirebaseを追加」をクリックします。

すると、HTMLに埋め込むためのJavaScriptサンプルが現れます。これをコピーしましょう。

但し、1行目の以下のコードはテスト用のコードなので書き換える必要があります。

このドキュメントページから書き換えるコードをゲットします。

赤ラインで示したオプションが必要です。1つ目はFirebaseを使う上で必須、もう１つはFirestoreを使用するためのオプションです。それぞれのコードは青ラインで示しているので、そこからコピペします。

書き換え含めたサンプルプログラムをHTMLのBODY要素内に置きました。これでOKです。

HTMLファイルを開いてみましょう。この時にデベロッパーツールのコンソールを開きます。

コンソールに何もエラーがでなければ正常に接続されたことになります。

今回はここまでです。次回は実際にデータベースに書き込んでみたいと思います。

■関連記事■

[ad#ad-1]