はじめに

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

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

今回の構成

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

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

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

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

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

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

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

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

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

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

まずは、Setup の部分です。

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

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

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

あとは、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 のキャンバスで受けとるようにして、受けとった値を背景色に連動させてみる」という例です。

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