Slide 1
Slide 1 text
Noodl×Node-RED
ハンズオン
2019/11/21 Noodlもくもく会 ＃２
メンター：まえぷー
×
※NoodlロゴはNoodl Labより引用
Slide 2
Slide 2 text
お願い
本日の様子をTwitteで呟いていただくと嬉しいです！
写真撮影OKです！！！
ツイートする際は次のハッシュタグでお願いします。
#Noodl #Noodlもくもく会 #eLV勉強会
#noderedjp
Slide 3
Slide 3 text
認識調査！
•Noodlを使ったことある方！
•Node-REDを使ったことある方！
Slide 4
Slide 4 text
準備の確認
•Noodl ver1.3.1
•Node-RED （enebularまたはローカル）
•OpenweatherMAPの登録
Slide 5
Slide 5 text
本日の流れ
1. Noodlもくもく会とは
2. メンター紹介
3. NoodlとNode-REDの概要説明
4. 本日作るもの説明
5. NoodlでUI（画面）作成
～休憩～
6. Node-REDで天気情報取得
7. NoodlとNode-RED連携
8. まとめ
Slide 6
Slide 6 text
１．Noodlもくもく会とは
Slide 7
Slide 7 text
２．メンター紹介
• まえぷー
• 職：組込みソフトエンジニア
• 業務内容：
• 組込み機器のファームウェア開発
• 最近の活動：
• IoT電子工作
• 技術書同人誌の頒布
• 出窓菜園 ＠kmaepu
＠kmaepu
Slide 8
Slide 8 text
３．Noodlとは？
• UI/UXのビジュアルプロトタイピングツール
• フローベースの開発環境
• ノンコーディングでUIを作成できる
• 外部連携も可能（MQTT、REST）
• 無償で利用できる
https://tensorx.co.jp/noodl-jp/
公式サイトはこちら
Slide 9
Slide 9 text
３．Node-REDとは？
• IoT連携ツール
• ハードウェア、API、データベース等の連携が容易
• フローベースの開発環境
• ラズパイやクラウド、様々な実行環境がある
• 無償で利用できる
https://tensorx.co.jp/noodl-jp/
公式サイトはこちら
Slide 10
Slide 10 text
４．本日作るもの
お天気情報アプリ
Slide 11
Slide 11 text
５．Noodlで画面作成
～ハンズオン～
Slide 12
Slide 12 text
６．Node-REDで天気情報取得
～ハンズオン～
Slide 13
Slide 13 text
７．NoodlとNode-RED連携
・連携方法は２種類
① MQTT通信
② REST （HTTP request）
RESTによる連携は右の記事が
参考になります！
今回はこちらを使用します
https://qiita.com/kisaichi07/items/527ba7b3d4ed1dacce07
Slide 14
Slide 14 text
７．NoodlとNode-RED連携
・MQTT通信とは
- Message Queueing Telemetry Transport の略
- TCP/IPネットワークを利用した通信プロトコルの１つ
- HTTP通信よりヘッダが少ないので軽量
- 非同期のパブリッシュ（送信）/サブスクライブ（受信）型
Slide 15
Slide 15 text
７．NoodlとNode-RED連携
https://qiita.com/kmaepu/items/644b0bf2c3f438e71aa6
今回使用するMQTTブローカはshiftr.ioです。
送信者 受信者
MQTTブローカ
パブリッシュ サブスクライブ
Shiftr.ioへのリンク
Slide 16
Slide 16 text
７．NoodlとNode-RED連携
～ハンズオン～
×
Slide 17
Slide 17 text
８．まとめ
・NoodlとNode-REDを利用すると、プログラムを書くことなく
開発できます。
・NoodlはUI作成が得意、Node-REDはサービス連携が得意。
・こんなことに利用できそう
- 自作ラジコンのコントローラー
- スマートリモコン
Slide 18
Slide 18 text
イベント情報
https://node-red.connpass.com/event/153172/
Slide 19
Slide 19 text
イベント情報
https://elv.connpass.com/event/154629/
Slide 20
Slide 20 text
イベント情報
Qiitaのアドベントカンレンダー参加者募集中！！
https://qiita.com/advent-calendar/2019/noodl
Slide 21
Slide 21 text
おまけ
・NoodlとNode-REDの入門本販売中！
・基本操作～連携について説明しています。
・受付に見本があります。
・イベント限定で定価￥1,000 → ￥800
・アドベントカレンダー参加確約で →
￥500
20% OFF！
50% OFF！
Slide 22
Slide 22 text
本日はご参加ありがとうございました！