The Code Challenger vol.0

by 1ft-seabass

Slide 1

Slide 1 text

20220822_ジーズテックワークショップ vol.0 田中正吾 Showcase ～Node-RED で色々つないで発想が広がるあれこれ～ワンフットシーバス田中正吾

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

今日の流れ（50 分） ● Node-RED について ● Node-RED を柴犬 API をつなげるデモ ● Node-RED を CO2 センサーにつなげるデモ ● Node-RED がつくりつづけるために良いポイント ● Node-RED をヘルスケアデバイスにつなげるデモ ● Node-RED を VR とつないでリアルタイム翻訳するデモ ● （時間があれば）イベント情報 ● （時間があれば）質疑応答 ● （時間があれば）他に何かデモ

Slide 5

Slide 5 text

Node-RED https://nodered.jp/

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

このような特徴から技術同士をつなげやすい目で見て分かりやすい UI で、つなぐパーツが揃っていて、自分なりにポチポチつないでいけます。 A B

Slide 26

Slide 26 text

Node-RED は技術や発想をうまくつなげる接着剤これから、よくつながるっぷりをリアルタイムデモしていきます！

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

HTTP 経由で obniz を動かします obniz Node-RED

Slide 39

Slide 39 text

obniz のテープ LEDを動かすデモから obniz クラウドへ HTTP で指示して動かします

Slide 40

Slide 40 text

obniz https://www.switch-science.com/catalog/3838/

Slide 41

Slide 41 text

このような仕組み外部サーバ Node-RED obniz HTTPで点灯指示

Slide 42

Slide 42 text

obniz には obniz クラウドというものがありメッセージング機能で外部から HTTP で指示できるメッセージング - obniz Docs https://obniz.com/ja/doc/reference/common/messaging

Slide 43

Slide 43 text

obniz クラウドでメッセージ受信後ふくめた処理を JavaScript でつくってデバイス設定

Slide 44

Slide 44 text

Node-RED はこのようなフロー

Slide 45

Slide 45 text

動かしてみます！

Slide 46

Slide 46 text

M5Stack にとりつけた CO2 センサーの値を Node-RED ダッシュボードで可視化しますこれはむちゃくちゃ換気した部屋で観測

Slide 47

Slide 47 text

CO2 濃度の目安換気の目安になる「CO2濃度」を見える化 | IODATA アイ・オー・データ機器 https://www.iodata.jp/news/2021/newprod/ud-co2s.htm

Slide 48

Slide 48 text

Node-RED このような仕組み M5Stack + CO2センサーセンサー値を送受信 CloudMQTT 外部 MQTT ブローカダッシュボードグラフ表示

Slide 49

Slide 49 text

M5Stack に Arduino IDE からセンサー値取得と MQTT へのデータ定期送信を設定

Slide 50

Slide 50 text

Node-RED はこのようなフロー

Slide 51

Slide 51 text

こちらに配置したダッシュボードノードも URL(/ui)が発行されリアルタイムに動きます

Slide 52

Slide 52 text

CO2 データ共有コンテンツこの QR コードから見ることができます！ https://bit.ly/3T3gd7q （ここで10秒くらい待って、参加者のみなさんが撮影しやすいようにする）

Slide 53

Slide 53 text

動かしてみます！

Slide 54

Slide 54 text

つくりつづけるときの大切なポイント今回はプロトタイピングと発想の側面を中心に

Slide 55

Slide 55 text

いろいろと技術をつないで発想を広げるのが大事アイデアとは今まであるものの組み合わせ A B

Slide 56

Slide 56 text

AとBをつなぐときは大変になりがち技術単体のナレッジよりも少なくなるし、やってるひととも少ない、つなぐプログラムにする工程も必要 A B (>_<)

Slide 57

Slide 57 text

つなぐ大変さは技術が増えると積み重なる A + B ならまだいいが、A + B + C + D ... と増えるとレア度が高くなる（もちろん自分なりに突き進んでる感じで楽しいですけど！） A B (>_<) C (>_<) (>_<)

Slide 58

Slide 58 text

つなぐ部分をより気楽に試すために Node-RED のようなツールでフォローしてます「すぐやれるぞ」という気持ちと実績は、発想を止めずに軽やかにとりかかれる A B (^o^)

Slide 59

Slide 59 text

そうするとより多くの組み合わせやアイデアをつくりつづけて試すことができる A B (ô^) C (ô^) (ô^)

Slide 60

