トップページ -> データベース研究スタート -> NoSQL データベースとインターネットストレージ -> Google Firebase を動かしてみる
[サイトマップへ]  

Google Firebase を動かしてみる

参考 Web ページ

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

目次

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

Google Firebase でできること

オンラインストレージ

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

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

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


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

  1. Firebase の Web ページを開く

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

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

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

  3. プロジェクトを追加」をクリック

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

  4. プロジェクトの追加

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

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

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

  5. 次へ」をクリック

  6. 画面が変わるので確認.

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

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

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

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

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

    Web ブラウザは閉じて良い


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

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

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

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

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

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

    3. コマンドプロンプトを閉じる

  2. Windows パソコンから Firebase にログイン
    1. 新しく、コマンドプロンプトを開く

    2. コマンドプロンプトで,次のコマンドを実行
      firebase login
      

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

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

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

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

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

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

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

  4. 引き続き、Firebase のホスティング (Hosting) ができるように Windows パソコン側の設定を行う
    1. 最初は、firebase の初期化を行う

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

      firebase init 
      

    2. Are you ready to proceed ? に対しては「y

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

      矢印キーで「Hosting」を選び Enterキー

    4. 設定を続ける

    5. ファイルの確認

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

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

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

    7. ローカルで Web サーバの起動
      firebase serve
      

    8. 設定ができたかを確認するために、Web ブラウザで http://localhost:5000 を開く

      画面が表示されたら OK. 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. 「Firebird CLI が Google アカウントへのアクセスをリクエストしています」に対しては「許可」をクリック

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

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

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

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

    firebase init 
    

  6. Which Firebase CLI feature do you want to setup for thi 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 ブラウザで http://localhost:5000 を開く

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

  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 ブラウザで表示してみる

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

  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 ブラウザで http://localhost:5000/1.html を開く

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

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

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

  7. デプロイ操作

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

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

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

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

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

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

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

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

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

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

      同じ画面が出てくる

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

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