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

ブラウザを閉じたり、パソコンを再起動しても自動接続してストリーミング受信してくれる

では、今度は、サインアウトボタンを押さずに、ブラウザキャッシュ（過去の観閲履歴）は消去せずにブラウザを一旦閉じて、パソコンに再起動してみてください。
（ブラウザの設定でキャッシュを自動消去にしていたら、この動作はできません）

そして再度この HTML ファイルを起動してみてください。

自動的にログインして Firebase Realtime database サーバーからストリーミング受信されると思います。

これは、EventSource / Server-Sent Events の特徴でもあります。
おそらく、WebSocket ではないと思われます。

これは個人で使う分にはとても便利です。
でも、同じ端末で複数のユーザーと共有している場合は勝手に書き換えられる危険性もあります。
ですから、基本的にブラウザを閉じる時にはサインアウトボタンを押した方が良いと思います。

Android スマホで HTML ファイルを起動する方法

スマホで HTML ファイルを起動するのは、OS の制限が多くてなかなか面倒です。
それでも Android スマホの方が iPhone よりも比較的簡単かと思います。

とりあえず私の手持ちのスマホ Android 8.0 の場合で説明します。
Google ドライブのファイル転送で説明します。

まず、パソコンで作成した HTML ファイルを、 Google ドライブに保存し、スマホ側の Google ドライブアプリを開きます。
するとHTML ファイルがあると思いますので、下図のようなところをタッチします。

すると、下図のような画面が出てくるのでダウンロードをタッチします。
タッチすると即ダウンロードが始まります。

Android 8.0の場合、ダウンロードされたファイルはデフォルトで以下のようなフォルダパスに保存されていると思います。
これはおそらく、Microsoft OneDrive アプリでも同じフォルダだと思われます。

file:///storage/emulated/0/Download/xxxxxxxx.html

次に、スマホ側の Google Chrome を起動してください。
そして、ブラウザの URL 入力欄に、上記のファイルパスを入力します。
xxxxxxxx のところをご自分で作成したファイル名に書き換えてください。
そして、Enterすると、下図のような画面になれば、HTMLファイル実行成功です。

後は先ほどパソコンで操作したのと同じなので、確認してみてください。
最初に紹介した動画の様に、パソコン画面や複数のスマホと連動させてみると面白いと思います。

iPhone および iPad の iOS で HTML ファイルを開く場合

iOS の iPhone や iPad で HTML ファイルを純粋に実行させるのは、なかなか難しかったです。

私の手持ちは iOS 11.4.1の iPad mini です。
標準ブラウザの Safari で HTML ファイルを開こうと思いましたが、開くことはできても JavaScript が実行されませんでした。
なんとかしてブラウザの Safari 上で動かしたかったのですが、Safari上の Dropboxサイトを開いてもダメでした。

唯一まともに動いたのが、 Dropbox アプリ上で実行させたことです。
でも、動かない時があったので、別画面で Safari を開き、Dropbox サイトで HTMLファイルを開きます。
動かないことは分かっていても、サインインしてみて、その後、Dropboxアプリで、HTML そ再読み込みさせてサインインするとうまく動きました。
なんかややこしいですね。
ということで、アプリの Dropbox 上で開いた画面は下図のような感じです。

最初はなかなか動いてくれないと思いますが、しばらく何度も触っているとなぜか動いてくれるようになると思います。
最初に紹介した動画のように動作すればＯＫです。

どうしても Safari で動かしたい場合は、サーバーを立ち上げて、そこにHTMLファイルを保存し、Safariでアクセスするしかないと思われます。
ESP32 や M5Stack でサーバーを立ち上げて、アクセスしても良いと思います。
皆さんも色々試してみてください。

編集後記

いかがでしょうか。

これ、かなり凄いですよね。
本当にちょっとしたコードで、複数の端末からリアルタイムに操作できるんです。
さすが、 Google が力を入れているサービスだけあります。
これを使わない手はありませんね。

これができれば、電子工作などでマイコンとスマホを連携させる真の IoT 機器が制作できると思います。
夢が膨らみますね。

ちなみに話は変わりますが、今回はこの技術系記事を Google ドキュメントの音声入力で書き上げてみました。
技術系記事でも、キーボード入力していた時よりも遥かに楽でした。
これからは音声入力でガンガンと作っていきたいと思います。

では、今回はここまでです。
次回はこれに ESP32 や M5Stack などの WiFi マイコンと連動させたものを作ってみたいと思います。
ではまた・・・。