SORACOM LTE-M Button for Enterprise Simulatorを作ってみた
これは
SORACOM LTE-M Button for Enterpriseのシミュレータアプリを作ってみたという記事になります。
細かいことはいいからとりあえず試したい！という方はこちらからどうぞ。
経緯
私も運営に参加しているSORACOM UserGroupでは、2ヶ月に1回程度の頻度で「ビギナーズ」という初心者向けのイベントをやっています。
ソラコムさんの作られた、ブラウザで動作するGPSマルチユニとSORACOM Editionシミュレータを使って行うハンズオンイベントでで、センサーでデータを取得し、SORACOMプラットフォームに蓄え(SORACOM HarvestData)、可視化する(SORACOM Lagoon)をブラウザだけで体験できるという素敵なイベントですのでご興味のある方は是非ご参加いただければと思います。
最近の開催の様子は開催レポートをご覧ください。
このシミュレータを触ってみて、「ボタンのシミュレータも作れないかなー」と思って最初は同じくブラウザで動くアプリとして作り始めたのですが、
- データはunified endpointに送りたい
- unified endpointに送るためにはSORACOM Air等で接続してないといけない(とりあえずここは何とかしよう)
- unified endpointのHTTPエンドポイント(http://uni.soracom.io)にブラウザから送るにはCORSを超えないといけない
- とはいえ、GPSマルチユニットシミュレータのようにsoracom.ioドメイン以下に置いてくださいとは言えない
- オリジナルのボタンと同じようにudpで送ろうかと思ったけど、ブラウザ上からJavaScriptでudpパケットは送れない
- 詰んだ
ということで一旦挫折しました。
Electronアプリで作ってみよう
ブラウザ経由だからCORSの問題が起こるわけなので普通にアプリケーションを作ってそこから通信するのであれば問題ないはずです。そこで、
- できればせっかく書いたJavaScriptのコードを流用したい
- アプリを使う人の敷居を下げたい
ということで白羽の矢が立ったのがElectronでした。
Electronに触れるのは初めてではありましたが、見よう見まねで形を整え、元のHTMLとJavaScriptをほぼそのまま持ってきて動かせたのでElectronすごいなと思いました(コナミ)。
その中でハマったのが、メインプロセス(要はアプリ本体)とレンダラープロセス(表示をするブラウザの部分。作ったメインのJavaScriptもここで動く)の間でどうやって通信を行う(データをやり取りする)かの部分でした。
Electronでは最近この辺りに破壊的更新があったようで、ググって出てくるちょっと古い情報の通りに書くと全く動きませんでした。
最終的にはこちらの記事を参考にさせていただき、無事動きました。
ElectronでcontextBridgeによる安全なIPC通信
サンプルソースコードも公開されていて、大変助かりました。
なお、SORACOM UGバージョンのボタンデザインはSORACOM UGのgithubで公開されています。
動かしてみた
Windows10(64bit)をSORACOM Airが挿さったSIMロックフリースマホ(Oppo RenoA)でテザリングしてボタンをクリックしてみました。SIMグループではバイナリパーサをOFFにし、SORACOM HarvestDataをONにしています。
こんな感じで無事取れてます。実際のボタンと違い、"binaryParserEnabled":trueがついてませんね。
アプリについて
詳しくはREADME_ja.mdをご覧ください。
現状では
- ウインドウがでかいのでリサイズできるようにしたい
- 実際のボタンと違ってhttpでJSON送ってるので、SIMグループの設定がちょっと異なる(バイナリパーサが不要、Beamはudp2httpではなくhttpを使うなど)。できればudpで送りたい
- JavaScriptが結構酷い(頑張ってリファクタリングしますw)
とか色々ありますが、とりあえず動くようになったので一旦公開しました。ぼちぼちと更新していけたらなと思ってますので温かい目で見守っていただけると幸いです。
Discussion