$30 off During Our Annual Pro Sale. View Details »

The Code Challenger vol.0

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

1ft-seabass
PRO

August 22, 2022
Tweet

More Decks by 1ft-seabass

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  27. デモしてみます!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  34. HTTP の関連ノード

    View Slide

  35. デモしてみます!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  45. 動かしてみます!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  53. 動かしてみます!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  69. 動かしてみます!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  82. 動かしてみます!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide