M5Stackを使ってIoT機器を作るうえで、欠かせないのがデータを送信する仕組みです。
本記事では、UIFlowを使ってM5StackからMQTTプロトコルでデータを送信（Publish）する方法をわかりやすく解説します。
これは、M5StackでIoTを始めるために必須の基礎知識です。
ぜひこの記事でしっかりマスターしましょう。
MQTTの基本
MQTT通信の仕組み
MQTTは、IoTでよく使われる軽量な通信プロトコルです。
センサーやデバイスが安定してデータをやりとりできるため、M5Stackなどのマイコンと非常に相性がよいのが特徴です。
MQTTの３つの主な役割
MQTT通信では、次の３つの役割が登場します。
| 役割 | 説明 |
|---|---|
| Publisher | データを送る側 |
| MQTT Broker | 中継するサーバー |
| Subscriber | データを受け取る側 |
通信の流れは以下のようになります。
Publisher（M5Stackなど） → MQTT Broker → Subscriber（PCや他のデバイス）
M5Stackが送るデータは、一旦 MQTT Brokerに届けられ、そのデータを受け取りたい人（Subscriber）が購読していれば、ブローカー経由でデータが配信されます。
トピックとは？メッセージとは？
トピックとは
MQTTでは「どんな種類のデータなのか？」を分類するためにトピック（topic）という名前の宛先を使います。
例えば、M5Stackが温度センサーの値を送信するときに、次のようなトピックを使うことができます。
home/livingroom/temperature
このトピックに対してSubscriberが購読（Subscribe）していれば、M5Stackが送った温度データをリアルタイムで受け取ることができます。
メッセージとは
実際にトピックを通して送る中身のデータがメッセージです。
これはテキストでも数値でもOK。
たとえば、
25.6または、JSON形式でも送れます。
{"temp":25.6, "unit":"度"}MQTTの仕組みはシンプルですがとても強力です。
UIFlowを使えば、とても簡単にMQTTでデータ送信ができますよ。
MQTT Publishフローの概要
では、UIFlowで実際にMQTT Publish（データ送信）を作っていきましょう。
ここでは1秒毎にカウントアップするタイマーを作って、その値をPublishしてみます。
MQTT Publishのフロー
フローの完成形を示します。
プログラムの流れは次の通り。
Setupブロック
- 変数を定義（関数：SetVariables）
- WiFiに接続（関数：ConnectWiFi）
- MQTT Publisherの設定
Loopブロック
- カウント値をカウントアップ（関数：CountUp）
- MQTT Publish
- 1秒タイマー
MQTT Publishフローの詳細
MQTTの準備
デフォルトの状態では、MQTTを使うためのブロックがありません。
まずは、MQTTを使うための設定を行います。
①Sofftwareをクリック
UIFlowの画面左側、ResourcesのSoftwareをクリック。
②ソフトウェアモジュールを追加する
Software 追加のダイアログが開きます。
MQTTを選択して、Confirmをクリック。
③追加したモジュールの確認
MQTTブロックが追加されました。
Setupブロックの詳細
関数：SetVariables
ネットワーク関連の変数に初期値を設定します。
実際は、ご自身の環境に合わせて設定してください。
関数：ConnectWiFi
WiFiに接続する処理を実行します。
このフローの詳細についてはこちらの記事を参考にしてください。
MQTTの設定
MQTTの初期設定を行います。
| Set MQTT client id | クライアントID（このM5Stackの識別名） |
| server | MQTTブローカーのIPアドレス（自分のサーバーやLAN内ブローカーなど） |
| port | 通信に使うポート番号（標準は1883） |
| user | MQTTブローカーにログインするためのユーザー名とパスワード（今回はなし） |
| password | |
| keep alive | 接続の「生存確認」タイマー（0は無効、通常は60などが多い） |
作成したクライアントで、実際にMQTTブローカーと接続します。
引数は通常は"true"にしておきます。
これは、セッション情報を毎回リセットするかどうかのパラメータで、"true"にすると「新規接続」として扱われます。
Loopブロックの詳細
Loopブロックでは、変数 count を１秒に１ずつカウントアップしていった後、MQTT. publishで MQTTブローカーにデータを送信します。
関数：CountUp
この関数では、変数 count を１増やして
その値を payload_map（辞書型）に格納し、
それをJSON形式に変換して payload_json に代入するという処理を行っています。
変数の値の例
payload_map（辞書型） = { 'count' : 5 }
payload_json（JSON文字列） = { "count" : 5 }
Map 辞書型 についての解説はこちらの記事を参考にしてください。
関連記事
UIFlow2：データ構造 変数、リスト(List)、マップ(辞書・Map)の使い方
MQTT Publish
このブロックでM5StackからMQTTブローカーにデータを送信（publish）します。
payload_jsonというJSON文字列を m5/count というトピックに送っています。
引数の意味と役割
| m5/count | トピック名：この宛先（チャネル）にメッセージが送信される |
| payload_json | 実際に送信されるメッセージ内容 例：{ "count": 5 } などのJSON文字列 |
| port | 通信に使うポート番号（標準は1883） |
| qos = 0 | QoS(Quality of Service)レベル。通信の信頼度を設定します。 |
MQTT Publishの実行結果
Node-REDのMQTT Brokerでデータを受信して、トピック m5/count を subscribe（データ受信）します。
１秒毎にリアルタイムでカウント値を受信していることがわかります。
MQTTを使えば手軽にデータを送受信できるね！
「MQTTでデータ通信しよう」のまとめ
この記事では、UIFlowを使ってMQTT送信をする方法について解説しました。
M5StackをIoT機器として使う時に、センサなどで取得したデータを送信することが必須となります。
MQTTを使うと簡単にデータ通信することができますので、ぜひ実際にトライしてみてください。