Slide 60 text

つくりつづけるために地道に消耗を見直して短距離走だけでなく持久走もできるようにする

Slide 61

Slide 61 text

指輪ヘルスケアデバイス OuraRing 連携 Node-RED OuraRing

Slide 62

Slide 62 text

指輪ヘルスケアデバイス OuraRing

Slide 63

Slide 63 text

指につけるデバイスで色々なセンサーで健康状態を常にチェックしてくれるスマホアプリでBluetooth でデータ取得し体調・睡眠時間・アクティビティ・心拍数などクラウド分析 https://play.google.com/store/apps/details?id=com.ouraring.oura

Slide 64

Slide 64 text

自分でも API 経由でデータ取得可能これを Node-RED につなぐ

Slide 65

Slide 65 text

このような仕組み Node-RED OuraRing API 私の OuraRing OuraRing スマホアプリで Bluetooth 経由で手動取得

Slide 66

Slide 66 text

Node-RED はこのようなフロー

Slide 67

Slide 67 text

ダッシュボードで最新のデータが見えるようにします

Slide 68

Slide 68 text

OuraRing 心拍数コンテンツこの QR コードから見ることができます！ https://bit.ly/3A2pSCq （ここで10秒くらい待って、参加者のみなさんが撮影しやすいようにする）

Slide 69

Slide 69 text

動かしてみます！

Slide 70

Slide 70 text

VR デバイスとの連携 Node-RED

Slide 71

Slide 71 text

HoloLens 2 で音声認識を使った DeepL経由リアルタイム翻訳つくりました

Slide 72

Slide 72 text

HoloLens 2 https://www.microsoft.com/ja-jp/hololens/hardware

Slide 73

Slide 73 text

HoloLens 2 には音声認識機能がありトークを日本語テキストに変換できます音声認識機能（インターネット経由）音声データマイク入力テキスト空間にテキスト表示

Slide 74

Slide 74 text

もちろん Unity C# で HoloLens 2 アプリをつくる必要はあり、がんばりましたつくる経緯の話は置いておきます（まず連携をお見せしたい） Unity

Slide 75

Slide 75 text

シンプルな音声認識の様子 OSの言語設定を日本語にして Dictation イベントを取得して空間に表示させます

Slide 76

Slide 76 text

音声認識した日本語を DeepL の翻訳 API を通して英語に翻訳して表示しています日本語音声認識（インターネット経由）英語自前 Node-RED DeepL API

Slide 77

Slide 77 text

Node-RED はこのようなフロー HoloLens 2 から来た音声認識テキストを DeepL API に http request ノードでつないで返ってきた結果をシンプルに HoloLens 2 に返答する仕組み

Slide 78

Slide 78 text

HoloLens 2 に翻訳後に HTTP で返答する部分

Slide 79

Slide 79 text

M5Stack にも翻訳済みテキストを表示するようにもしています

Slide 80

Slide 80 text

ダッシュボードにも翻訳済みテキストを表示するようにしています

Slide 81

Slide 81 text

HoloLens 2 翻訳テキストコンテンツこの QR コードから見ることができます！ https://bit.ly/3CtQJKi （ここで10秒くらい待って、参加者のみなさんが撮影しやすいようにする）

Slide 82

Slide 82 text

動かしてみます！

Slide 83

Slide 83 text

昨今の不確実性にうまくノッていく術でもあるいまは「この道を行けばいい」というものは少なく、変化し続けてリアルタイムに対応したほうがいい

Slide 84

Slide 84 text

何回もリングに上がり試すことが大切完璧・万全を尽くすぎて疲れ切る1回より、まずつくってみて結果を得て次を試してみる

Slide 85

Slide 85 text

Node-RED イベント情報オンラインで気軽に参加できます！

Slide 86

Slide 86 text

ビジュアルプログラミングIoTLT vol.12 https://iotlt.connpass.com/event/256929/ 田中が司会です。Node-RED 含めいろいろなビジュアルプログラミングが出てくる気軽に聞けます！

Slide 87

Slide 87 text

Node-RED Park Vol.7 Dashboard 機能を極める会。今日見せた Node-RED ダッシュボード特化のイベント。深くて楽しい。 https://enebular.connpass.com/event/254733/

Slide 88

Slide 88 text

[ 新企画！] Node-RED Flow 大喜利あらかじめ出題される Node-RED Flow のお題に対して自分なりのフローを披露するイベント。 https://node-red.connpass.com/event/257963/