20210527_TechStreet Node-RED エンジニア勉強会「Node-RED 基礎・ビジネス＆プライベート事例」の登壇資料です。
◆スライド内の素材は以下を使用させて頂いております。ありがとうございます！
・シルエットデザイン http://kage-design.com/ ・human pictogram 2.0 http://pictogram2.com ・ICOOON MONO http://icooon-mono.com/
TechStreet Node-RED エンジニア勉強会Node-RED 基礎・ビジネス＆プライベート事例ワンフットシーバス 田中正吾
View Slide
基礎編の進行予定自己紹介3 分基礎編（話す＆デモ）10 分
私の話はスライドを後ほど共有します。話す内容に注力いただいて大丈夫です！
田中正吾（たなかせいご）屋号：ワンフットシーバス2004年よりフリーランス。以後、FLASH制作を中心にインタラクティブコンテンツを主に行い現在に至る。最近ではWEBフロントエンドをベースにしながらも、情報とインターフェースが合わさるアプローチという視点でIoTやMixed Realityといった技術も取り入れながら活動しています。
田中正吾（たなかせいご）屋号：ワンフットシーバスhttps://twitter.com/1ft_seabasshttp://1ft-seabass.jp/・Microsoft MVP・IBM Champion・プロトアウトスタジオ 講師長・デジタルハリウッド大学大学院 非常勤講師
Node-RED ことはじめ
Node-REDhttps://nodered.jp/
IoTなど様々なAPI/Data連携をGUIで直感的に構築できるオープンソースソフトウェア
Node.js で出来ていてnpm でインストールして使えますsudo npm install -g --unsafe-perm node-red
手元のPCでもクラウドでもRaspberry Piのようなデバイスでも使えますこのあたりは Node.js / npm による導入のしやすさがプラスには働いています手元のPCIBM Cloud・Azure・さくらインターネットなど
日本語ドキュメントも翻訳されたものがたくさんにあって調べやすいQiita やブログなどにもいろいろと文献ありhttps://nodered.jp/docs/sudo npm install -g --unsafe-perm node-red
GUI の話GUI(Graphic User Interface)IoTなど様々なAPI/Data連携をGUIで直感的に構築できるオープンソースソフトウェア
Node-RED の画面手元のPCの場合 node-red コマンドで起動すると http://localhost:1880/ でブラウザで表示
大きく分けて3つのエリアがありますパレット・ワークスペース・サイドバーパレット ワークスペース サイドバー
パレット絵の具のようにノードという機能のかたまりが置かれています。パレットはインストール済みで利用可能なすべてのノードが含まれます。パレット
パレット標準でもこのような機能が揃っています。
このノードは様々な機能のノードがありflows という形で検索できインストールできますフロー検索 : https://flows.nodered.org/
Slack で検索した例いろいろなノードを世界中の開発者がつくっている！実際の公開先は npm。
ワークスペースワークスペースはパレットからノードを配置してフロー（データの流れ）を作るエリアワークスペース
サイドバーサイドバーは、エディタ内に多くの便利なツールを提供するエリアです。サイドバー
ノードはNode-REDの基本的な構成要素です。処理をする機能のかたまりです。ノード
ノードをつないでフローというデータの流れを作りますノードノード ノード
前のノードからメッセージを受け取るか、外部イベントを受け取ることで動きますノードはメッセージまたはイベントを処理し次のノードにメッセージを送り、右から左に処理されます。ノードノード ノードメッセージ(JSONデータ)メッセージ(JSONデータ)処理0_0 処理外部イベントなどデータのきっかけ起きた！
メッセージはJSONデータで構成されます。各ノードで処理された内容がバケツリレーのようにやり取りされていきます。ノードノードメッセージ(JSONデータ)処理 処理
メッセージの中身msg という一番上のオブジェクトがあり、配下の payload というオブジェクトが連絡に良く使われます。ノードノードメッセージ(JSONデータ)処理 処理msgpayload様々なデータ様々なデータ
こんな感じのバケツリレーノードノード処理
デモしてみます！
inject ノードと debug ノードをつなぐデモ
このような仕組みタイムスタンプメッセージ(JSONデータ)デバッグデータを表示する処理ボタンクリックをきっかけにメッセージを送る
デバッグタブに文字が出るデモしてみます！
API連携の話API(Application Programming Interface)IoTなど様々なAPI/Data連携をGUIで直感的に構築できるオープンソースソフトウェア
パレットにはじめから多彩な接続ノードがありますIoTで良く使われる MQTT や WEB まわりで使われる HTTP / WebSocket など揃えています
API は HTTP でつなぐことが多いですがNode-RED にも HTTP 関連ノードありますAPIサーバーNode-RED
HTTP の関連ノード
柴犬画像 API から画像を表示するデモhttps://shibe.online/
私のブログにも記事があるのでご参考くださいhttps://www.1ft-seabass.jp/memo/2020/09/04/nodered-connect-shibainu/
ことはじめ、お伝えしました
➔ ノードがなければ自作することもできます➔ ほかにも色々あるAPI（public-apisを軸に）➔ Node-RED の開発は今も活発エクストラ時間があれば
Node-RED は色々なものをつなぐツール
ビジネス事例編(10 分)
ビジネス事例
Node-RED Con Tokyo 2020 を例に最近の事例をお伝えしたいhttps://nodered.jp/noderedcon2020/
資料も公開されていますhttps://node-red.connpass.com/event/179198/presentation/
CO2センサーのデータを取得し可視化します最近の事情でニーズが高まっている事例 CO2 濃度で空間の換気タイミングを把握できる
MQTT でセンサー値を Node-RED が受け取ってダッシュボード機能で可視化しますMQTTM5Stack + CO2センサーNode-RED
このような仕組みMQTTでデータを受け取ってグラフやゲージのダッシュボードにデータをおくっている
それではやってみます！
このように小さく作って仕組みを発展したり可視化や通知を検討していきますたとえば、メールやLINEなどに通知を送って自動化して人の手間を減らすことは最近大事なこと
➔ 話せる範囲で私の活用事例◆ VR(HoloLens) 連携◆ データ分析をするためのツール➔ ペアプログラミングも良いという話エクストラ時間があれば
ビジネス事例、お伝えしました
プライベート事例(10 分)
プライベート事例
ビジネスだけでなくプライベートでも使いどころがあります
ウォンバットが好きなんですが日々、情報収集していますこれは茶臼山動物園のモモコちゃん。人懐こい珍しいウォンバットでかわいい。
IFTTTを利用しTwitterから #wombat 情報を集めて Node-REDで Discord チャットに通知これでウォンバット界の盛り上がりが察知しやすくなったし、何より見るのが楽しい
Node-RED はこんなフロー
IFTTT から受信する URL を作る
AirTableというデータベースサービスのノードで以前の記事を記録しつつ以後の重複チェック
すでに記録済みなら Discord 投稿しない新規なら Discord 投稿する
つづいてファミリーテック
1歳息子の寝姿をこっそり見る仕組みの事例ベビーベッド上からインターネットカメラで撮影しています
息子の動きを検知して自動撮影してLINE BOTに通知
LINE BOT に画像を求めると今の寝姿を撮影してきてくれたり
操作の様子をお見せします夜の寝姿を撮影するデモを軽めにお見せします
仕組みの話
今回使っているインターネットカメラここに設置しています
IODATA Qwatch というインターネットカメラ見守りカメラQwatch TS-NS110W
無線で軽量。設置しやすい。3M スリーエム コマンド タブ Mサイズ でガッツリ留めれる
なかなか良い画質
暗視モードもあって部屋の明るさで自動切換してくれるつまり暗闇で起きていることもこっそりと気づける
公式にAPIが公開されており静止画撮影も反応早く撮影できるhttps://www.iodata.jp/product/lancam/api/index.htm
外の Node-RED と家の中の Node-RED が活躍LINE BOT を受け付けるのは Azure に作った Node-RED で家の中の Node-RED がカメラとのやりとり（画像取得）を行っているAzure VMNode-REDRaspberry PiNode-REDMQTT HTTPHTTPHTTP
家だけで画像が見れる仕組みNode-RED が 10 秒ごとインターネットカメラから取得してストックしている。シンプルな仕組み。Raspberry PiNode-REDHTTP
このようなフロー
画像くださいって言って取ってくる仕組みここをデモします！
画像くださいって言って取ってくる仕組みMQTT によって「画像ください」というお願いを家の中の Node-RED に届ける。カメラから画像を取得したら HTTP で Base64 文字列で戻して LINE BOT が応答している。MQTT HTTPHTTPBase64文字列
10秒ごとの更新画像があるので外からお願いされたら中から応答する
家族のフィードバックの話を
泣き声が聞こえたときに部屋の外からもう起きるかまだ寝るかを見れる暗視もあるので昼夜ばっちり。これが一番利用してくれていると思う！うれしい！静かに起きてすぐ寝ちゃうとか分かってかわいすぎる。寝なそうな挙動も分かる。
外でも状況が見れるのはよいどちらかひとりが買い物など行っているときに状況が分かるのは情報共有として良い。かわいい寝姿を気づかれずに撮影できるのもよい（スマホだと撮る気配やシャッター音で起きる場合もある）
頑張っている割にはイマイチ！感度調整が難しく誤判定もあり過剰に通知されちゃったりしてなかなか難しい。LINE Notify でメッセージはするけど通知しないパラメータ notificationDisabled をオンにしてる。
標準の検知機能の相性が悪ければ前後の画像比較を独自に実装したほうがいいかももう画像はキャッシュしているしうまく適用できればイケそうな気もする。楽しそうだし勉強にもなりそう。
このツールで家族と新しい側面のコミュニケーションができてとても楽しいテクノロジーと開発で生活に新しい側面を生まれる
ほしい機能を手軽に追加できてすぐに試すことができるつくろうとするパワーをつくるだけで疲れることなく、次のほしい機能や現状を見つめ直すことに当てれる！
余裕があればウォンバットテックもうひとつ
自分のウォンバット収集 Tumblr のデータをTumblr APIで取得してまとめなおすhttps://wombat10.tumblr.com/
こんなフロー
前半は Tumblr API で最新 20 件を取得
Tumblr API の様子https://www.tumblr.com/docs/en/api/v2#posts--retrieve-published-posts
後半は split で1件ごとに分解しつつAirTable API にAPIに優しくデータを送ってますsplit はプログラムで for したほうが分かりやすいときはあるが便利。limit の流量制限は自分で組むと結構苦労するのでありがたい！
では、動かしてみます！
こんな風にデータが貯まりましたこれでデータを分析ができて今後にも活用できる！
本番だと20件ごとにどんどん取得していく2011/7 から現在まで約1日1投稿なので 4600 件ものウォンバット画像があるので取得しがいがあります！
Node-REDはGUIのおかげで見て思い出せるので週1とか月1とか期間が空いても継続開発しやすいGUI で見てわかるのいいところ。未来の自分にも伝わりやすく、他の人にも理解しやすいのはメリット。
プライベート事例、お伝えしました
➔ IoTなど様々なAPI/Data連携をGUIで直感的につくれる。開発も活発！➔ ビジネスでの利用シーンも増えていて大きな企業の採用事例もある。➔ 見て理解しやすくアイデアをすぐに形にして作り続けることに寄りそってくれる。Node-RED まとめ
1ftseabass
etaroid
sajikix
yoshidashingo
asei
hokaccha
lemiorhan
knsg16
you
peisuke
bengo4com
bun913
rilmayer
philhawksworth
jponch
holman
marcduiker
rocio
sstephenson
trallard
geeforr
jonyablonski
afnizarnur
morganepeng