Firebase Realtime Database をスマホで操作およびストリーミング受信する実験

記事公開日:2018年9月11日
最終修正日:2018年9月19日
このブログの維持運営にご支援いただけると助かります。
支援方法はこちらの記事をご覧ください。
(管理人:mgo-tec)

 

こんばんは。

台風災害、北海道地震と連続で大変なことになっていて、私は自分自身のことで精一杯で、何もできず心苦しい限りですが、みなさんご無事でしょうか?
自分が今そういう事態になったら、本当に窮地状態になるので、明日は我が身で対策していくしかないと思っています。
とりあえず、今の私はブログを淡々と書いて、些細な情報を提供していきたいと思います。

さて、前回の記事では Google ドキュメントの音声入力にあまりにも感動したので、予定を変更して記事を書きましたが、 今回は Firebase Realtime database の記事に戻ります。

今回も当然 Google ドキュメント音声入力でこの記事を書いています。
だいぶ助かっていますよ!

今回は、 HTML 及び JavaScript でプログラミングして、スマートフォンや PC のブラウザから Firebase Realtime database を操作する実験をしてみます。

スポンサーリンク

Firebase ドキュメント日本語ガイドがありますが、アマチュアの私にとってはかなり難解でした。
今回は、このドキュメントの「ここが良く分からない・・・」というところから説明していますので、途中、かなり回りくどいかも知れません。
でも、最後の方で説明しているように、結果的には比較的簡単なプログラムで実現できると思います。
一度理解してしまえば、スラスラとプログラミングできるようになると思います。
ESP32 や M5Stack でスマホと連携したい方、3G や 4G 回線で連携したい方、地球の裏側から操作したい方はかなりお勧めです。

前々回のこちらの記事では、ESP32 や M5Stack 等の WiFi マイコンで、Firebase Realtime database を読み書きする実験をしました。
スマートフォンのブラウザでも当然ストリーミング受信ができます。
つまり 、ブラウザが開いていれば、Firebase Realtime database 側のデータが更新されると、自動的にスマホに反映されるというやつです。
自分でデータを取りに行く操作をする必要はありません。

何はともあれ、自分なりにごく簡単な HTML および JavaScript を組んで、複数の端末から Firebase Realtime database を読み書きする実験をしてみました。
Android スマホと iOS iPad 、そして Windows 10 PC で操作しています。
以下の動画をご覧ください。

いかがでしょうか。

これは、WiFiを使っていますが、もちろん、3Gおよび4G回線を使ったり、地球の裏側からでも操作できたりします。

スマホ側からのデータ書き込みは、ESP32 や M5Stack などのマイコンを使うよりもかなり高速ですね。
もうまるでスマホ間通信です。
これを応用すればチャットを作ることができます。

ESP32 や M5Stack では、連続データ書き換え最速のサイクルは1.5秒ほどかかりました。
でも、スマホからのデータ送信はかなり高速なので、あくまで想像ですが、おそらく WebSocket 通信だと思われます。

そして、データ受信は、EventSource / Server-Sent Events のストリーミング受信で、データベースが書き換えられたら即他の端末も反映されます。
後で述べますが、これはブラウザを閉じたり、スマホの電源を切ったりしても、次に起動したら、自動的にログインされて、ストリーミングデータ受信してくれます。
これは、EventSource / Server-Sent Events の特徴なので、おそらくこの通信だと思われます。

では、これのプログラミングの方法を説明したいと思います。

ただ、HTML や JavaScript の初歩的プログラミングについては、ネット上でかなりの情報がありますので、割愛させていただきます。

そして、一つ注意点があります。
ブラウザは Google Chrome を使って下さい
EventSource / Server-Sent EventsWebSocket 通信は、Microsoft Edge や、Internet Explorer にはサポートされていません。
iPhone や iPad では、Dropbox 上で HTMLファイルを起動させれば動作することは確認できました。
これについては最後の方で述べています。

