【小ネタ】shiftr.io Desktop と UIFlow1.0 の MQTT を組み合わせて軽く動作確認（ローカルネットワーク内）

はじめに

過去の試作でよく利用して、Qiita の記事も書いてきた「shiftr.io」のデスクトップ版アプリと、「UIFlow1.0（以下、単に UIFlow とだけ記載）」とが関連する話です。

●「shiftr.io user:youtoy」の検索結果 - Qiita
　https://qiita.com/search?q=shiftr.io%20user%3Ayoutoy&sort=created

●「UIFlow user:youtoy」の検索結果 - Qiita
　https://qiita.com/search?q=UIFlow%20user%3Ayoutoy&sort=created

今回やること

今回の内容をもう少し書くと、具体的にはローカルネットワーク内での片方向通信です。
通信は、「UIFlow のプログラムを動かしている M5Stack系デバイス」から「shiftr.io Desktop を動かしている PC」に向けて行います（通信は　MQTT のパブリッシュ）。

今回の構成

今回のお試し用の構成は、以下の通りです。

• ハードウェア
  • MacBook Pro
  • M5StickC Plus2
• ソフトウェア・アプリなど
  • shiftr.io Desktop
  • UIFlow1.0

とりあえず、MQTT のパブリッシュを軽く試すだけ、という構成です。
（MQTTブローカーと、そこにつながった1台の端末との間での通信）

サブスクライブは今回は取り扱いません。

shiftr.io Desktop のバージョン

今回用いる shiftr.io Desktop は、記事執筆時点の最新版を用いました。

以下の公式サイトからダウンロードすることもできますが、自分は、過去にインストールしていた古いバージョンのアプリがあったので、そのアプリ経由でバージョンアップしました。

アップデート後のバージョン確認をした画面は以下のとおりです。

シンプルな手順でのお試し

それでは、UIFlow でブロックのプログラムを組んで、それを動作させつつ、shiftr.io Desktop のほうとの間での通信を試します。

UIFlow で最小限のブロックを組む

それでは、UIFlow で最小限のブロックを組んで、接続確認だけやってみます。

利用したブロックは、以下のとおりです。

プログラムの処理の内容は、以下となっています。

まずは、Setup の部分です。

1. shiftr.io Desktop（MQTTブローカー）との通信を行うためのセットアップ処理
   • クライアントID： 適当な文字列で設定（今回は「M5CP2」）
   • サーバーアドレス： shiftr.io Desktop を動かしている PC のプライベートアドレスを設定
   • サーバーのポート番号： 1883 【デフォルト値】
   • ユーザー名／パスワード： （空）
   • キープアライブ： 300 【デフォルト値】
   • SSL： False 【デフォルト値】
2. 通信の開始
3. Setupの処理が進んだことを確認するための、画面の色を変える処理

ボタン押下時の処理は以下の通りです。

1. Aボタンが押された時に処理を実行
2. MQTT のパブリッシュ
   • トピック： 適当に決めた文字列（今回は「test」）
   • データ： 適当に決めた文字列（今回は「abc」）
   • QOS： 0 【デフォルト値】

このプログラムを実行後、M5StickC Plus2 の Aボタンを押せば、MQTT を用いたデータ送信（パブリッシュ）が行われます。

shiftr.io Desktop側

あとは、shiftr.io Desktop側のほうを見ていきます。

先ほどの UIFlow で組んだプログラムを動かしている状態だと、既に shiftr.io Desktop との間で通信が確立された状態になっています。
それがアプリ上の表示で分かります（アプリ上に「M5CP2」という名称のものが、図的につながっている状態になっているのが分かります）。

ここで M5StickC Plus2 の Aボタンを何度か押してみます。
そうすると、shiftr.io Desktop の表示が以下のようになり、先ほどの画面から少し変化した状態になりました。

画面の左上を見ると、「トピック test、データ abc」という MQTT を使った通信内容を、shiftr.io Desktop で受けとれていることが分かります。

おわりに

とりあえず、ローカルネットワーク内で MQTT のパブリッシュを、小さい構成で試すことができました。

あとは、M5StickC Plus2 以外のデバイスを shiftr.io Desktop に　MQTT でつないで、同じトピックを用いた受信処理（サブスクライブ）を行えば、これを別デバイスで受けとることもできます。

インターネットを介さない構成なので、遅延もあまりなく、端末間をつないだやりとりができます。

活用事例？： デバイスの傾きをブラウザ上のキャンバスの背景色に連動させてみる

以下は、「M5StickC Plus2 の傾き（ロール角を利用）を、ブラウザ上の p5.js のキャンバスで受けとるようにして、受けとった値を背景色に連動させてみる」という例です。

簡易な値の送受信をする事例になるような変更を、少し加えてみました。