Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
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
640
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
家庭植物工場×Node-REDの話
maepu
0
33
仮想通貨アラート(物理)を作ってみた
maepu
0
600
enebular×Noodlで保活お助けサービス構築に挑戦!
maepu
0
350
ビジュアルプログラミングでハロウィンを楽しもう!
maepu
0
400
LINE LIFFを出窓菜園に取り入れてみた
maepu
0
770
遠隔で嫁に筋トレを応援してもらう
maepu
0
850
ぽーずるん「ぐにゃシャキ」@ProtoOut オンラインハッカソン
maepu
0
160
Noodlで受付嬢を創った
maepu
1
2k
Bay WIndow Garden新たなる家庭菜園のカタチ~カメラ編~
maepu
0
510
Other Decks in Technology
See All in Technology
絵ではじめるKubernetesセキュリティ
aoi1
4
700
なぜ「決定性」が 決定的に重要なのか? Durable Execution 基盤の数理的理解 #serverlessjp / ServerlessDays Tokyo 2026
ytaka23
3
1.2k
作って終わりじゃないサーバーレス 〜9年運用する大規模EC物流API基盤の設計・運用のリアル〜
zozotech
PRO
0
460
LLMに渡さなかった仕事
nanaism
0
1.4k
データ界隈LT祭 第1回LT登壇
taromatsui_cccmkhd
2
1.5k
AIを活用するために決めた "やらないこと" - 価値に注目する / Not betting on AI
soudai
PRO
3
590
Minecraft JavaのMODをSwiftで作る
1mash0
0
200
Railsのように考える: See through the Master
snoozer05
PRO
5
1.3k
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
12k
サーバーレスをどこまで使う? WebRTC対戦ゲームで選んだVPSとの共存設計
kaidouji85
0
340
AIエージェントの一手は 誰も見ていない - Falco拡張OSS「Prempti」とeBPFで サーバーレス実行基盤を二層防御する
keitah
0
490
C#コードの結合を可視化する Roslyn解析による設計改善と リファクタリング判断
dora56
0
440
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
700
Abbi's Birthday
coloredviolet
4
10k
Mobile First: as difficult as doing things right
swwweet
225
10k
Bash Introduction
62gerente
615
220k
SEO in 2025: How to Prepare for the Future of Search
ipullrank
3
3.8k
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
910
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
470
Highjacked: Video Game Concept Design
rkendrick25
PRO
1
460
Facilitating Awesome Meetings
lara
57
7.1k
sira's awesome portfolio website redesign presentation
elsirapls
0
420
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
helenjbeal
1
330
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