enebularとNoodlをshiftr.io MQTTブローカー経由で連携してみます。
Noodl
Noodlは最近日本に上陸したプロトタイピングツールです。特にユーザーインターフェースとIoTを得意としていて、さまざまな処理ができるノードを組み合わせて、すばやくプロトタイピングが可能です。
enebularは総合的なIoTサービスなのでIoTデータをうまく整えたりやデータの可視化を行える側面を連携して、たとえばNoodlはスマホとIoTが連携する仕組みを担い、enebularは様々なAPIやIoTデータを受け止めてNoodlの扱いやすい形で橋渡しするような分担ができます。
2019/08/27時点での、1.3.1の前提で進めます。
Noodlプロジェクトファイルのダウンロード
以下のURLからプロジェクトファイルをダウンロードします。
Noodl-sample.zipというファイル名でダウンロードされます。
解凍すると、
enebular-Noodlというフォルダがあり、そのなかにプロジェクト情報であるproject.jsonが入ってます。この場所を覚えておきます。
Noodlにプロジェクトファイルを読み込む
Noodlを起動してプロジェクトファイルを読み込みます。
トップページで Add external project をクリックします。
enebular-Noodl を選択します。
プロジェクトが読み込まれます。
クリックしてプロジェクトを開いておきましょう。
shiftr.io MQTTブローカーを使う
shiftr.io の公開されているMQTTブローカーを使います。もちろんアカウント登録すると、独自のプライベート shiftr.io MQTTが使えますが今回はすぐに使える公開MQTTを使います。
今回はやり取りを体験することに集中するので、用途としても大丈夫でしょう！
トップページで、上部メニューのTryを押して遷移します。
下部のJavaScriptボタンを押してMQTTの設定を覚えておきます。
mqtt://try:try@broker.shiftr.io
というのが接続情報です。
これは、 接続する MQTT ID が try 、パスワードが try で、接続先が broker.shiftr.io という意味です。
Noodl で外部MQTTブローカー設定
Noodl で外部MQTTブローカーを設定します。
Noodl に戻ります。
歯車マークでプロジェクトの設定を行います。
このような画面が表示されるので、 MQTTの欄にある Broker URLを修正します。
shiftr.io のTryアカウントで使える先ほどの
mqtt://try:try@broker.shiftr.io
を入力します。
これで Noodl の準備は完了です。
enebular のDiscover Flowから持ってくる
https://enebular.com/discover/flow/ec98cfa5-431a-42c6-a935-02ec0713458c
今回は、すでにMQTTの設定は入っています。
念のため、確認しましょう。
MQTTのサーバURLは broker.shiftr.io に、すでに設定されています。
ユーザー名は try 、パスワードも try で設定済みです。
こちらで、enebularの準備は完了です。
動かしてみる
Noodlのプレビュー画面を起動しましょう。
メニューのこちらのアイコンをクリックするとプレビューがブラウザで見れます。
ためしにどこでも良いので画面をクリックしてみましょう。
押したぶんだけ enebular のデバッグ画面でデータを受け取ったことが確認できます。
つづいて、injectノードを押してenebularからNoodlに「Hi! enebular!」というメッセージを送ります。
プレビューを見てみると、データを受け取ってメッセージが変わっています！
enebularとNoodlともにIoTのプロトタイピングにフォーカスしつつも、それぞれの良さがあって楽しいですね。IoTのデータはボリュームがありデータの表現もたくさんあります。それに紐付いたデータを活用するためのユーザーインターフェースの表現も様々です。
ひとつのツールでデータもユーザーインターフェースも全部を担うには荷が重いですが、enebularでデータの集約やデータの表現を試行錯誤してうまくとりまとめ、さらにNoodlではデータの見せ方やユーザーインターフェースとしての表現を試行錯誤する、といった形で分けられれば、ユーザーインターフェースもデータのマネジメントもすばやく作って試せる制作に優しい仕組みができます。
enebularとNoodlの連携、是非試してみてください！