20210527_TechStreet Node-RED

by 1ft-seabass

Slide 1

Slide 1 text

TechStreet Node-RED エンジニア勉強会 Node-RED 基礎・ビジネス＆プライベート事例ワンフットシーバス田中正吾

Slide 2

Slide 2 text

基礎編の進行予定自己紹介 3 分基礎編（話す＆デモ） 10 分

Slide 3

Slide 3 text

私の話はスライドを後ほど共有します。話す内容に注力いただいて大丈夫です！

Slide 4

Slide 4 text

田中正吾（たなかせいご）屋号：ワンフットシーバス 2004年よりフリーランス。以後、FLASH制作を中心にインタラクティブコンテンツを主に行い現在に至る。最近ではWEBフロントエンドをベースにしながらも、情報とインターフェースが合わさるアプローチという視点でIoTやMixed Realityといった技術も取り入れながら活動しています。

Slide 5

Slide 5 text

田中正吾（たなかせいご）屋号：ワンフットシーバス https://twitter.com/1ft_seabass http://1ft-seabass.jp/ ・Microsoft MVP ・IBM Champion ・プロトアウトスタジオ講師長・デジタルハリウッド大学大学院非常勤講師

Slide 6

Slide 6 text

Node-RED ことはじめ

Slide 7

Slide 7 text

Node-RED https://nodered.jp/

Slide 8

Slide 8 text

IoTなど様々なAPI/Data連携をGUIで直感的に構築できるオープンソースソフトウェア

Slide 9

Slide 9 text

Node.js で出来ていて npm でインストールして使えます sudo npm install -g --unsafe-perm node-red

Slide 10

Slide 10 text

手元のPCでもクラウドでも Raspberry Piのようなデバイスでも使えますこのあたりは Node.js / npm による導入のしやすさがプラスには働いています手元のPC IBM Cloud・Azure・さくらインターネットなど

Slide 11

Slide 11 text

日本語ドキュメントも翻訳されたものがたくさんにあって調べやすい Qiita やブログなどにもいろいろと文献あり https://nodered.jp/docs/ sudo npm install -g --unsafe-perm node-red

Slide 12

Slide 12 text

GUI の話 GUI(Graphic User Interface) IoTなど様々なAPI/Data連携をGUIで直感的に構築できるオープンソースソフトウェア

Slide 13

Slide 13 text

Node-RED の画面手元のPCの場合 node-red コマンドで起動すると http://localhost:1880/ でブラウザで表示

Slide 14

Slide 14 text

大きく分けて3つのエリアがありますパレット・ワークスペース・サイドバーパレットワークスペースサイドバー

Slide 15

Slide 15 text

パレット絵の具のようにノードという機能のかたまりが置かれています。パレットはインストール済みで利用可能なすべてのノードが含まれます。パレット

Slide 16

Slide 16 text

パレット標準でもこのような機能が揃っています。

Slide 17

Slide 17 text

このノードは様々な機能のノードがあり ﬂows という形で検索できインストールできますフロー検索 : https://ﬂows.nodered.org/

Slide 18

Slide 18 text

Slack で検索した例いろいろなノードを世界中の開発者がつくっている！実際の公開先は npm。

Slide 19

Slide 19 text

ワークスペースワークスペースはパレットからノードを配置してフロー（データの流れ）を作るエリアワークスペース

Slide 20

Slide 20 text

サイドバーサイドバーは、エディタ内に多くの便利なツールを提供するエリアです。サイドバー

Slide 21

Slide 21 text

ノードはNode-REDの基本的な構成要素です。処理をする機能のかたまりです。ノード

Slide 22

Slide 22 text

ノードをつないでフローというデータの流れを作りますノードノードノード

Slide 23

Slide 23 text

前のノードからメッセージを受け取るか、外部イベントを受け取ることで動きますノードはメッセージまたはイベントを処理し次のノードにメッセージを送り、右から左に処理されます。ノードノードノードメッセージ (JSONデータ) メッセージ (JSONデータ) 処理 0_0 処理外部イベントなどデータのきっかけ起きた！

Slide 24

Slide 24 text

メッセージはJSONデータで構成されます。各ノードで処理された内容がバケツリレーのようにやり取りされていきます。ノードノードメッセージ (JSONデータ) 処理処理

Slide 25

Slide 25 text

メッセージの中身 msg という一番上のオブジェクトがあり、配下の payload というオブジェクトが連絡に良く使われます。ノードノードメッセージ (JSONデータ) 処理処理 msg payload 様々なデータ様々なデータ

Slide 26

Slide 26 text

こんな感じのバケツリレーノードノード処理

Slide 27

Slide 27 text

デモしてみます！

Slide 28

Slide 28 text

inject ノードと debug ノードをつなぐデモ

Slide 29

Slide 29 text

このような仕組みタイムスタンプメッセージ (JSONデータ) デバッグデータを表示する処理ボタンクリックをきっかけにメッセージを送る

Slide 30

Slide 30 text

デバッグタブに文字が出るデモしてみます！

