Noodlで外部サービスとの連携方法～MQTT～

 Noodl Advent Calendar 5日目担当のまえぷーです。宜しくお願いします！

#概要
　[Noodl](https://tensorx.co.jp/noodl-jp/)はUIを作成するだけでなく、外部連携が可能なツールです。
連携方法は今のところ次の２種類があります。

- MQTT
- REST

　今回はNoodlでMQTTを扱う方法についてまとめました。

#MQTTって？
　Message Queuing Telemetry Transportの頭文字を取って**MQTT**といいます。MQTTはメジャーな通信プロトコルなので、ネットで調べるといっぱい情報が得られます。
　自分なりの解釈でざっとまとめると、「IoTの流れでネットワークに接続する端末が増え、ネットワークを流れるデータ量を減らすプロトコルがMQTT」と認識しています。
　
##MQTTの基本構成と用語
　この記事で登場する用語は次の8つです。

- MQTTブローカ
- パブリッシャー（送信者）
- サブスクライバー（受信者）
- パブリッシュ（送信）
- サブスクライブ（受信）
- メッセージ
- ペイロード
- トピック


　MQTTもHTTPと似たようにサーバを中継して通信を行います。MQTTの場合、サーバの事を**MQTTブローカ**と呼んだりします。データを送信する端末を**パブリッシャー**、受信する端末を**サブスクライバー**と呼びます。
　パブリッシャーがデータを送信することを**パブリッシュ**するといい、サブスクライバーがデータを受信することを**サブスクライブ**するといいます。MQTTでやり取りされるデータの事を**メッセージ**と呼び、その中身をペイロードと呼びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/338d478c-7113-8f29-9f63-971ce9c3ad25.png)

　MQTTの中でも重要なのが**トピック**です。このトピックについて宅配BOXを例に解説してみます。

　宅配BOXは、ネットで何か購入した際に届け先を自宅ではなく宅配BOXとすることで、荷物の再配達を減らす目的で利用されています。配達業者の方は宅配BOXに荷物を入れ、荷物を受け取る人に連絡がいき、好きな時間に荷物を受け取ることができます。
　宅配BOXに荷物を入れる人はMQTTでいうところのパブリッシャー（送信者）です。宅配BOXから荷物を受け取る人がMQTTでいうところのサブスクライバー（受信者）です。そして、宅配BOXがMQTTブローカです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/63d87014-3ed9-9813-5137-bcfae1aabc79.png)

　宅配BOXに荷物を出し入れする際、どの部屋を利用するかは番号などで管理されていますよね、これが「**トピック**」です。

　MQTTには他にもQoSやWill、RetainなどありますがNoodlでMQTTを使う分には上述の知識で扱えるため割愛します。

#MQTTを使うための設定
　NoodlでMQTTを使うにはMQTTブローカのエンドポイント（URL）をプロジェクトに設定します。Noodlエディタの画面左上の方に歯車マークをクリックしてプロジェクト設定を開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/a15b8a09-9a82-0bdc-ce5c-9a36cb1266a2.png)

　プロジェクト設定の最も下に、「External Broker」という項目があります。この項目にチェックを入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/d6d28f35-a0e6-eddf-f95a-8deafb8a0724.png)

　チェックすると、MQTTブローカのエンドポイント（URL）入力欄が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/12dc638d-e637-07b9-1623-123691eb89f1.png)

　入力するURLは次のフォーマットです。

```
mqtt://user:pass@brokerurl.com:port
```

　MQTTブローカを設定すると大抵このフォーマットのURLが表示されますので、それをこの欄に入力します。

　Noodlで使用例のあるMQTTブローカは次の通りです。

- [Cloud MQTT](https://qiita.com/pentake/items/12da21d509858db00260)
- [shiftr.io](https://qiita.com/kmaepu/items/644b0bf2c3f438e71aa6)



#パブリッシュ（送信）
　Noodlでのパブリッシュは「Send Messsageノード」を使用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/431f1c70-e6f1-f2cb-afd5-68755018386f.png)

　Send Messageノードのプロパティを開くと次のような設定が現れます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/2e4d4d76-9bf8-3817-e195-912136de0118.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/37b9406b-6625-2bf3-f6b6-508109c7c492.png)

- Topic：メッセージをパブリッシュするトピック名。
- Format：ペイロードのフォーマットです。JSONまたはCSVの２種類から選択します。
- Send On Change ：チェックするとペイロードのデータが別の値やデータに更新されたときにメッセージをパブリッシュします。
- Rate Limit：チェックすると、1秒間にパブリッシュするメッセージ数を制限できます。
- Payload：ペイロードにするデータのプロパティ。

　例えば次のように使います。Send On Changeにチェックしておき、StateノードのCurrent Stateをペイロードにつなぎます。今回のペイロード名をstateにしています。画面をタップすると状態が切り替わるので、現在の状態をMQTTブローカの「/pub」というトピックにパブリッシュします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/00999ef4-a8b5-75f1-04e3-c468439d3a53.png)

#サブスクライブ（受信）
　Noodlでのサブスクライブは「Recive Messsageノード」を使用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/50c2af8b-6c46-6bb0-47a9-e036430979dd.png)

　Recive Messageノードを開くと次のようなプロパティがあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/da8ce240-5432-2d9e-6e8b-d8a6a746cd1f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/59a54151-3625-c36e-4fad-4f598dd88bb3.png)

- Enabled：サブスクライブを有効にします。
- Topic：サブスクライブするトピック名です。
- Payload：サブスクライブしたペイロードが格納されるプロパティ名

　例えば、次のように使います。MQTTでサブスクライブしたメッセージのペイロードを画面のTextに表示しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/7c53cc3e-6040-2012-b401-2664c70db47f.png)

#おわりに
　画面を作ったら、やっぱり外部サービスとの連携がしたいですよね！今回はMQTTを紹介しましたが、RESTノードを使う方法もあります。この方法はWeb APIからデータ取得などに利用できます。

　それでは、よいNoodlライフお！