Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Noodl ×Node-REDのよもやま話
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
maepu
September 27, 2019
Technology
620
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Noodl ×Node-REDのよもやま話
Node-RED UG勉強会 Vol.9の登壇資料です。
NoodlとNode-REDの連携や比較について、簡単に解説しています。
maepu
September 27, 2019
More Decks by maepu
See All by maepu
仮想通貨アラート(物理)を作ってみた
maepu
0
580
enebular×Noodlで保活お助けサービス構築に挑戦!
maepu
0
340
ビジュアルプログラミングでハロウィンを楽しもう!
maepu
0
400
LINE LIFFを出窓菜園に取り入れてみた
maepu
0
750
遠隔で嫁に筋トレを応援してもらう
maepu
0
830
ぽーずるん「ぐにゃシャキ」@ProtoOut オンラインハッカソン
maepu
0
160
Noodlで受付嬢を創った
maepu
1
2k
Bay WIndow Garden新たなる家庭菜園のカタチ~カメラ編~
maepu
0
500
Noodlに出会ってから作ったものを振り返る
maepu
1
360
Other Decks in Technology
See All in Technology
はじめてのDatadog
kairim0
0
280
そのPoC、何を検証したつもりでしたか? AIプロダクトの価値検証で陥った落とし穴
techtekt
PRO
0
150
個人最適 から 全体最適 へ AI情報共有会・AIギルド・AI-DLC で進める カンリーの組織展開
rfdnxbro
0
1.5k
Databricks 月刊サービスアップデート 2026年05月号
tyosi1212
0
210
AIを「創る」と「使う」の循環 — HRテックが実践するリアルなAI組織実装
taketo957
0
1.5k
Claude Codeを組織で使いこなす— サーバサイドAIエージェント運用の実践知
techtekt
PRO
0
200
Unlocking the Apps
pimterry
0
230
AI-DLCを活用した高品質・安全なAI駆動開発実践 / AI Driven Development with AI-DLC
yoshidashingo
0
140
生成 AI × MCP で切り拓く次世代 SRE!自律型運用への挑戦と開発者体験の進化
_awache
0
150
新規事業を牽引する技術選定 〜フルスタックTypeScript開発の実践事例〜
nullnull
3
350
TypeScript Compiler APIとPHP-Parserを活用し、TypeScriptとPHPで型を共有する
shuta13
0
360
DevOps Agentで始めるAWS運用 〜フロンティアエージェントが変える運用の現場〜
nyankotaro
1
230
Featured
See All Featured
Agile Actions for Facilitating Distributed Teams - ADO2019
mkilby
0
200
sira's awesome portfolio website redesign presentation
elsirapls
0
270
What’s in a name? Adding method to the madness
productmarketing
PRO
24
4.1k
Paper Plane
katiecoart
PRO
1
51k
SEO for Brand Visibility & Recognition
aleyda
0
4.6k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
160
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
122
22k
Building Applications with DynamoDB
mza
96
7.1k
Leading Effective Engineering Teams in the AI Era
addyosmani
9
2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
231
23k
GitHub's CSS Performance
jonrohan
1033
470k
Typedesign – Prime Four
hannesfritz
42
3.1k
Transcript
× の よもやま話 Node-RED UG勉強会 Vol.9 2019/9/27
流れ 自己紹介 Noodlとは? Node-REDとNoodlを連携 ライブビジュアルコーディング Node-REDとNoodlの比較 まとめ
自己紹介 まえぷー 組込みソフトエンジニア 業務はマイコンファームウェア開発 趣味でIoT電子工作
Node-REDスキル Functionノードでカスタマイズノード作成 MQTT in/outをよく使います @kmaepu @kmaepu 技術書典7で頒布しました!
Noodl知名度調査! Noodl知ってる、使ったことある方!
Noodlとは? Noodl JPより引用 https://tensorx.co.jp/noodl-jp/
Noodlとは? 【機能】 1.UI/UXのビジュアルデザイン 2.コーディング不要ノードベースで要素を繋ぐだけで構築 (Javascriptでも可) 3.API、リアルデータ、機械学習連携可能 4.IoT(マイコン接続)も可能 5.ウェブアプリケーションまたはハイブリッドアプリとしてデプロイ可能 Noodl のconnpassページから引用
https://noodl-tokyo.connpass.com/event/145424/
NoodlとNode-REDの連携 MQTT、REST(http request)が連携しやすい MQTT TCP/IPネットワークで利用できる軽量な通信プロトコル。 多数の機器間を頻繁にデータのやり取りすることに向いている。
→ IoT向け! REST パラメータを指定して特定のURLにHTTPでアクセス。 REST APIが用意されているサービスが沢山ある。 → IoT向け!
NoodlとNode-REDの連携 MQTTで連携する場合 MQTTブローカが必要となる (1) Node-REDのMQTTブローカノード「mosca」を利用する (2) 外部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
告知!! 10月の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