金子邦彦研究室情報工学全般Google FirebaseGoogle Firebase の Realtime Database (リアルタイムデータベース)で Web アプリが動くまで

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

目次

  1. Google Firebase でできること
  2. リアルタイムデータベース(Realtime Database)を扱うプロジェクトの新規作成
  3. Windows マシンでホスティングを行うように設定
  4. リアルタイムデータベース(Realtime Databse)を使ってみる

関連する外部ページ

https://firebase.google.com/docs/web/setup

Google Firebase でできること

オンラインストレージ

[image]

データベース: Python, JavaScript と相性が良い.

[image]

その他、認証(ID,パスワード)など(セキュリティや課金に必要)

※ iOS, Android, Web で動く.使用には Google のアカウントが必要

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

  1. Firebase の Web ページを開く

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

    ※ このとき、google のアカウント(IDとパスワード)が必要になる可能性がある

  2. スタートガイド」をクリック

    [image]
  3. Firebase コンソールの画面で、「プロジェクトを追加」をクリック

    [image]
  4. プロジェクトを追加」をクリック

    ※ このとき、いつまで待っても画面が変わらないというときは、Webブラウザで「サインアウト」してもう1度やり直すとうまく行くかもしれません.

    [image]
  5. プロジェクトの追加

    プロジェクト名: 何でもよいが、あとで分かりやすい名前

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

    チェックボックス: 同意できる場合のみチェック(同意できないときは、Firebase を使わない)

    [image]
  6. 次へ」をクリック

    [image]
  7. 画面が変わるので確認.

    まず、料金プランが「Spark プラン」になっていることを確認する. Spark プランは料金無料のプラン. データベースを使いたいので、「Cloud Firestore」をクリック

    [image]
  8. リアルタイムデータベース(Realtime Database)を作成して使いたいので、Realtime Database の下の「データベースを作成」をクリック

    [image]
  9. リアルタイムデータベース(Realtime Databse)のセキュリティルールでは、 ロックモードかテストモードを選ぶ.

    ここでは、試用することにしたい(実データは入れずに、手軽に試してみたい)ので、 「テストモードで開始」を選び「有効にする」をクリック

    [image]
  10. データベースの作成が終わると、画面が変わるので確認する

    Web ブラウザは閉じて良い

    [image]

    プロジェクトの削除

    1. プロジェクトの全般のWebページで、「Project Overview」の右横のボタンをクリック

      [image]
    2. プロジェクトの設定」をクリック。

      [image]
    3. 画面の下の「プロジェクトの削除」をクリック。

      [image]
    4. すべてを確認、チェックしてから、「プロジェクトの削除」をクリック。

      [image]

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

    ※ Ubuntu を使うときは、次のパートを見てください

    1. Windows マシンで、firebase-tools のインストール
      1. Windows で,コマンドプロンプト管理者として実行

        コマンドプロンプトを管理者として実行: 別ページ »で説明

      2. firebase-tools をインストールするために、今のコマンドプロンプトで,次のコマンドを実行

        ※ npm がない!というときは、「Node.js Windows 版のインストール」の Web ページの手順でインストールする

        npm install -g npm
        npm install -g firebase-tools
        

        [image]
      3. コマンドプロンプト閉じる
    2. Windows パソコンから Firebase にログイン
      1. 新しくコマンドプロンプトを開く
      2. コマンドプロンプトで,次のコマンドを実行
        firebase login
        

        [image]
      3. Windows の警告表示が出ることがある. このときは「アクセスを許可する」をクリック

        [image]
      4. その後、複数の Web ブラウザの中から 1つを選ぶ画面が出ることがある.

        Google Chrome を選んだとして説明を続ける

      5. Web ブラウザの画面が開く.Google のアカウント(ID とパスワード)でログインする.

        [image]
      6. 「Firebird CLI が Google アカウントへのアクセスをリクエストしている」に対しては「許可」をクリック

        [image]
      7. ログインに成功したことの確認

        [image]
    3. 「firebase list」で,作成済みプロジェクトのプロジェクト ID を確認してみる
      firebase list
      

      [image]
    4. 引き続き、Firebase のホスティング (Hosting) ができるように Windows パソコン側の設定を行う
      1. 書き込み権限のあるディレクトリ(フォルダ)に、カレントディレクトリを変える
        cd <書き込み権限のあるディレクトリ(フォルダ)>
        

        [image]
      2. 最初は、firebase の初期化を行う

        今のコマンドプロンプトで,次のコマンドを実行

        firebase init 
        

        [image]
      3. 表示を確認する。そして、Are you ready to proceed ? に対しては「y

        [image]
      4. Which Firebase CLI feature do you want to setup for thi folder に対しては 「Hosting」を選ぶ

        矢印キーで「Hosting」を選ぶ。 スペースキーを押し「*」マークがついたことを確認したら、Enterキー

        [image]
      5. デプロイの対象にしたいプロジェクトを矢印キーで選ぶ

        [image]
      6. 「What do you want touse as your public directory? (public)」に対しては、public にしたい場合は Enterキー

        [image]
      7. 「Configure as a single-page app (rewrite all urls to /index.html」に対しては設定する

        [image]
      8. 「Configure as a single-page app (rewrite all urls to /index.html」に対しては設定する

        ※ 単一ページにしたいときは「y」

        [image]
      9. 設定終了の確認

        [image]
      10. ファイルの確認

        ./database.rules.json, ./firebase.json, ./public/404.html, ./public/index.html というファイルができているので確認する

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

        ./public/index.html の中身を確認する.コマンドプロンプト + type コマンドで表示したときなどは文字化けする場合があるが問題ない.

        [image]
      12. ローカルで Web サーバの起動
        firebase serve
        

        [image]
      13. 設定ができたかを確認するために、Web ブラウザで localhost:5000 を開く

        画面が表示されたら OK. Web ブラウザを閉じる.

        [image]

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

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

      ※ npm がない!というときは、「sudo apt install npm」でインストールする

      npm install -g npm
      npm install -g firebase-tools
      

      [image]
    3. Ubuntu から Firebase にログイン
      1. 端末で,次のコマンドを実行
        firebase login
        

        [image]
      2. Web ブラウザの画面が開く.Google のアカウント(ID とパスワード)でログインする.

        [image]
      3. 「Firebird CLI が Google アカウントへのアクセスをリクエストしている」に対しては「許可」をクリック

        [image]
      4. ログインに成功したことの確認

        [image]
    4. 「firebase list」で,作成済みプロジェクトのプロジェクト ID を確認してみる
      firebase list
      

      [image]
    5. 引き続き、firebase の初期化を行う

      今の端末で,次のコマンドを実行

      firebase init 
      

      [image]
    6. Which Firebase CLI feature do you want to setup for thi folder に対しては 「Hosting」を選ぶ

      [image]
    7. 既定(デフォルト)にしたい Firebase プロジェクトの選択

      Firebase プロジェクトを1つ選ぶか、新しいプロジェクトを作る

      [image]
    8. 公開したいディレクトリの選択.既定では「public」である.問題なければ Enter キーで続行.問題があれば,設定し直す.

      [image]
    9. 次は既定(デフォルト)のままでよい.Enter キーで続行.

      [image]
    10. ファイルの確認

      ./firebase.json, ./public/404.html, ./public/index.html ができているので確認する

      [image]
    11. ローカルで Web サーバの起動
      firebase serve
      

      [image]
    12. 設定ができたかを確認するために、Web ブラウザで localhost:5000 を開く

      [image]

    リアルタイムデータベース(Realtime Databse)を使ってみる

    1. まず、新しい .html形式ファイルを準備する。

      先ほど自動生成された public の下の index.html ファイルを、別のファイル名のファイルにコピーする。

      ファイル名は何でもよいが、「1.html」のように、拡張子を .html にする

      そして「public」ディレクトリの直下に置くこと

      [image]
    2. 次の手順で、自分の API キーなどを得る
      1. Firebase の Web ページを開く

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

      2. スタートガイド」をクリック

        [image]
      3. 先ほど作成したプロジェクトを選ぶ

        [image]
      4. Web アプリに Firebase を追加」をクリック

        [image]
      5. コピーして使いたいので「コピー」をクリック

        [image]
    3. エディタを 使って、先ほど作成した.html 形式ファイル の中の <head> と </head> の中に入れる

      [image]
    4. 確認のため,このファイルを Web ブラウザで表示してみる

      表示されれば OK (真っ白な画面が出たり、エラーメッセージが出た場合は良くない)

      [image]
    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>
      

      ファイルは次のようになる

      [image]
    6. 動作確認のため、 Web ブラウザで localhost:5000/1.html を開く

      ※ 「1.html」のところは,実際に作成したファイルのファイル名にすること

      ※ 「画面が開かないよ!」というときは「firebase serve」を起動してから、もう1度試してみる

      次のような画面が開けば OK

      [image]
    7. デプロイ操作

      手元のパソコンで作成したファイル群について、 手元のパソコンから firebase のサーバに一括アップロードし,サービスを公開する操作(デプロイ)を行う.

      1. 「firebase list」で,作成済みプロジェクトのプロジェクト ID を確認
        firebase list
        

        [image]
      2. プロジェクト IDを指定してデプロイする
        firebase deploy --project <プロジェクトID>
        

        [image]
      3. デプロイの結果、「Hosting URL」などが表示されるので確認する

        [image]
    8. いま表示された「Hosting URL」と、先ほど作成した「ファイル名」を Web ブラウザで、 http://hoge-1234.firebaseapp.com/1.html のように指定する

      先ほどと同じ画面が出てくれば OK.

      同じ画面だが、今度は、全世界に公開されている

      [image]

      「firebase open hosting:site」を実行して、Webブラウザでファイル名を書き加えるという手順でも同じ結果になる

      「firebase open hosting」を実行すると、ホスティング (Hosting) のダッシュボードが開く

    9. リアルタイムデータベースの機能を確認する
      1. 別の Web ブラウザ画面を開き、今と同じ URL を指定する

        同じ画面が出てくる

        [image]
      2. 片方の Web ブラウザ画面で、フォームのところにデータを入れ(何でも良い)、「データをセット」をクリックしてみる

        [image]
      3. 両方の Web ブラウザ画面に、リアルタイムでデータが反映されることを確認

        [image]