ちなみに私は HTML も JavaScript も専門家ではありません。
素人独学ですから、動作保証しません。
でも、もし誤りや勘違いがありましたらコメント投稿等でご連絡いただけると助かります。

    【目次】

  1. 事前に Firebase にログインして Realtime database を作成しておく
  2. Authentication でメールアドレスによるログインを有効にする
  3. ユーザーを登録し、UID を作成する
  4. Realtime database のルールで、ユーザー  UID アクセス制限を作成
  5. Firebase ドキュメントの Realtime database のウェブ用ガイドを読み解いてみる
  6. 実際に HTML 及び JavaScript でプログラミングしてみる
  7. 作成した HTML ファイルを Windows パソコンで実行させてみる
  8. ブラウザを閉じたり、パソコンを再起動しても自動接続してストリーミング受信してくれる
  9. Android スマホで HTML ファイルを起動する方法
  10. iPhone および iPad の iOS で HTML ファイルを開く場合
  11. 編集後記
Firebase の登録方法、ログイン方法、初歩的使い方や、M5Stack や ESP32 ( ESP-WROOM-32 )開発ボードで Firebase Realtime detabase を操作する方法は、以下の記事を参照してください。

Firebase Realtime Database のデータ保存、取得、ストリーミング受信実験( ESP32 , M5Stack )

 

事前に Firebase にログインして Realtime database を作成しておく

前々回のこちらの記事を参照し、Firebase にログインして、Firebase console 画面を開きます。
そして、例として、以下のような Realtime database を作成しておきます。

ユーザー名(ユーザー名階層)は何でも良いのですが、ここでは、test_user1 としておきます。
このユーザー名はフォルダ名みたいなもので、後で紹介するユーザー作成とは異なります

(JSON形式)

{
  "test_user1" : {
    "color" : "red",
    "text" : "Hello World"
  }
}

Firebase_HTML_JavaScript01

Authentication でメールアドレスによるログインを有効にする

今回、複数の端末からの Firebase Realtime database アクセスするためのログイン(サインイン)方法はメールアドレスにします。
これが多分一番簡単なログイン(サインイン)認証方法ではないかと私は勝手に思っています。

まず、下図のように「 Authentication 」をクリックし、「ログイン方法」をクリックし、「メール/パスワード」をクリックしてください。

Firebase_HTML_JavaScript34

すると下図のような画面になるので 、上のスライドスイッチを「有効にする」にしてください。
そうしたら保存ボタンをクリックしてください。

Firebase_HTML_JavaScript35

これで、メールアドレスとパスワードでログイン(サインイン)して、外部から Firebase Realtime database のアクセスが有効になりました。
次は、アクセスできるユーザーを登録します。

ユーザーを登録し、UID を作成する

では、まずユーザーを作ります。
ユーザーを作っておけば、アプリからパスワード認証してサインイン(ログイン)するときに便利です。
管理者権限の自分一人しか使わない場合でも、別の権限のユーザーを作っておいた方が便利だと思います。

まず、下図のように、Firebase の 「 Authentication 」 ページの「ユーザー」を開きます。
そして「ユーザーを追加」をクリック。

Firebase_HTML_JavaScript02

そうしたら下図のような画面になるので、適当なメールアドレスとパスワードを入力します。
メールアドレスは実際にメールを送信するわけではなく、単なるユーザーID名と思って下さい。
パスワードはここだけのパスワードを新たに適当に作って入力します。
本来のメールアカウントのパスワードを入力する必要はありません。
すべて問題なければ「ユーザーを追加」をクリックします 。

Firebase_HTML_JavaScript03

すると下図のようにユーザーが作成されます。

Firebase_HTML_JavaScript04

次に、下図のようなところにカーソルを当てると、ユーザー UID が表示され、コピーアイコンが出てくるので、そこをクリックして UID をコピーし、次の項で述べる Database のルールに貼り付けることになります。

Firebase_HTML_JavaScript05

では、次では実際にルールを作成して、アクセス制限をかけてみます。

スポンサーリンク

mgo-tec電子工作 関連コンテンツ ( 広告含む )

投稿者:

mgo-tec

Arduino , ESP32 ( ESP-WROOM-32 ) , ESP8266 ( ESP-WROOM-02 )等を使って、主にスマホと連携した電子工作やプログラミング記事を書いてます。ライブラリも作ったりしてます。趣味、独学でやってますので、動作保証はしません。 電子回路やプログラミングの専門家ではありません。 畑違いの仕事をしていて、介護にドップリ浸かりそうな年配者です。 少しだけ電気の知識が必要な仕事なので、電気工事士や工事担任者等の資格は持っています。

コメントを残す

メールアドレスが公開されることはありません。

*画像の文字を入力してください。(スパム防止の為)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください