Google Firebase の Realtime Database (リアルタイムデータベース)で Web アプリが動くまで

目次

  1. Google Firebase の主要機能と特徴
  2. リアルタイムデータベース(Realtime Database)プロジェクトの作成手順
  3. Windows マシンでホスティングを行うための設定
  4. リアルタイムデータベース(Realtime Database)の実践的な使用方法

関連する外部ページhttps://firebase.google.com/docs/web/setup

Google Firebase の主要機能と特徴

オンラインストレージ:クラウド上での効率的なデータ管理を実現する包括的なソリューション

データベース:Python,JavaScriptとの高度な互換性を備えた,柔軟で拡張性の高いシステム

認証機能:堅牢なセキュリティと効率的な課金管理を実現するID,パスワード認証システムを提供

* iOS,Android,Webプラットフォームに完全対応.利用には Google アカウントの認証が必要

リアルタイムデータベース(Realtime Database)を扱うプロジェクトの新規作成

  1. Firebase の公式ページにアクセス

    https://firebase.google.com/?hl=ja

    * Google アカウントでの認証が必要となる場合があります

  2. スタートガイド」を選択
  3. Firebase コンソールで「プロジェクトを追加」を選択
  4. プロジェクトを追加」を選択

    * 画面遷移が発生しない場合は,Webブラウザでサインアウトし,再度実行することで解決できます

  5. プロジェクトの基本設定

    プロジェクト名:識別が容易な任意の名称を設定

    アナリティクスの地域:日本を選択

    利用規約:内容を精査の上,同意可能な場合のみチェックを入れる

  6. 次へ」を選択
  7. 設定内容の確認

    料金プランが無料の「Spark プラン」であることを確認し,データベース機能を利用するため「Cloud Firestore」を選択

  8. リアルタイムデータベース(Realtime Database)の作成を開始するため,「データベースを作成」を選択
  9. セキュリティルールの設定

    開発環境での試用を目的とするため,「テストモードで開始」を選択し「有効にする」を実行

  10. データベース作成完了の確認

    設定完了後,Webブラウザは終了可能

プロジェクトの削除手順

  1. プロジェクト概要画面で「Project Overview」横のメニューを選択
  2. プロジェクトの設定」を選択
  3. 画面下部の「プロジェクトの削除」を選択
  4. 確認事項を精査し,同意の上で「プロジェクトの削除」を実行

Windows マシンでホスティングを行うように設定

* Ubuntu をご利用の場合は,次のパートをご参照ください.

  1. Windows マシンにおける firebase-tools のインストール手順
    1. Windows 環境で,コマンドプロンプト管理者権限で起動します.

      管理者権限でのコマンドプロンプト起動方法: 詳細はこちら »

    2. firebase-tools をインストールするため,以下のコマンドを実行します.

      * npm が未導入の場合は,「Node.js Windows 版のインストール」の手順に従ってインストールしてください.

      npm install -g npm
      npm install -g firebase-tools
      
    3. インストール完了後,コマンドプロンプト終了します.
  2. Windows 環境からの Firebase へのログイン設定
    1. 新規にコマンドプロンプトを起動します.
    2. 以下のコマンドを実行してログインを開始します.
      firebase login
      
    3. Windows のセキュリティ警告が表示される場合があります. その際は「アクセスを許可する」を選択してください.
    4. 続いて,使用するWebブラウザの選択画面が表示される場合があります.

      ここではGoogle Chromeを選択した場合の手順を説明します.

    5. ブラウザが起動したら,Google アカウントでログインを実行します.
    6. 「Firebird CLI からの Google アカウントへのアクセス要求」に対して「許可」を選択します.
    7. ログイン成功の確認を行います.
  3. 「firebase list」コマンドで,既存プロジェクトのプロジェクトIDを確認します.
    firebase list
    
  4. 続けて,Firebase ホスティング機能の利用に必要な Windows 環境の設定を実施します.
    1. 書き込み権限を持つディレクトリに移動します.
      cd <書き込み権限のあるディレクトリ>
      
    2. 初期設定として,firebase の初期化を実行します.

      以下のコマンドを入力します.

      firebase init
      
    3. 内容を確認し,Are you ready to proceed ? に対して「y」と入力します.
    4. Which Firebase CLI feature do you want to setup for this folder? では 「Hosting」を選択します.

      矢印キーで移動し,スペースキーで「*」マークを付与した後,Enterキーを押します.

    5. デプロイ対象のプロジェクトを矢印キーで選択します.
    6. 「What do you want to use as your public directory? (public)」では,public を使用する場合は Enterキーを押します.
    7. 「Configure as a single-page app (rewrite all urls to /index.html)」の設定を行います.
    8. シングルページアプリケーションとして設定するかを選択します.

      * シングルページアプリケーションとして構築する場合は「y」を選択します.

    9. 設定完了を確認します.
    10. 生成されたファイルを確認します.

      ./database.rules.json,./firebase.json,./public/404.html,./public/index.html の各ファイルが生成されていることを確認します.

    11. ./public/index.html ファイルの内容確認

      ./public/index.html の内容を確認します.コマンドプロンプトでの type コマンドによる表示時に文字化けが発生する場合がありますが,動作には影響ありません.

    12. ローカル環境での Web サーバ起動
      firebase serve
      
    13. 設定の確認として,Web ブラウザで localhost:5000 にアクセスします.

      正常に画面が表示されることを確認し,Web ブラウザを終了します.

Ubuntu マシンでホスティング環境を構築する

  1. Ubuntu で端末を起動
  2. firebase-tools をインストールするために,端末で次のコマンドを実行します

    * npm が未インストールの場合は,「sudo apt install npm」でインストールしてください

    npm install -g npm
    npm install -g firebase-tools
    
  3. Ubuntu から Firebase へログインする
    1. 端末で次のコマンドを実行します
      firebase login
      
    2. Web ブラウザが自動的に起動します.Google アカウント(ID とパスワード)でログインしてください.
    3. 「Firebase CLIがGoogleアカウントへのアクセスをリクエストしています」という画面で「許可」を選択します
    4. ログインの成功を確認します
  4. 「firebase list」コマンドで,既存プロジェクトのプロジェクトIDを確認します
    firebase list
    
  5. Firebaseの初期設定を実行します

    現在の端末で次のコマンドを実行します

    firebase init
    
  6. 「Which Firebase CLI feature do you want to setup for this folder?」という質問に対して「Hosting」を選択します
  7. デフォルトとして設定するFirebaseプロジェクトを選択します

    既存のFirebaseプロジェクトから1つを選択するか,新規プロジェクトを作成します

  8. 公開用ディレクトリを選択します.デフォルトは「public」です.問題がなければEnterキーで続行し,変更が必要な場合は再設定します
  9. 次の設定はデフォルトのままで問題ありません.Enterキーで続行します
  10. 生成されたファイルを確認します

    ./firebase.json,./public/404.html,./public/index.htmlが正しく生成されていることを確認します

  11. ローカル開発用のWebサーバを起動します
    firebase serve
    
  12. 設定の正常性を確認するため,Webブラウザでlocalhost:5000にアクセスします

Firebase Realtime Databaseの実装手順

  1. 最初に,新しいHTMLファイルを作成します

    先ほど自動生成されたpublicディレクトリ内のindex.htmlファイルを,新しいファイル名でコピーします

    ファイル名は任意ですが,拡張子は「1.html」のように.htmlとします

    必ず「public」ディレクトリの直下に配置します

  2. 以下の手順でAPIキーなどの認証情報を取得します
    1. FirebaseのWebサイトにアクセスします

      https://firebase.google.com/?hl=ja

    2. スタートガイド」を選択します
    3. 作成済みのプロジェクトを選択します
    4. Web アプリに Firebase を追加」を選択します
    5. 設定コードをコピーするために「コピー」を選択します
  3. エディタを使用して, 作成したHTMLファイルの<head>タグと</head>タグの間に設定コードを挿入します
  4. 動作確認のため,作成したファイルをWebブラウザで表示します

    正常に表示されることを確認します(白画面やエラーメッセージが表示される場合は設定に問題があります)

  5. <body>タグと</body>タグの間の処理

    現在の内容をすべて削除し, <body>タグと</body>タグの間 を以下のように設定します

      </body>
        <div id="message">
          <p> データベース (database) </p>
          <li id="print_chats"></li>
    
          <ul>
            <li id="print_name"></li>
            <li id="print_price"></li>
          </ul>
    
          <p> フォーム (form) </p>
          <ul>
            <li> name: <input type="text" name="" id="my_name"></li>
            <li> price: <input type="text" name="" id="my_price"></li>
          </ul>
          <p>
            <a onclick="setdata()">データをセット (set data)</a>
          </p>
        </div>
    
        <script>
          var db = firebase.database();
          var myChatAll = db.ref("/my/chat/all");
          var chats = db.ref("/my/chat");
    
          function setdata(){
            var my_name = document.getElementById("my_name").value;
            var my_price = document.getElementById("my_price").value;
            myChatAll.set({title:"example", text:my_name, price:my_price});
          }
    
          myChatAll.on("value", function(snap) {
            document.getElementById("print_name").innerText = "name: " + snap.val().text;
            document.getElementById("print_price").innerText = "price: " + snap.val().price;
          });
    
          chats.on("value", function(snap) {
            document.getElementById("print_chats").innerText = "chats: " + snap;
          });
        </script>
    
      </body>
    

    ファイルは次のようになります

  6. 動作確認のため, Web ブラウザで localhost:5000/1.html にアクセスします

    *1.html」は,実際に作成したファイルの名前に置き換えてください

    * 画面が表示されない場合は,「firebase serve」を起動してから再度アクセスしてください

    次のような画面が表示されれば正常に動作しています

  7. デプロイ操作

    ローカル環境で作成したファイル群を,Firebase のサーバにアップロードしてサービスを公開します(デプロイ).

    1. 「firebase list」コマンドで,作成済みプロジェクトのプロジェクト ID を確認します
      firebase list
      
    2. プロジェクト IDを指定してデプロイを実行します
      firebase deploy --project <プロジェクトID>
      
    3. デプロイ完了後,表示される「Hosting URL」などの情報を確認します
  8. 表示された「Hosting URL」とファイル名を組み合わせて, http://hoge-1234.firebaseapp.com/1.html の形式でWebブラウザにアクセスします

    先ほどと同じ画面が表示されれば正常にデプロイされています

    この画面は全世界に公開された状態となっています

    「firebase open hosting:site」を実行してWebブラウザを開き,URLにファイル名を追加する方法でも同様にアクセス可能です

    「firebase open hosting」を実行すると,ホスティング (Hosting) のダッシュボードが表示されます

  9. リアルタイムデータベースの機能を検証します
    1. 新しいWebブラウザウィンドウを開き,同じURLにアクセスします

      同一の画面が表示されます

    2. いずれかのブラウザウィンドウで,フォームにデータを入力し(任意の内容),「データをセット」を選択します
    3. 両方のブラウザウィンドウに,リアルタイムでデータが同期されることを確認します