20210527_TechStreet Node-RED
by
1ft-seabass
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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
このノードは様々な機能のノードがあり flows という形で検索できインストールできます フロー検索 : https://flows.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 でメッセージはするけど通知しないパラメータ notificationDisabled をオンにしてる。
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 は色々なものをつなぐツール