202410_HackRockFes2024 Node-RED 紹介

Slide 1

Slide 1 text

202410_HackRockFes2024 Node-RED 紹介ワンフットシーバス田中正吾

Slide 2

Slide 2 text

Node-RED https://nodered.jp/

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

デモしてみます！

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

HTTP の関連ノード

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

➔ obniz 連携 ➔ Unity 連携 ➔ Vonage 連携エクストラ時間があれば調べてみる