The Code Challenger vol.0

The Code Challenger vol.0「田中正吾 Showcase」の登壇資料です。

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

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

Transcript

1. 20220822_ジーズテックワークショップ vol.0 田中正吾 Showcase ～Node-RED で色々つないで発想が広がるあれこれ～ ワンフットシーバス 田中正吾
2. 私の話はスライドを後ほど共有します。 話す内容に注力いただいて大丈夫です！
3. 田中正吾（たなかせいご） 屋号：ワンフットシーバス 2004年よりフリーランス。以後、FLASH制作を 中心にインタラクティブコンテンツを主に行い現 在に至る。 最近ではWEBフロントエンドをベースにしなが らも、情報とインターフェースが合わさるアプ ローチという視点でIoTやMixed Realityといった 技術も取り入れながら活動しています。
4. 今日の流れ（50 分） • Node-RED について • Node-RED を柴犬 API をつなげるデモ • Node-RED を CO2 センサーにつなげるデモ • Node-RED がつくりつづけるために良いポイント • Node-RED を ヘルスケアデバイスにつなげるデモ • Node-RED を VR とつないでリアルタイム翻訳するデモ • （時間があれば）イベント情報 • （時間があれば）質疑応答 • （時間があれば）他に何かデモ
5. Node-RED https://nodered.jp/
6. IoTなど様々なAPI/Data連携をGUIで 直感的に構築できるオープンソースソフトウェア
7. Node.js で出来ていて npm でインストールして使えます sudo npm install -g --unsafe-perm node-red
8. 手元のPCでもクラウドでも Raspberry Piのようなデバイスでも使えます このあたりは Node.js / npm による導入のしやすさがプラスには働いています 手元のPC IBM Cloud・Azure・ さくらインターネットなど
9. 日本語ドキュメントも翻訳されたものが たくさんにあって調べやすい Qiita やブログなどにもいろいろと文献あり https://nodered.jp/docs/ sudo npm install -g --unsafe-perm node-red
10. GUI の話 GUI(Graphic User Interface) IoTなど様々なAPI/Data連携をGUIで 直感的に構築できるオープンソースソフトウェア
11. Node-RED の画面 手元のPCの場合 node-red コマンドで起動すると http://localhost:1880/ でブラウザで表示
12. 大きく分けて3つのエリアがあります パレット・ワークスペース・サイドバー パレット ワークスペース サイドバー
13. パレット 絵の具のようにノードという機能のかたまりが置かれています。 パレットはインストール済みで利用可能なすべてのノードが含まれます。 パレット
14. パレット 標準でもこのような機能が揃っています。
15. このノードは様々な機能のノードがあり flows という形で検索できインストールできます フロー検索 : https://flows.nodered.org/
16. Slack で検索した例 いろいろなノードを世界中の開発者がつくっている！実際の公開先は npm。
17. ワークスペース ワークスペースはパレットからノードを配置してフロー（データの流れ）を作るエリア ワークスペース
18. サイドバー サイドバーは、エディタ内に多くの便利なツールを提供するエリアです。 サイドバー
19. ノードはNode-REDの基本的な構成要素です。 処理をする機能のかたまりです。 ノード
20. ノードをつないでフローという データの流れを作ります ノード ノード ノード
21. 前のノードからメッセージを受け取るか、 外部イベントを受け取ることで動きます ノードはメッセージまたはイベントを処理し次のノードにメッセージを送り、右から左に処理されます。 ノード ノード ノード メッセージ (JSONデータ) メッセージ (JSONデータ) 処理 0_0 処理 外部イベントなど データのきっかけ 起きた！
22. メッセージはJSONデータで構成されます。 各ノードで処理された内容がバケツリレーのようにやり取りされていきます。 ノード ノード メッセージ (JSONデータ) 処理 処理
23. メッセージの中身 msg という一番上のオブジェクトがあり、 配下の payload というオブジェクトが連絡に良く使われます。 ノード ノード メッセージ (JSONデータ) 処理 処理 msg payload 様々なデータ 様々なデータ
24. こんな感じのバケツリレー ノード ノード 処理
25. このような特徴から技術同士をつなげやすい 目で見て分かりやすい UI で、つなぐパーツが揃っていて、自分なりにポチポチつないでいけます。 A B
26. Node-RED は技術や発想をうまくつなげる接着剤 これから、よくつながるっぷりをリアルタイムデモしていきます！
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. HTTP 経由で obniz を動かします obniz Node-RED
39. obniz のテープ LEDを動かすデモから obniz クラウドへ HTTP で指示して動かします
40. obniz https://www.switch-science.com/catalog/3838/
41. このような仕組み 外部サーバ Node-RED obniz HTTPで点灯指示
42. obniz には obniz クラウドというものがあり メッセージング機能で外部から HTTP で指示できる メッセージング - obniz Docs https://obniz.com/ja/doc/reference/common/messaging
43. obniz クラウドでメッセージ受信後ふくめた 処理を JavaScript でつくってデバイス設定
44. Node-RED はこのようなフロー
45. 動かしてみます！
46. M5Stack にとりつけた CO2 センサーの値を Node-RED ダッシュボードで可視化します これはむちゃくちゃ換気した部屋で観測
47. CO2 濃度の目安 換気の目安になる「CO2濃度」を見える化 | IODATA アイ・オー・データ機器 https://www.iodata.jp/news/2021/newprod/ud-co2s.htm
48. Node-RED このような仕組み M5Stack + CO2センサー センサー値を送受信 CloudMQTT 外部 MQTT ブローカ ダッシュボード グラフ表示
49. M5Stack に Arduino IDE からセンサー値取得と MQTT へのデータ定期送信を設定
50. Node-RED はこのようなフロー
51. こちらに配置したダッシュボードノードも URL(/ui)が発行されリアルタイムに動きます
52. CO2 データ共有コンテンツ この QR コードから見ることができます！ https://bit.ly/3T3gd7q （ここで10秒くらい待って、参加者のみなさんが撮影しやすいようにする）
53. 動かしてみます！
54. つくりつづけるときの大切なポイント 今回はプロトタイピングと発想の側面を中心に
55. いろいろと技術をつないで発想を広げるのが大事 アイデアとは今まであるものの組み合わせ A B
56. AとBをつなぐときは大変になりがち 技術単体のナレッジよりも少なくなるし、やってるひととも少ない、つなぐプログラムにする工程も必要 A B (>_<)
57. つなぐ大変さは技術が増えると積み重なる A + B ならまだいいが、A + B + C + D ... と増えるとレア度が高くなる （もちろん自分なりに突き進んでる感じで楽しいですけど！） A B (>_<) C (>_<) (>_<)
58. つなぐ部分をより気楽に試すために Node-RED のようなツールでフォローしてます 「すぐやれるぞ」という気持ちと実績は、発想を止めずに軽やかにとりかかれる A B (^o^)
59. そうするとより多くの組み合わせやアイデアを つくりつづけて試すことができる A B (^o^) C (^o^) (^o^)
60. つくりつづけるために地道に消耗を見直して 短距離走だけでなく持久走もできるようにする
61. 指輪ヘルスケアデバイス OuraRing 連携 Node-RED OuraRing
62. 指輪ヘルスケアデバイス OuraRing
63. 指につけるデバイスで色々なセンサーで 健康状態を常にチェックしてくれる スマホアプリでBluetooth でデータ取得し体調・睡眠時間・アクティビティ・心拍数などクラウド分析 https://play.google.com/store/apps/details?id=com.ouraring.oura
64. 自分でも API 経由でデータ取得可能 これを Node-RED につなぐ
65. このような仕組み Node-RED OuraRing API 私の OuraRing OuraRing スマホアプリで Bluetooth 経由で手動取得
66. Node-RED はこのようなフロー
67. ダッシュボードで 最新のデータが見えるようにします
68. OuraRing 心拍数コンテンツ この QR コードから見ることができます！ https://bit.ly/3A2pSCq （ここで10秒くらい待って、参加者のみなさんが撮影しやすいようにする）
69. 動かしてみます！
70. VR デバイスとの連携 Node-RED
71. HoloLens 2 で音声認識を使った DeepL経由リアルタイム翻訳つくりました
72. HoloLens 2 https://www.microsoft.com/ja-jp/hololens/hardware
73. HoloLens 2 には音声認識機能があり トークを日本語テキストに変換できます 音声認識機能 （インターネット経由） 音声データ マイク入力 テキスト 空間に テキスト表示
74. もちろん Unity C# で HoloLens 2 アプリを つくる必要はあり、がんばりました つくる経緯の話は置いておきます（まず連携をお見せしたい） Unity
75. シンプルな音声認識の様子 OSの言語設定を日本語にして Dictation イベントを取得して空間に表示させます
76. 音声認識した日本語を DeepL の翻訳 API を通して 英語に翻訳して表示しています 日本語 音声認識 （インターネット経由） 英語 自前 Node-RED DeepL API
77. Node-RED はこのようなフロー HoloLens 2 から来た音声認識テキストを DeepL API に http request ノードでつないで 返ってきた結果をシンプルに HoloLens 2 に返答する仕組み
78. HoloLens 2 に翻訳後に HTTP で返答する部分
79. M5Stack にも翻訳済みテキストを 表示するようにもしています
80. ダッシュボード にも翻訳済みテキストを 表示するようにしています
81. HoloLens 2 翻訳テキストコンテンツ この QR コードから見ることができます！ https://bit.ly/3CtQJKi （ここで10秒くらい待って、参加者のみなさんが撮影しやすいようにする）
82. 動かしてみます！
83. 昨今の不確実性にうまくノッていく術でもある いまは「この道を行けばいい」というものは少なく、変化し続けてリアルタイムに対応したほうがいい
84. 何回もリングに上がり試すことが大切 完璧・万全を尽くすぎて疲れ切る1回より、まずつくってみて結果を得て次を試してみる
85. Node-RED イベント情報 オンラインで気軽に参加できます！
86. ビジュアルプログラミングIoTLT vol.12 https://iotlt.connpass.com/event/256929/ 田中が司会です。Node-RED 含めいろいろなビジュアルプログラミングが出てくる気軽に聞けます！
87. Node-RED Park Vol.7 Dashboard 機能を極める会。今日見せた Node-RED ダッシュボード特化のイベント。深くて楽しい。 https://enebular.connpass.com/event/254733/
88. [ 新企画！] Node-RED Flow 大喜利 あらかじめ出題される Node-RED Flow のお題に対して自分なりのフローを披露するイベント。 https://node-red.connpass.com/event/257963/