プログラミング

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

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

関連記事

WordPress

WordPress のテーマ、プラグイン開発のためのデバッグ設定

WordPress のテーマ、プラグイン開発のためのデバッグ設定や Tips について、ここにまとめていこうと思います。 目次1. wp-config.php の設定WP_DEBUGWP_DEBUG_ …

web development

Layout Instability API を使ってレイアウト・シフトを検出する

目次1. Layout Instability API について2. サンプルコード3. インターフェイス情報PerformanceObserver interfaceLayoutShift inte …

Python

定期的にツイートするbotをPythonで作る方法

Twitterでツイートを行う botプログラムを Python(プログラミング言語)で作ります。 このプログラムは、CentOS(Linuxの一種です)上で定期実行します。 スポンサードリンク 目次 …

Milkcocoa のチュートリアルを試す

Milkcocoa のチュートリアルをやってみました。 目次Milkcocoa とは?チュートリアル1. アカウント登録する2. ログインする3. アプリを作成する4. スマートフォン側のWebページ …

Web Programming

IntersectionObserver API を使ったテストページを作成しました

IntersectionObserver API を使ったテストページを作成しました。 IntersectionObserver API は、ウェブページ上のある要素が見える範囲 (viewport) …