Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

NoodlでCloudMQTTを利用する方法

More than 1 year has passed since last update.

目的

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

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

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

CloudMQTTの利用方法

1. CloudMQTTにアクセスし、Get a managed IoT broker todayをクリック。
スクリーンショット 2019-11-04 21.51.36.png
2. フリープランのGet Nowをクリック。
スクリーンショット 2019-11-04 21.52.30.png
3.CloudMQTTにログイン。
4.ログイン後の画面右上にあるCreate New Instanceをクリック。
5.Nameにインスタンス名を入力し、Select Regionをクリック。(今回はインスタンス名をtestとしました)
スクリーンショット 2019-11-04 22.15.45.png
6.AWSのデータセンターを選択します(今回はUS-East-1を選択しました)
スクリーンショット 2019-11-04 22.18.01.png
7.入力情報を確認したらCreate instanceをクリック。
8.インスタンスが作成され、AWS上にMQTTブローカーを立てることができました!
スクリーンショット 2019-11-04 22.25.26.png
9.作成したインスタンスをクリックすると、サーバー名、ユーザー名、パスワード、各ポート番号などが表示されます。これらの情報をNoodl側で使うので、この画面を開いたままNoodlへ移ります。
スクリーンショット 2019-11-04 22.27.51.png

NoodlでClowdMQTTを利用する方法

1.Noodlでプロジェクトを開いた後、Project settingsを開きます。
スクリーンショット 2019-11-04 22.47.26.png
2.MQTT欄のExternal Brokerにチェックを入れると、Broker URLの入力欄が出現します。
 Broker URLはCloudMQTTの情報を元に以下のように入力します。
 wss://【User】:【パスワード】@tailor.cloudmqtt.com:【Websockets Port (TLS only)】
スクリーンショット 2019-11-04 22.51.26.png
3.Send Messegeノードを作成し、Topicに/testと入力します。
 (最初に/を必ず入れれば、どんな名前でもOKです)
 左下にある+Portをクリックし、Payloadにmojiというポートを作成しました。
 (ポートも好きな名前でOKです)
 Send On Changeにチェックを入れます。
 (データが変更される度に、mqttブローカーへデータを送るということです)
スクリーンショット 2019-11-04 23.13.14.png
4.Text Inputノード(Text)からSend Messegeノード(moji)へ繋ぎます。
スクリーンショット 2019-11-04 23.11.17.png
5.Receive Messegeノードを作成し、Topicに/testと入力します。
 (Send Messegeノードで決めたTopic名と同じでないと、データを受け取れません)
 左下にある+Portをクリックし、Payloadにmojiというポートを作成します。
 (Send Messegeノードで作成したポート名と同じ名前出ないと、データを受け取れません)
スクリーンショット 2019-11-04 23.15.54.png
6.Receive Messegeノード(moji)からTextノード(Text)へ繋ぎます。
スクリーンショット 2019-11-04 23.22.16.png
7.プレビュー画面に文字を入力してみて、その通りに文字が表示されれば成功です!
スクリーンショット 2019-11-04 23.33.46.png

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

CloudMQTTのWEBSOCKET UIをクリックすると以下のような画面が出ます。
この画面で、送受信されたデータを確認することができます。
スクリーンショット 2019-11-04 23.32.23.png
データが送受信されるとこんな感じ↓
文字が入力される度にデータが送られているのが分かります。
スクリーンショット 2019-11-04 23.31.44.png

おわりに

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

pentake
Design Engineering - UI / UX / Noodl / HTML / CSS / JavaScript / React
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away