プログラミング

Firebase を利用する手順

投稿日:2019年9月3日 更新日:

1. Firebase について

Firebase は Googleが提供している BaaS サービスです。

BaaS は Backend as a Service の略で、以下を 提供してくれるサービスです。

  • アプリケーションに必要ないろいろな機能を提供してくれるサーバー
    • 認証 (各種認証機能)
    • Cloud Firestore(NoSQL クラウド データベース オススメ)
    • Realtime Database (NoSQL クラウド データベース)
    • Cloud Functions(サーバー側に登録したコードを実行する)
    • Hosting (静的ファイルのホスティングサービス)
    • Cloud Storage (リソースとなるファイルの保存など)
    • etc.
  • それを操作するためのAPI(ライブラリ)
    • Firebase JavaScript SDK

様々なプログラミング言語に向けた Firebase ライブラリが用意されています。JavaScript用のライブラリもあるため、ウェブアプリに関して言えば サーバー側のプログラミング言語には関係なく導入することができます。

ということなので、ウェブアプリにおける Firebase とは

ウェブサイト(ウェブアプリ)に JavaScript のライブラリを追加するだけで、様々な機能が利用できてしまうサービス

であると言えます。

※ 自分でウェブサーバーを持っていない場合には、ホスティングサービスも用意されています。

※ 無料枠があり、ある程度のところまでは無料で使うことが可能です。

2. Firebase を利用する手順

本記事では、ウェブアプリで Firebase を利用する手順について説明します。この場合、ライブラリは Firebase JavaScript SDK を利用することになります。

a. 既存のWebページに Firebase を追加する

(1) Firebase コンソールサイト上から プロジェクトを作成します。

(2) アプリを登録します。

今回は「ウェブ」を選択します
アプリのニックネームを入力します
  • Firebase SDK を読み込んで初期化するスクリプトが表示されるので、自分の HTMLファイルにコピー&ペーストします。

参考

b. 認証 (Authentication) を利用する

ここでは、認証方法として「Google アカウント」を利用する例を示します。

(1) Firebase コンソールサイト の Authentication ページを開きます。

(2) ログインプロバイダとして、Google を有効にします。

(3) 「承認済みドメイン」に、ウェブサイトのドメインを追加します。

  • OAuth認証用のホワイトリストにドメインを追加している。

(4) Google Cloud Platform サイトの [API とサービス] – [ドメインの確認] から、ドメインを追加します。

  • 外部ドメインに Webhook 通知を送信できるようにする。
  • DNS の TXTレコードを使って、ドメインの所有権を確認する。
ドメインの所有権確認は、利用しているドメイン名プロバイダによって方法が異なる場合があります

(5) [API とサービス] – [認証情報] に作成されている OAuth 2.0 クライアント ID に対して、以下を追加します。

  • [承認済みの JavaScript 生成元] :URLスキーム + ドメイン
  • [承認済みのリダイレクトURI] :認証後戻ってくるURL

(6) [API とサービス] – [OAuth 同意画面] において、[承認済みドメイン] にドメインを追加します。

(7) ブラウザのキャッシュ(画像とファイル)をクリアします。

  • これをやらないとエラーが起きるため。

(8) index.html に、以下のサンプルコードをコピー&ペーストします。

c. Cloud Firestore を利用する

(1) Firebase コンソールサイト から、Cloud Firestore を作成しておきます。

(2) firebase-firestore.js を読み込ませます。

(3) firebase.firestore オブジェクトを使って、いろいろ処理を書きます。

参考

d. Realtime Database を利用する

(1) Firebase コンソールサイト から、Realtime Database を作成しておきます。

(2) firebase-database.js を読み込ませます。

(3) firebase.database オブジェクトを使って、いろいろ処理を書きます。

参考

3. おわりに

まずは、大雑把に書いてみました。

今後もう少し細かい情報を補足していければいいなと思っています。

4. 参考

📂-プログラミング

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

ウェブプログラミングの知識があるとできること(その1)

先日、あるブログを見ていたら最新の記事だけが表示されない仕組みになっていました。 ウェブプログラミングの知識があるとこんなことができますという例として、その仕組を調べた時の過程を紹介します。 目次きっ …

React Redux

React + Redux の最小限の雛形コード

ここに載せている JavaScriptのコードは、React + Redux を使っています。 但し、まだ何も意味のある処理を書いていないので、このままだと 属性 id=”root” を持った要素内に …

docker

Docker を使って特定のバージョンのPHPコマンドを実行する方法

PHP: Supported Versions を見てみると、現在サポートされているPHPのバージョンは、7.2系統、7.1系統、7.0系統、5.6系統の4種類であることが分かります。PHP: Dow …

Web Programming

History API のメモ

History API についての簡単な説明を書きました。 「History API の概要を思い出したくなった時に、ざっと眺める」というのがこのページの主な目的です。 目次1. History AP …

Web Workers API を使ったサンプル

Web Workers API を使ったサンプルページです。 目次1. デモページ2. 画面イメージ3. ソースコード4. 参考 1. デモページ デモページ 🔗 Web Worker …