2/27 に行われたイベント IoTLT で LT登壇した際、その登壇ネタにしていた以下の話にも関連する内容です。
M5Stack社のデバイスをビジュアルプログラミングで扱える「UIFlow」の新バージョン 2.0 で、IoT でよく使われる MQTT を扱う話です。
UIFlow（バージョン 1系）での MQTT
今回の記事の本題は、今月正式版になった新しいバージョンの UIFlow（UIFlow 2.0）で MQTT という話ですが、バージョン 1系では過去に既に何度も利用していたものでした。
直近では、以下の記事に書いたものがあります。
●【小ネタ】shiftr.io Desktop と UIFlow1.0 の MQTT を組み合わせて軽く動作確認（ローカルネットワーク内） - Qiita
https://qiita.com/youtoy/items/69dc3c4a5dde16600092
またかなり前の記事になりますが、以下は MQTT の通信の仲介役（MQTTブローカー）にクラウドサービスを使った話です（上で掲載したものは、宅内ローカルでプライベートIP を用いた通信をやっていました）。
●Beebotte のダッシュボードで M5StickC から送った数値をグラフ化する（UIFlow ＋ MQTT でデータ送信） - Qiita
https://qiita.com/youtoy/items/b65ddfc89a03117a0ee3
MQTT による送受信（パブリッシュ／サブスクライブ）は、複数台をつなぐのを手軽に実現できたり、また宅内にあるデバイスに対してインターネット側からの通信をやりやすかったり、便利に使えると感じています。
UIFlow 2.0 でシンプルな MQTT
それでは本題の UIFlow 2.0 でのシンプルな MQTT です。
今回は、UIFlow 2.0 を使うためのセットアップや、細かな使い方の話は省き、シンプルにどのようなブロックを利用するか、という部分をサクッと紹介する感じにします。
サブスクライブ
先にデータを受信する側、MQTT のサブスクライブの話です。
以下の動画に出てくる、手前の小さなデバイス（ATOMS3）の実装に用いたものについてです。
（※ 以下では、送り側は JavaScript を用いて 0-255 の数値を送っているのですが、その部分は UIFlow の話からズレるのと、過去に JavaScript＋MQTT の話を複数記事に書いているので、今回は省略します）
用いたブロックのプログラムは以下のとおりです。
基本的に青色のブロック（convert to int のブロックを除く）が、MQTT関連のブロックです。
Setup の中で初期設定と通信開始の処理を行い、サブスクライブのブロックで MQTT で使う「トピック」を設定しています（さらに、その中の「get msg (return bytes)」で、受信したメッセージを取り出している形）。
それと、ループの処理の部分で、「MQTT apply for messaging」を使う構成となります。
上記の構成は、キーワード検索して結果に出てきていた以下を参考にしました。
※ なお、自分の用いたものは「MQTT で送られてくるものが数値」という前提になっています
●m5tough UIFlow2.0 Alpha 24. mqtt. first-timer needs some guidance | M5Stack Community
https://community.m5stack.com/topic/5634/m5tough-uiflow2-0-alpha-24-mqtt-first-timer-needs-some-guidance
パブリッシュ
今度は送信（パブリッシュ）です。
ループする処理の中で、カウントアップする数字を用意していて、それを送信しています。
基本的には、Setup の中は受信（サブスクライブ）の場合と同じような構成です。それと、送信（パブリッシュ）の場合は、「MQTT apply for messaging」を使う必要はなさそうで、メッセージを送りたいところで「トピック」とメッセージを指定してやれば良さそうでした（なお、MQTT の msg で送るのは文字列となり、上記では数値を送ろうとしたため、文字列変換の処理をする「convert to str」を用いています）。
おわりに
とりえあず、UIFlow 2.0 でシンプルな MQTT の送受信（パブリッシュ／サブスクライブ）を実現するための、ブロックを使ったプログラムを紹介してみました。