× の よもやま話 Node-RED UG勉強会 Vol.9 2019/9/27 

流れ 自己紹介 Noodlとは？ Node-REDとNoodlを連携 ライブビジュアルコーディング Node-REDとNoodlの比較 まとめ 

自己紹介  まえぷー  組込みソフトエンジニア  業務はマイコンファームウェア開発  趣味でIoT電子工作  Node-REDスキル  Functionノードでカスタマイズノード作成  MQTT in/outをよく使います ＠kmaepu ＠kmaepu 技術書典７で頒布しました！ 

Noodl知名度調査！ Noodl知ってる、使ったことある方！ 

Noodlとは？ Noodl JPより引用 https://tensorx.co.jp/noodl-jp/ 

Noodlとは？ 【機能】 １．UI/UXのビジュアルデザイン ２．コーディング不要ノードベースで要素を繋ぐだけで構築 （Javascriptでも可） ３．API、リアルデータ、機械学習連携可能 ４．IoT（マイコン接続）も可能 ５．ウェブアプリケーションまたはハイブリッドアプリとしてデプロイ可能 Noodl のconnpassページから引用 https://noodl-tokyo.connpass.com/event/145424/ 

NoodlとNode-REDの連携  MQTT、REST（http request）が連携しやすい  MQTT  ＴＣＰ／ＩＰネットワークで利用できる軽量な通信プロトコル。  多数の機器間を頻繁にデータのやり取りすることに向いている。 → IoT向け！  REST  パラメータを指定して特定のURLにHTTPでアクセス。  REST APIが用意されているサービスが沢山ある。 → IoT向け！ 

NoodlとNode-REDの連携  MQTTで連携する場合  MQTTブローカが必要となる （１） Node-REDのMQTTブローカノード「mosca」を利用する （２） 外部MQTTブローカ（shiftrなど）を利用する enebularとNoodlを shiftr.io MQTTブローカー経由で連携しよう https://blog.enebular.com/enebular/enebular-meets-noodl/ enebular blog 

NoodlとNode-REDの連携  REST（http request）で連携する場合  NodeREDのhttpノードを利用する  NoodlのRESTノードを利用する  Noodlがhttp requestを発行する https://qiita.com/kisaichi07/items/527ba7b3d4ed1dacce07 enebularで作ったREST APIを Noodlから叩いてみた Qiita@kisaichi07 

ライブビジュアルコーディング  Noodl×Node-RED×obniz MQTT サーボモータ Webhook ボタン On / Off 位置 0°/ 90° 

NoodlとNode-REDの比較 【Node-RED】  ダッシュボードノードでUIを作成できる。  用意されたUIパーツ（ノード）を並べる。 → お手軽にデータの可視化  作成したUIを共有しづらい。 （Node-REDの実行環境が必要） 【Noodl】  UIパーツを自由に作りこめる。 → UI作成の自由度が高い  htmlとjsファイルを出力できる。 → Noodl以外の環境で閲覧できる ブラウザがあれば共有できる（チーム開発、顧客との確認）  Androidアプリにすることも可能。 

まとめ  現状の使い方  Noodl → フロントエンド、UI特化  Node-RED → バッグエンド、サービス連携  今までのIoT電子工作は、UIまで作る例が少なかった Noodlでお手軽にオシャレで独自のUIが作れるようになった！  さらなる連携や利用方法を開拓していきましょう！ 

まとめ 披露したNoodl × Node-RED × obniz連携方法を 後ほどQiitaにアップする予定です！！ ＠kmaepu ＠kmaepu 

告知！！  １０月のNoodl関連イベントは3本予定されています！ Noodlもくもく会# 0 （非公式） 10月5日(土)9:00～12:00 Noodl2.5Hハンズオン（公式） 10月24日(木)19:00～21:30 

告知！！ ノンコーディングIoTパーティ （株式会社ウフル様） 10月29日(火)19:00～22:00