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
maepu
November 21, 2019
How-to & DIY
1
610
Noodl×Node-REDハンズオン
maepu
November 21, 2019
Tweet
Share
More Decks by maepu
See All by maepu
仮想通貨アラート(物理)を作ってみた
maepu
0
520
enebular×Noodlで保活お助けサービス構築に挑戦!
maepu
0
290
ビジュアルプログラミングでハロウィンを楽しもう!
maepu
0
360
LINE LIFFを出窓菜園に取り入れてみた
maepu
0
690
遠隔で嫁に筋トレを応援してもらう
maepu
0
780
ぽーずるん「ぐにゃシャキ」@ProtoOut オンラインハッカソン
maepu
0
120
Noodlで受付嬢を創った
maepu
1
1.9k
Bay WIndow Garden新たなる家庭菜園のカタチ~カメラ編~
maepu
0
450
Noodlに出会ってから作ったものを振り返る
maepu
1
320
Other Decks in How-to & DIY
See All in How-to & DIY
ミニ四駆ベースのAIカー TatamiRacerの製作
covao
1
190
Within the team, I grow as a tester and continuously pursue product quality
camel_404
7
2.2k
AWSと学生支援 - Education-JAWS #0
awsjcpm
1
160
AWS Community Day 2024: Using AWS to build a launchable knowledge rocket 👉 Organize knowledge, accelerate learning and understand AI in the process
dwchiang
0
210
#Stampfly #M5Stack 開発ストーリーと今後の可能性 前説
takasumasakazu
0
120
GPT-4oに遅刻理由を考えてもらうボタン #gpt_4o #iotlt #chatgpt
n0bisuke2
0
380
LT(Lightning Talk)のドキドキ感を共有する IoT ぼっとキーホルダ!
scbc1167
0
360
あなたは何故コミュニティに参加するのか?
awsjcpm
1
130
わたしと技術コミュニティとキャリア
kotomin_m
2
1.7k
#スタックチャン「魔改造の夜」に行く
syumme01
1
270
習慣化のコツ
kiyomaru
1
110
静岡県のお相撲さん20240509/sumo_wrestler_from_shizuoka_prefecture_20240509
nicepapa_hirano
0
270
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
Documentation Writing (for coders)
carmenintech
72
4.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Side Projects
sachag
455
42k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Typedesign – Prime Four
hannesfritz
42
2.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Speed Design
sergeychernyshev
32
1k
GraphQLとの向き合い方2022年版
quramy
49
14k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Music & Morning Musume
bryan
46
6.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Transcript
Noodl×Node-RED ハンズオン 2019/11/21 Noodlもくもく会 #2 メンター:まえぷー × ※NoodlロゴはNoodl Labより引用
お願い 本日の様子をTwitteで呟いていただくと嬉しいです! 写真撮影OKです!!! ツイートする際は次のハッシュタグでお願いします。 #Noodl #Noodlもくもく会 #eLV勉強会 #noderedjp
認識調査! •Noodlを使ったことある方! •Node-REDを使ったことある方!
準備の確認 •Noodl ver1.3.1 •Node-RED (enebularまたはローカル) •OpenweatherMAPの登録
本日の流れ 1. Noodlもくもく会とは 2. メンター紹介 3. NoodlとNode-REDの概要説明 4. 本日作るもの説明 5.
NoodlでUI(画面)作成 ~休憩~ 6. Node-REDで天気情報取得 7. NoodlとNode-RED連携 8. まとめ
1.Noodlもくもく会とは
2.メンター紹介 • まえぷー • 職:組込みソフトエンジニア • 業務内容: • 組込み機器のファームウェア開発 •
最近の活動: • IoT電子工作 • 技術書同人誌の頒布 • 出窓菜園 @kmaepu @kmaepu
3.Noodlとは? • UI/UXのビジュアルプロトタイピングツール • フローベースの開発環境 • ノンコーディングでUIを作成できる • 外部連携も可能(MQTT、REST) •
無償で利用できる https://tensorx.co.jp/noodl-jp/ 公式サイトはこちら
3.Node-REDとは? • IoT連携ツール • ハードウェア、API、データベース等の連携が容易 • フローベースの開発環境 • ラズパイやクラウド、様々な実行環境がある •
無償で利用できる https://tensorx.co.jp/noodl-jp/ 公式サイトはこちら
4.本日作るもの お天気情報アプリ
5.Noodlで画面作成 ~ハンズオン~
6.Node-REDで天気情報取得 ~ハンズオン~
7.NoodlとNode-RED連携 ・連携方法は2種類 ① MQTT通信 ② REST (HTTP request) RESTによる連携は右の記事が 参考になります!
今回はこちらを使用します https://qiita.com/kisaichi07/items/527ba7b3d4ed1dacce07
7.NoodlとNode-RED連携 ・MQTT通信とは - Message Queueing Telemetry Transport の略 - TCP/IPネットワークを利用した通信プロトコルの1つ
- HTTP通信よりヘッダが少ないので軽量 - 非同期のパブリッシュ(送信)/サブスクライブ(受信)型
7.NoodlとNode-RED連携 https://qiita.com/kmaepu/items/644b0bf2c3f438e71aa6 今回使用するMQTTブローカはshiftr.ioです。 送信者 受信者 MQTTブローカ パブリッシュ サブスクライブ Shiftr.ioへのリンク
7.NoodlとNode-RED連携 ~ハンズオン~ ×
8.まとめ ・NoodlとNode-REDを利用すると、プログラムを書くことなく 開発できます。 ・NoodlはUI作成が得意、Node-REDはサービス連携が得意。 ・こんなことに利用できそう - 自作ラジコンのコントローラー - スマートリモコン
イベント情報 https://node-red.connpass.com/event/153172/
イベント情報 https://elv.connpass.com/event/154629/
イベント情報 Qiitaのアドベントカンレンダー参加者募集中!! https://qiita.com/advent-calendar/2019/noodl
おまけ ・NoodlとNode-REDの入門本販売中! ・基本操作~連携について説明しています。 ・受付に見本があります。 ・イベント限定で定価¥1,000 → ¥800 ・アドベントカレンダー参加確約で → ¥500
20% OFF! 50% OFF!
本日はご参加ありがとうございました!