Shiftr.ioの画面をNoodlに埋め込んで最強IoTダッシュボードを作る #IoT

本記事は、Noodlもくもく会＃0での成果物です。
メンターの@kmaepuさん・@kisaichi07さん、お褒めくださった参加者の皆様ありがとうございました。

TL;DR

shiftr.ioの画面をNoodlに埋め込むことができました。
1つの画面で、作ったIoT作品などを操作しながら、通信状況も確認できます。

動機

Noodl

Noodlは、ノードを繋いで簡単にUIのプロトタイピングができるスウェーデン発のツールです。
外部との通信も簡単にできてしまうのが凄いところで、MQTTで通信するIoTデバイスとの相性がとても良いです。IoTで使っている例は、@kmaepuさんのアクアリウム管理IoTなどがあります。

筆者は最近入門し、ESP32と通信させたりして遊んでいます。

shiftr.io

無料で使えるMQTTブローカです。別のプログラムやIoTデバイスとNoodlを連携させたい……という願いが数分で叶います。
導入方法については以下の記事をご覧ください。

MQTTブローカ"Shiftr.io" 入門

このサービス、シンプルながら通信状況が一目でわかるめちゃくちゃ優秀なダッシュボードが使えます。shiftr.io/tryをご覧になれば分かる通り、どのデバイスが繋がっていてどのtopicにデータを送っているか、リアルタイムで表示されるのです。
動きが面白くてずっと見ていられますし、通信の監視や問題箇所の切り分けにも使えて実用性も十分です。

無限ループって怖くね？

課題：見るべき画面が多すぎる

Noodlとshiftr.ioを組み合わせて何か作ろうとすると、Noodlのエディタ・shiftr.ioの画面・（IoTモノなら）Arduino IDEやシリアル通信のモニタなどを確認しながら作業が進みます。

通信できているか確認したいときなどは、Noodlとshiftr.ioを横に並べて見比べなければなりません。割と面倒です。

shiftr.ioの埋め込み機能を使うと……

ググってもほとんど言及されていませんが、shiftr.ioの画面をよく見るとEmbedなるボタンがあります。

押すと埋め込みコードがコピーできる画面に飛びます。

ところで、NoodlにHTML ContentというHTMLを書き込めるノードがあります。

これをこうして……

こうじゃ
( ＾ω＾)

解説

以降は真面目に解説します。
今回作ったプロジェクトはGitHubで公開しています。

HTML Contentにshiftr.ioを表示させる

シンプルなボタンが1つあるだけのプロジェクトを用意しました。Circleを押したとき・離したときに状態が変化し、/buttonトピックにJSONが送信されます。

HTML Contentを作成して、画面の下半分に配置します。プロパティのContent > HTML > EditからHTMLのエディタが開けるので、shiftr.ioからコピペした埋め込みコードを貼り付けます。

この時点でshiftr.ioの画面が表示され、ブラウザで見るものと同様に表示されているのが分かります。

埋め込みコードの修正

生成された埋め込みコードは以下のようになっています。

<!DOCTYPE html>
<iframe src="https://shiftr.io/{user}/{namespace}/embed?zoom=1"
        width="600" height="400" frameborder="0"
        webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

widthとheightが固定されていますが、Noodlの画面からはみ出してしまったのでそれぞれ100%に修正します。これでHTML Contentノード自体のサイズへ従うようになるので、Noodl側だけでレイアウト調整ができます。

また、webkitallowfullscreen mozallowfullscreen allowfullscreenの記述があると、埋め込まれた画面内に"Maximize"なるボタンが表示されます。
これを押すとshiftr.ioの画面が最大化されるのですが、Noodl自体がelectron（中身はChromeブラウザ）で作られているため、押すとNoodlのエディタごと最大化してしまいます

最大化機能が不要であればfullscreen関係の属性は削ってしまいましょう。埋め込まれた画面中にMaximizeボタンが出てこなくなります。

<!DOCTYPE html>
<iframe src="https://shiftr.io/{user}/{namespace}/embed?zoom=1"
        frameborder="0" width="100%" height="100%"></iframe>

きちんと画面内に収まっていい感じです。

完成

これでshiftr.ioでの通信状況をNoodlから閲覧できるようになりました。
背景色や文字色をshiftr.ioに合わせて#1aaa54に設定すると統一感が出ます。

あとは用途に合わせてボタンや表示エリアを作成すればOKです。

Tips

埋め込んだiframeは、Noodl側で画面サイズを変えても動的にサイズを変えてくれません。
画面サイズを変えたら、Noodl画面右上の再読み込みボタンを押しましょう。

埋め込まれたshiftr.io画面でも、本家と同様にデバイスやトピックをドラッグで移動したり、スクロールで拡大縮小したりできます。

ただし、何かの弾みでドラッグやスクロールが効かなくなることがあります。原因は分かっていませんが、この場合もNoodl側で再読み込みすれば大抵直ります。

活用シーン

開発や動作確認に

Noodlで作業しながらリアルタイムで繋がっているデバイスや送られているデータを確認できます。
これが想像以上に快適で、動かない時もすぐに原因を把握できる（データが送られてない・マイコンのWi-Fi通信が切れているなど）ので開発がスピードアップすることでしょう。

勉強会などでのデモに

IoTLTなどで発表していると、いざ壇上でデモしようという時に様々な原因で動かないという「デモあるある」が稀によく発生します。特に通信関係でうまくいかないケースは多いので、Noodlで確認できるようにしておくと良さそうです。

Noodlではブラウザでプレビューを表示できますが、同じLANに繋がっていれば他の端末からでもアクセス可能です。
つまり、PCでデモ発表しながら手元のスマホでこっそりモニターするなんてこともできます。

連携がうまく動かない時などの保険として、手動で作品を動かすボタンをつけても面白いと思います。