Slide 31

Slide 31 text

API連携の話 API(Application Programming Interface) IoTなど様々なAPI/Data連携をGUIで直感的に構築できるオープンソースソフトウェア

Slide 32

Slide 32 text

パレットにはじめから多彩な接続ノードがあります IoTで良く使われる MQTT や WEB まわりで使われる HTTP / WebSocket など揃えています

Slide 33

Slide 33 text

API は HTTP でつなぐことが多いですが Node-RED にも HTTP 関連ノードあります API サーバー Node-RED

Slide 34

Slide 34 text

HTTP の関連ノード

Slide 35

Slide 35 text

デモしてみます！

Slide 36

Slide 36 text

柴犬画像 API から画像を表示するデモ https://shibe.online/

Slide 37

Slide 37 text

私のブログにも記事があるのでご参考ください https://www.1ft-seabass.jp/memo/2020/09/04/nodered-connect-shibainu/

Slide 38

Slide 38 text

ことはじめ、お伝えしました

Slide 39

Slide 39 text

➔ ノードがなければ自作することもできます ➔ ほかにも色々あるAPI（public-apisを軸に） ➔ Node-RED の開発は今も活発エクストラ時間があれば

Slide 40

Slide 40 text

IoTなど様々なAPI/Data連携をGUIで直感的に構築できるオープンソースソフトウェア

Slide 41

Slide 41 text

Node-RED は色々なものをつなぐツール

Slide 42

Slide 42 text

ビジネス事例編 (10 分)

Slide 43

Slide 43 text

ビジネス事例

Slide 44

Slide 44 text

Node-RED Con Tokyo 2020 を例に最近の事例をお伝えしたい https://nodered.jp/noderedcon2020/

Slide 45

Slide 45 text

資料も公開されています https://node-red.connpass.com/event/179198/presentation/

Slide 46

Slide 46 text

デモしてみます！

Slide 47

Slide 47 text

CO2センサーのデータを取得し可視化します最近の事情でニーズが高まっている事例 CO2 濃度で空間の換気タイミングを把握できる

Slide 48

Slide 48 text

MQTT でセンサー値を Node-RED が受け取ってダッシュボード機能で可視化します MQTT M5Stack + CO2センサー Node-RED

Slide 49

Slide 49 text

このような仕組み MQTTでデータを受け取ってグラフやゲージのダッシュボードにデータをおくっている

Slide 50

Slide 50 text

それではやってみます！

Slide 51

Slide 51 text

このように小さく作って仕組みを発展したり可視化や通知を検討していきますたとえば、メールやLINEなどに通知を送って自動化して人の手間を減らすことは最近大事なこと

Slide 52

Slide 52 text

➔ 話せる範囲で私の活用事例 ◆ VR(HoloLens) 連携 ◆ データ分析をするためのツール ➔ ペアプログラミングも良いという話エクストラ時間があれば

Slide 53

Slide 53 text

ビジネス事例、お伝えしました

Slide 54

Slide 54 text

プライベート事例 (10 分)

Slide 55

Slide 55 text

プライベート事例

Slide 56

Slide 56 text

ビジネスだけでなくプライベートでも使いどころがあります

Slide 57

Slide 57 text

ウォンバットが好きなんですが日々、情報収集していますこれは茶臼山動物園のモモコちゃん。人懐こい珍しいウォンバットでかわいい。

Slide 58

Slide 58 text

IFTTTを利用しTwitterから #wombat 情報を集めて Node-REDで Discord チャットに通知これでウォンバット界の盛り上がりが察知しやすくなったし、何より見るのが楽しい

Slide 59

Slide 59 text

Node-RED はこんなフロー

Slide 60

Slide 60 text

IFTTT から受信する URL を作る

Slide 61

Slide 61 text

AirTableというデータベースサービスのノードで以前の記事を記録しつつ以後の重複チェック

Slide 62

Slide 62 text

すでに記録済みなら Discord 投稿しない新規なら Discord 投稿する

Slide 63

Slide 63 text

つづいてファミリーテック

Slide 64

Slide 64 text

デモしてみます！

Slide 65

Slide 65 text

1歳息子の寝姿をこっそり見る仕組みの事例ベビーベッド上からインターネットカメラで撮影しています

Slide 66

Slide 66 text

息子の動きを検知して自動撮影して LINE BOTに通知

Slide 67

Slide 67 text

LINE BOT に画像を求めると今の寝姿を撮影してきてくれたり

Slide 68

Slide 68 text

操作の様子をお見せします夜の寝姿を撮影するデモを軽めにお見せします

Slide 69

Slide 69 text

仕組みの話

Slide 70

Slide 70 text

今回使っているインターネットカメラここに設置しています

Slide 71

Slide 71 text

IODATA Qwatch というインターネットカメラ見守りカメラ Qwatch TS-NS110W

Slide 72

Slide 72 text

無線で軽量。設置しやすい。 3M スリーエムコマンドタブ Mサイズでガッツリ留めれる

Slide 73

Slide 73 text

