enebularとNoodlをshiftr.io MQTTブローカー経由で連携しよう

enebularとNoodlをshiftr.io MQTTブローカー経由で連携してみます。

Noodl

Noodlは最近日本に上陸したプロトタイピングツールです。特にユーザーインターフェースとIoTを得意としていて、さまざまな処理ができるノードを組み合わせて、すばやくプロトタイピングが可能です。

enebularは総合的なIoTサービスなのでIoTデータをうまく整えたりやデータの可視化を行える側面を連携して、たとえばNoodlはスマホとIoTが連携する仕組みを担い、enebularは様々なAPIやIoTデータを受け止めてNoodlの扱いやすい形で橋渡しするような分担ができます。

image

2019/08/27時点での、1.3.1の前提で進めます。

Noodlプロジェクトファイルのダウンロード

以下のURLからプロジェクトファイルをダウンロードします。

Noodl-sample.zip

Noodl-sample.zipというファイル名でダウンロードされます。

image

解凍すると、

image

enebular-Noodlというフォルダがあり、そのなかにプロジェクト情報であるproject.jsonが入ってます。この場所を覚えておきます。

Noodlにプロジェクトファイルを読み込む

image

Noodlを起動してプロジェクトファイルを読み込みます。

image

トップページで Add external project をクリックします。

image

enebular-Noodl を選択します。

image

プロジェクトが読み込まれます。

image

クリックしてプロジェクトを開いておきましょう。

shiftr.io MQTTブローカーを使う

image

shiftr.io の公開されているMQTTブローカーを使います。もちろんアカウント登録すると、独自のプライベート shiftr.io MQTTが使えますが今回はすぐに使える公開MQTTを使います。

今回はやり取りを体験することに集中するので、用途としても大丈夫でしょう!

image

トップページで、上部メニューのTryを押して遷移します。

image

下部のJavaScriptボタンを押してMQTTの設定を覚えておきます。

mqtt://try:[email protected]

というのが接続情報です。

これは、 接続する MQTT ID が try 、パスワードが try で、接続先が broker.shiftr.io という意味です。

Noodl で外部MQTTブローカー設定

Noodl で外部MQTTブローカーを設定します。

Noodl に戻ります。

image

歯車マークでプロジェクトの設定を行います。

image

このような画面が表示されるので、 MQTTの欄にある Broker URLを修正します。

image

shiftr.io のTryアカウントで使える先ほどの

mqtt://try:[email protected]

を入力します。

これで Noodl の準備は完了です。

enebular のDiscover Flowから持ってくる

https://enebular.com/discover/flow/ec98cfa5-431a-42c6-a935-02ec0713458c

image

今回は、すでにMQTTの設定は入っています。

image

念のため、確認しましょう。

image

MQTTのサーバURLは broker.shiftr.io に、すでに設定されています。

image

ユーザー名は try 、パスワードも try で設定済みです。

こちらで、enebularの準備は完了です。

動かしてみる

Noodlのプレビュー画面を起動しましょう。

image

メニューのこちらのアイコンをクリックするとプレビューがブラウザで見れます。

image

ためしにどこでも良いので画面をクリックしてみましょう。

image

押したぶんだけ enebular のデバッグ画面でデータを受け取ったことが確認できます。

image

つづいて、injectノードを押してenebularからNoodlに「Hi! enebular!」というメッセージを送ります。

image

プレビューを見てみると、データを受け取ってメッセージが変わっています!

enebularとNoodlともにIoTのプロトタイピングにフォーカスしつつも、それぞれの良さがあって楽しいですね。IoTのデータはボリュームがありデータの表現もたくさんあります。それに紐付いたデータを活用するためのユーザーインターフェースの表現も様々です。

ひとつのツールでデータもユーザーインターフェースも全部を担うには荷が重いですが、enebularでデータの集約やデータの表現を試行錯誤してうまくとりまとめ、さらにNoodlではデータの見せ方やユーザーインターフェースとしての表現を試行錯誤する、といった形で分けられれば、ユーザーインターフェースもデータのマネジメントもすばやく作って試せる制作に優しい仕組みができます。

enebularとNoodlの連携、是非試してみてください!