目的

Noodlの外部MQTTブローカーとしてCloudMQTTを利用する方法を備忘録として残しておこうと思います。

今回作ったサンプルプロジェクト

入力された文字の情報をCloudMQTTに送り、CloudMQTTからNoodlに情報が返ってくるというものです。
MQTTに繋げる意味あるのかって感じですが、本記事の目的はCloudMQTTの利用方法の備忘録なので...笑

CloudMQTTの利用方法

１. CloudMQTTにアクセスし、Get a managed IoT broker todayをクリック。

２. フリープランのGet Nowをクリック。

３.CloudMQTTにログイン。
４.ログイン後の画面右上にあるCreate New Instanceをクリック。
５.Nameにインスタンス名を入力し、Select Regionをクリック。（今回はインスタンス名をtestとしました）

６.AWSのデータセンターを選択します（今回はUS-East-1を選択しました）

７.入力情報を確認したらCreate instanceをクリック。
８.インスタンスが作成され、AWS上にMQTTブローカーを立てることができました！

９.作成したインスタンスをクリックすると、サーバー名、ユーザー名、パスワード、各ポート番号などが表示されます。これらの情報をNoodl側で使うので、この画面を開いたままNoodlへ移ります。

NoodlでClowdMQTTを利用する方法

１.Noodlでプロジェクトを開いた後、Project settingsを開きます。

２.MQTT欄のExternal Brokerにチェックを入れると、Broker URLの入力欄が出現します。
　Broker URLはCloudMQTTの情報を元に以下のように入力します。
　wss://【User】:【パスワード】@tailor.cloudmqtt.com:【Websockets Port (TLS only)】

３.Send Messegeノードを作成し、Topicに/testと入力します。
　（最初に/を必ず入れれば、どんな名前でもOKです）
　左下にある+Portをクリックし、Payloadにmojiというポートを作成しました。
　（ポートも好きな名前でOKです）
　Send On Changeにチェックを入れます。
　（データが変更される度に、mqttブローカーへデータを送るということです）

４.Text Inputノード（Text）からSend Messegeノード（moji）へ繋ぎます。

５.Receive Messegeノードを作成し、Topicに/testと入力します。
　（Send Messegeノードで決めたTopic名と同じでないと、データを受け取れません）
　左下にある+Portをクリックし、Payloadにmojiというポートを作成します。
　（Send Messegeノードで作成したポート名と同じ名前出ないと、データを受け取れません）

６.Receive Messegeノード（moji）からTextノード（Text）へ繋ぎます。

７.プレビュー画面に文字を入力してみて、その通りに文字が表示されれば成功です！

送受信されたデータの確認方法

CloudMQTTのWEBSOCKET UIをクリックすると以下のような画面が出ます。
この画面で、送受信されたデータを確認することができます。

データが送受信されるとこんな感じ↓
文字が入力される度にデータが送られているのが分かります。

おわりに

今回はNoodlの外部MQTTブローカーとしてCloudMQTTを使用しました。
他にも、外部ブローカーにはshiftr.ioなどがあります。
以下の記事が参考になると思いますので、気になった方はそちらもチェックしてみてください〜
・MQTTブローカ"Shiftr.io" 入門
・デザイン思考のプロトタイピングツール"Noodl"でノンコーディングIoT！