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
20220822_ジーズテックワークショップ vol.0田中正吾 Showcase～Node-RED で色々つないで発想が広がるあれこれ～ワンフットシーバス 田中正吾
View Slide
私の話はスライドを後ほど共有します。話す内容に注力いただいて大丈夫です！
田中正吾（たなかせいご）屋号：ワンフットシーバス2004年よりフリーランス。以後、FLASH制作を中心にインタラクティブコンテンツを主に行い現在に至る。最近ではWEBフロントエンドをベースにしながらも、情報とインターフェースが合わさるアプローチという視点でIoTやMixed Realityといった技術も取り入れながら活動しています。
今日の流れ（50 分）● Node-RED について● Node-RED を柴犬 API をつなげるデモ● Node-RED を CO2 センサーにつなげるデモ● Node-RED がつくりつづけるために良いポイント● Node-RED を ヘルスケアデバイスにつなげるデモ● Node-RED を VR とつないでリアルタイム翻訳するデモ● （時間があれば）イベント情報● （時間があれば）質疑応答● （時間があれば）他に何かデモ
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様々なデータ様々なデータ
こんな感じのバケツリレーノードノード処理
このような特徴から技術同士をつなげやすい目で見て分かりやすい UI で、つなぐパーツが揃っていて、自分なりにポチポチつないでいけます。A B
Node-RED は技術や発想をうまくつなげる接着剤これから、よくつながるっぷりをリアルタイムデモしていきます！
デモしてみます！
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/
HTTP 経由で obniz を動かしますobnizNode-RED
obniz のテープ LEDを動かすデモからobniz クラウドへ HTTP で指示して動かします
obnizhttps://www.switch-science.com/catalog/3838/
このような仕組み外部サーバNode-REDobnizHTTPで点灯指示
obniz には obniz クラウドというものがありメッセージング機能で外部から HTTP で指示できるメッセージング - obniz Docshttps://obniz.com/ja/doc/reference/common/messaging
obniz クラウドでメッセージ受信後ふくめた処理を JavaScript でつくってデバイス設定
Node-RED はこのようなフロー
動かしてみます！
M5Stack にとりつけた CO2 センサーの値をNode-RED ダッシュボードで可視化しますこれはむちゃくちゃ換気した部屋で観測
CO2 濃度の目安換気の目安になる「CO2濃度」を見える化 | IODATA アイ・オー・データ機器https://www.iodata.jp/news/2021/newprod/ud-co2s.htm
Node-REDこのような仕組みM5Stack + CO2センサーセンサー値を送受信CloudMQTT外部 MQTT ブローカダッシュボードグラフ表示
M5Stack に Arduino IDE からセンサー値取得とMQTT へのデータ定期送信を設定
こちらに配置したダッシュボードノードもURL(/ui)が発行されリアルタイムに動きます
CO2 データ共有コンテンツこの QR コードから見ることができます！https://bit.ly/3T3gd7q（ここで10秒くらい待って、参加者のみなさんが撮影しやすいようにする）
つくりつづけるときの大切なポイント今回はプロトタイピングと発想の側面を中心に
いろいろと技術をつないで発想を広げるのが大事アイデアとは今まであるものの組み合わせA B
AとBをつなぐときは大変になりがち技術単体のナレッジよりも少なくなるし、やってるひととも少ない、つなぐプログラムにする工程も必要A B(>_<)
つなぐ大変さは技術が増えると積み重なるA + B ならまだいいが、A + B + C + D ... と増えるとレア度が高くなる（もちろん自分なりに突き進んでる感じで楽しいですけど！）A B(>_<)C(>_<) (>_<)
つなぐ部分をより気楽に試すためにNode-RED のようなツールでフォローしてます「すぐやれるぞ」という気持ちと実績は、発想を止めずに軽やかにとりかかれるA B(^o^)
そうするとより多くの組み合わせやアイデアをつくりつづけて試すことができるA B(^o^)C(^o^) (^o^)
つくりつづけるために地道に消耗を見直して短距離走だけでなく持久走もできるようにする
指輪ヘルスケアデバイス OuraRing 連携Node-RED OuraRing
指輪ヘルスケアデバイス OuraRing
指につけるデバイスで色々なセンサーで健康状態を常にチェックしてくれるスマホアプリでBluetooth でデータ取得し体調・睡眠時間・アクティビティ・心拍数などクラウド分析https://play.google.com/store/apps/details?id=com.ouraring.oura
自分でも API 経由でデータ取得可能これを Node-RED につなぐ
このような仕組みNode-RED OuraRing API私の OuraRingOuraRing スマホアプリでBluetooth 経由で手動取得
ダッシュボードで最新のデータが見えるようにします
OuraRing 心拍数コンテンツこの QR コードから見ることができます！https://bit.ly/3A2pSCq（ここで10秒くらい待って、参加者のみなさんが撮影しやすいようにする）
VR デバイスとの連携Node-RED
HoloLens 2 で音声認識を使ったDeepL経由リアルタイム翻訳つくりました
HoloLens 2https://www.microsoft.com/ja-jp/hololens/hardware
HoloLens 2 には音声認識機能がありトークを日本語テキストに変換できます音声認識機能（インターネット経由）音声データマイク入力テキスト空間にテキスト表示
もちろん Unity C# で HoloLens 2 アプリをつくる必要はあり、がんばりましたつくる経緯の話は置いておきます（まず連携をお見せしたい）Unity
シンプルな音声認識の様子OSの言語設定を日本語にして Dictation イベントを取得して空間に表示させます
音声認識した日本語を DeepL の翻訳 API を通して英語に翻訳して表示しています日本語音声認識（インターネット経由）英語自前 Node-REDDeepL API
Node-RED はこのようなフローHoloLens 2 から来た音声認識テキストを DeepL API に http request ノードでつないで返ってきた結果をシンプルに HoloLens 2 に返答する仕組み
HoloLens 2 に翻訳後に HTTP で返答する部分
M5Stack にも翻訳済みテキストを表示するようにもしています
ダッシュボード にも翻訳済みテキストを表示するようにしています
HoloLens 2 翻訳テキストコンテンツこの QR コードから見ることができます！https://bit.ly/3CtQJKi（ここで10秒くらい待って、参加者のみなさんが撮影しやすいようにする）
昨今の不確実性にうまくノッていく術でもあるいまは「この道を行けばいい」というものは少なく、変化し続けてリアルタイムに対応したほうがいい
何回もリングに上がり試すことが大切完璧・万全を尽くすぎて疲れ切る1回より、まずつくってみて結果を得て次を試してみる
Node-RED イベント情報オンラインで気軽に参加できます！
ビジュアルプログラミングIoTLT vol.12https://iotlt.connpass.com/event/256929/田中が司会です。Node-RED 含めいろいろなビジュアルプログラミングが出てくる気軽に聞けます！
Node-RED Park Vol.7Dashboard 機能を極める会。今日見せた Node-RED ダッシュボード特化のイベント。深くて楽しい。https://enebular.connpass.com/event/254733/
[ 新企画！] Node-RED Flow 大喜利あらかじめ出題される Node-RED Flow のお題に対して自分なりのフローを披露するイベント。https://node-red.connpass.com/event/257963/
1ftseabass
ryomaru0825
nayuts
rilmayer
yuj1osm
yamamuteki
sekido
ysasago
onlinesalon
yutoy
simosako
shunsukeono_am
h1kita
ufuk
gr2m
jeffersonlam
cassininazir
tmm1
caitiem20
maltzj
tammyeverts
tanoku
dougneiner
samlambert