Save 37% off PRO during our Black Friday Sale! »

20210527_TechStreet Node-RED

20210527_TechStreet Node-RED

20210527_TechStreet Node-RED エンジニア勉強会「Node-RED 基礎・ビジネス&プライベート事例」の登壇資料です。

◆スライド内の素材は以下を使用させて頂いております。ありがとうございます!

・シルエットデザイン http://kage-design.com/
・human pictogram 2.0 http://pictogram2.com
・ICOOON MONO http://icooon-mono.com/

Fecdd3417cd7375cc0bd0352d72db27e?s=128

1ft-seabass
PRO

May 27, 2021
Tweet

Transcript

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

  2. 基礎編の進行予定 自己紹介 3 分 基礎編(話す&デモ) 10 分

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

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

  5. 田中正吾(たなかせいご) 屋号:ワンフットシーバス https://twitter.com/1ft_seabass http://1ft-seabass.jp/ ・Microsoft MVP ・IBM Champion ・プロトアウトスタジオ 講師長

    ・デジタルハリウッド大学大学院 非常勤講師
  6. Node-RED ことはじめ

  7. Node-RED https://nodered.jp/

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

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

  10. 手元のPCでもクラウドでも Raspberry Piのようなデバイスでも使えます このあたりは Node.js / npm による導入のしやすさがプラスには働いています 手元のPC IBM

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

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

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

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

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

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

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

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

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

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

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

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

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

    処理 0_0 処理 外部イベントなど データのきっかけ 起きた!
  24. メッセージはJSONデータで構成されます。 各ノードで処理された内容がバケツリレーのようにやり取りされていきます。 ノード ノード メッセージ (JSONデータ) 処理 処理

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

    処理 処理 msg payload 様々なデータ 様々なデータ
  26. こんな感じのバケツリレー ノード ノード 処理

  27. デモしてみます!

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

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

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

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

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

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

    Node-RED
  34. HTTP の関連ノード

  35. デモしてみます!

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

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

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

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

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

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

  42. ビジネス事例編 (10 分)

  43. ビジネス事例

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

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

  46. デモしてみます!

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

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

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

  50. それではやってみます!

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

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

    時間があれば
  53. ビジネス事例、お伝えしました

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

  55. プライベート事例

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

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

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

  59. Node-RED はこんなフロー

  60. IFTTT から受信する URL を作る

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

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

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

  64. デモしてみます!

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

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

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

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

  69. 仕組みの話

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

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

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

  73. なかなか良い画質

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

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

  76. 外の Node-RED と家の中の Node-RED が活躍 LINE BOT を受け付けるのは Azure に作った

    Node-RED で 家の中の Node-RED がカメラとのやりとり(画像取得)を行っている Azure VM Node-RED Raspberry Pi Node-RED MQTT HTTP HTTP HTTP
  77. 家だけで画像が見れる仕組み Node-RED が 10 秒ごとインターネットカメラから取得してストックしている。シンプルな仕組み。 Raspberry Pi Node-RED HTTP

  78. このようなフロー

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

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

    LINE BOT が応答している。 MQTT HTTP HTTP Base64 文字列
  81. 10秒ごとの更新画像があるので 外からお願いされたら中から応答する

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

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

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

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

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

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

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

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

  90. デモしてみます!

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

  92. こんなフロー

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

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

  95. 後半は split で1件ごとに分解しつつ AirTable API にAPIに優しくデータを送ってます split はプログラムで for したほうが分かりやすいときはあるが便利。

    limit の流量制限は自分で組むと結構苦労するのでありがたい!
  96. では、動かしてみます!

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

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

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

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

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

    まとめ
  102. Node-RED は色々なものをつなぐツール