「はじめてのNode-RED」出版記念イベント (https://node-red.connpass.com/event/67224/) のハンズオンで使用した資料です。

1. はじめてのNode-RED
Node-REDを体験してみよう！
https://node-red.connpass.com/event/67224/

2. Prologue
はじめに

3. 「はじめてのNode-RED」書籍発売！
• 有志でNode-REDを盛り上げていたら書籍出版できることに！
• Node-REDって結局何なの？
• Node-REDって、結局何ができるの？
• たくさんのアイディアが詰まった本ができあがりました 📚

4. アジェンダ
• 前編
• Node-RED キホンのキ
• Node-RED を体験してみよう！
• 後編
• 第５章『「Node-RED」を、より使いこなす』の紹介

5. Shall we play with Node-RED?
一緒に Node-RED で遊ぼう！

6. Put your hands up! 🙌
今日、ハンズオン参加する？
Node-RED 準備OK？
Windows or Mac?

7. Preparation
準備しよ！

8. Node-REDの入手方法あれこれ
npm install する
Electron 版を使う
Raspberry Pi を使う
今日はこちら！

9. デスクトップで使える
Electron版 Node-RED のインストール (1)
Connpassイベントページの下記から
connpass のイベントページ
数クリックで環境構築！
デスクトップアプリ版Node-REDを利用する
http://qiita.com/zuhito/items/bc06433afae8e65b508c

10. デスクトップで使える
Electron版 Node-RED のインストール (2)
Github の zuhito/electron-
node-red で、OSに合わせたイ
ンストーラをダウンロードし、
前述の記事に従ってインストー
ルします。

11. [Mac]初回起動の警告承認 (1)
• ダウンロード直後の起動は、
このような警告が出ます。

12. [Mac]初回起動の警告承認 (2)
• System Preferences >
Security & Privacy > General
タブを開く
• electron-node-red のブロッ
クを解除する
（Open Anyway）

13. 実際に手を動かすまでしばらくありますので、
その間にインストールを済ませてください 🙌

14. Self introduction
ユーザーグループの皆々さま、とわたし

15. Node-RED User Group Japan

16. 大平かづみ / Kazumi OHIRA
Microsoft MVP (Azure)
エクストリームデザイン株式会社
Infrastructure Automation Engineer
PHPer
(Former Embedded Development Engineer)

17. 前編

18. Node-RED キホンのキ
Essential of Node-RED

19. Node-RED を起動する
• さっそく、Node-RED を起動してみましょう！
起動！

20. 画面の説明 (1)

21. 画面の説明 (2)
パレット
ワークスペース
タブ
• 情報
• デバッグ
• ダッシュボード

22. 画面の説明 (3)
デプロイボタン
メニューボタン
メニュー

23. ノードの説明 (1)
データの入力を受けとる
ノード。待機させたり、タ
イミングを指定できたり。
入力ノード
• inject
• mqtt
• http
• tcp/udp
様々な処理を行うノード。
変換、追加・削除したり、
条件分岐したり。
機能ノード
• function
• template
• switch
• change
• csv
• base64
データを出力するノード。
出力ノード
• debug
• mqtt
• http response
• tcp/udp
• play audio

24. ノードの説明 (2)
端子（ポート）ボタン
（入力ノード）
ボタン
（出力ノード）

25. フローの説明 (1)
処理の流れ

26. フローの説明 (2)
{
data: {
temp: 20,
hum: 65
},
status: “ok”
}
データ
データの流れ

27. Node-REDを
体験してみよう！
Let’s try!

28. 「まっさらなキャンバスを」
ワークスペースを
追加するボタン

29. まっさらなワークスペース準備完了

30. 最初のフロー (1)

31. 最初のフロー (2)
片方のポートをク
リックして、ドラッ
グしてもう片方の
ポートの上ではなす

32. 最初のフロー (2)
デプロイ！

33. 最初のフロー、
デプロイできたか確認
デプロイできました

34. インジェクトすると、
デバッグ出力される確認
injectノード
のボタンをク
リック
デバッグウィンド
ウにタイムスタン
プが表示されまし
た！

35. ノードのプロパティを変えてみる
ダブルクリック
でプロパティが
開く
JSON に
変えてみる

36. injectノードのペイロード（JSON）
を編集する
クリックして、
JSON を編集する

37. デプロイ！
編集を「完了」し、
「デプロイ」しま
しょう

38. インジェクトすると、
JSONデータが出力される確認
デバッグウィンド
ウにJSONデータが
出力されました！
ポチッ

39. ダッシュボードが便利 🙌
Dashboard is so useful!

40. Node-RED ダッシュボード
• 簡単にリアルタイムで可視化
• メーター
• グラフ
• スライダー
• テキスト入力・出力
• カラーピッカー
• 本書でもピックアップ
• 5.3 Node-RED ダッシュボード
• 5.4「データベースを利用する」
• 5.5「worldmapノード」で地図表示
https://flows.nodered.org/node/node-red-dashboard

41. ダッシュボード関連の画面
ダッシュボード
タブ
ダッシュボード
設定ウィンドウパレットの
ダッシュボード

42. 空のダッシュボード
空のダッシュボード
ポチッ

43. ダッシュボードのサンプル

44. ダッシュボードを体験！
Try Node-RED dashboard!

45. ダッシュボードを使ってみよう
一緒にやってみましょ！

46. 作ってみるダッシュボード (1)

47. 作ってみるダッシュボード (2)

48. 後編

49. 第５章
「Node-RED」を使いこなす
Introduction of Part 5

50. 第５章目次
章 カテゴリ タイトル
5.1
外部API連携
LINE Messaging API につなぐ
5.2 Twitter で画像認識
5.3
ダッシュボード
Node-RED ダッシュボード
5.4 データベースを利用する
5.5 worldmap ノードを用いて地図を表示
5.6 web HTML表示と連携する
5.7
IoT・デバイス
Arduino を操作する
5.8 SensorTag からデータ取得して可視化
5.9
クラウド
Azure にデータを溜めて活用する
5.10 Bluemix で Node-RED のアプリを作る
5.11 AWS IoT を利用する

51. Epilogue
おわりに

52. Thank you
very much!

53. Enjoy
Node-RED!