なかなか良い画質

Slide 74

Slide 74 text

暗視モードもあって部屋の明るさで自動切換してくれるつまり暗闇で起きていることもこっそりと気づける

Slide 75

Slide 75 text

公式にAPIが公開されており静止画撮影も反応早く撮影できる https://www.iodata.jp/product/lancam/api/index.htm

Slide 76

Slide 76 text

外の Node-RED と家の中の Node-RED が活躍 LINE BOT を受け付けるのは Azure に作った Node-RED で家の中の Node-RED がカメラとのやりとり（画像取得）を行っている Azure VM Node-RED Raspberry Pi Node-RED MQTT HTTP HTTP HTTP

Slide 77

Slide 77 text

家だけで画像が見れる仕組み Node-RED が 10 秒ごとインターネットカメラから取得してストックしている。シンプルな仕組み。 Raspberry Pi Node-RED HTTP

Slide 78

Slide 78 text

このようなフロー

Slide 79

Slide 79 text

画像くださいって言って取ってくる仕組みここをデモします！

Slide 80

Slide 80 text

画像くださいって言って取ってくる仕組み MQTT によって「画像ください」というお願いを家の中の Node-RED に届ける。カメラから画像を取得したら HTTP で Base64 文字列で戻して LINE BOT が応答している。 MQTT HTTP HTTP Base64 文字列

Slide 81

Slide 81 text

10秒ごとの更新画像があるので外からお願いされたら中から応答する

Slide 82

Slide 82 text

家族のフィードバックの話を

Slide 83

Slide 83 text

泣き声が聞こえたときに部屋の外からもう起きるかまだ寝るかを見れる暗視もあるので昼夜ばっちり。これが一番利用してくれていると思う！うれしい！静かに起きてすぐ寝ちゃうとか分かってかわいすぎる。寝なそうな挙動も分かる。

Slide 84

Slide 84 text

外でも状況が見れるのはよいどちらかひとりが買い物など行っているときに状況が分かるのは情報共有として良い。かわいい寝姿を気づかれずに撮影できるのもよい（スマホだと撮る気配やシャッター音で起きる場合もある）

Slide 85

Slide 85 text

頑張っている割にはイマイチ！感度調整が難しく誤判定もあり過剰に通知されちゃったりしてなかなか難しい。 LINE Notify でメッセージはするけど通知しないパラメータ notiﬁcationDisabled をオンにしてる。

Slide 86

Slide 86 text

標準の検知機能の相性が悪ければ前後の画像比較を独自に実装したほうがいいかももう画像はキャッシュしているしうまく適用できればイケそうな気もする。楽しそうだし勉強にもなりそう。

Slide 87

Slide 87 text

このツールで家族と新しい側面のコミュニケーションができてとても楽しいテクノロジーと開発で生活に新しい側面を生まれる

Slide 88

Slide 88 text

ほしい機能を手軽に追加できてすぐに試すことができるつくろうとするパワーをつくるだけで疲れることなく、次のほしい機能や現状を見つめ直すことに当てれる！

Slide 89

Slide 89 text

余裕があればウォンバットテックもうひとつ

Slide 90

Slide 90 text

デモしてみます！

Slide 91

Slide 91 text

自分のウォンバット収集 Tumblr のデータを Tumblr APIで取得してまとめなおす https://wombat10.tumblr.com/

Slide 92

Slide 92 text

こんなフロー

Slide 93

Slide 93 text

前半は Tumblr API で最新 20 件を取得

Slide 94

Slide 94 text

Tumblr API の様子 https://www.tumblr.com/docs/en/api/v2#posts--retrieve-published-posts

Slide 95

Slide 95 text

後半は split で1件ごとに分解しつつ AirTable API にAPIに優しくデータを送ってます split はプログラムで for したほうが分かりやすいときはあるが便利。 limit の流量制限は自分で組むと結構苦労するのでありがたい！

Slide 96

Slide 96 text

では、動かしてみます！

Slide 97

Slide 97 text

こんな風にデータが貯まりましたこれでデータを分析ができて今後にも活用できる！

Slide 98

Slide 98 text

本番だと20件ごとにどんどん取得していく 2011/7 から現在まで約1日1投稿なので 4600 件ものウォンバット画像があるので取得しがいがあります！

Slide 99

Slide 99 text

Node-REDはGUIのおかげで見て思い出せるので週1とか月1とか期間が空いても継続開発しやすい GUI で見てわかるのいいところ。未来の自分にも伝わりやすく、他の人にも理解しやすいのはメリット。

Slide 100

Slide 100 text

プライベート事例、お伝えしました

Slide 101

Slide 101 text

➔ IoTなど様々なAPI/Data連携をGUIで直感的につくれる。開発も活発！ ➔ ビジネスでの利用シーンも増えていて大きな企業の採用事例もある。 ➔ 見て理解しやすくアイデアをすぐに形にして作り続けることに寄りそってくれる。 Node-RED まとめ

Slide 102

Slide 102 text

Node-RED は色々なものをつなぐツール