Node-REDのノードの開発・活用事例とコミュニティとの関わり(Node-RED Con Nagoya 2025)

by 404background

Slide 1

Slide 1 text

Node-REDのノードの開発・活用事例とコミュニティとの関わり大阪公立大学後地拓真 Node-RED Con Nagoya 2025 Archive：https://youtu.be/wTDt1yAIawg?t=8863

Slide 2

Slide 2 text

目次自己紹介 Node-RED MCUのノード開発コミュニティでの開発事例その他の事例最後に 2

Slide 3

Slide 3 text

自己紹介後地(うしろじ)です • 大阪公立大学博士前期課程１年 • Node-RED MCU 技術書執筆 • 技術ブログ：趣味的ロボット研究所 https://404background.com/ • Node-RED歴：２年半 • 好きなノード： Dashboard 2.0のui-file-inputノード 3 https://techbookfest.org/product/9t1kyKuapMSiTtd144V cv2?productVariantID=qP1qVRD9Z6fG7fuZRLjpCw

Slide 4

Slide 4 text

扱っているもの 4 • 3DCAD • 電子基板CAD • プログラミング • Unreal Engine • ROS • などなど…

Slide 5

Slide 5 text

きっかけご近所にNode-RED MCUの書籍の執筆者がいたから 5 Node-RED 大喜利 in 京都 (2023) Maker Faire Kyoto 2023 大阪24時間AIハッカソン(2024) • 最初に触ったのがNode-RED MCU • イベントでも利用 https://www.youtube.com/watch?v=-XgcMUE3A7A

Slide 6

Slide 6 text

これまで開発したノード Node-RED用 • python-venv • wsl-ubuntu • path-utils • voicevox-core • whisper • queue • python-dualshock4 • pyodide • ruby-wasm 6 Node-RED MCU用 • mcu-servo • mcu-serial • mcu-joystick • mcu-line-notify 計13個 backgroundで検索！ (後地なので…)

Slide 7

Slide 7 text

Node-RED MCUのノード開発

Slide 8

Slide 8 text

Node-RED MCUについて Node-REDのフローをマイコンに書き込める • Moddable SDKを利用 • 標準的な機能、一部センサーをサポート • カメラもサポート 8 https://www.npmjs.com/package/@kitazaki/node-red-contrib-mcu-camera mcu-cameraノード

Slide 9

Slide 9 text

ダッシュボードのサポート • ディスプレイ付きのボードではキーボード入力もできる • ノードを置くだけ！ 9 https://protopedia.net/prototype/4716 https://404background.com/made/mcu-smartphone/

Slide 10

Slide 10 text

Node-RED MCUの問題ノードが無いと扱いにくい例：カメラ、サーボモータ、サポートされていないセンサー無いなら作ればいい！ 10 https://qiita.com/background/items/9b820251aa9dda5a3167 https://404background.com/program/node-create-2/

Slide 11

Slide 11 text

mcu-servoノード角度を入力し、PWM outノードの値を出力 11 https://www.npmjs.com/package/@background404/node-red-contrib-mcu-servo https://youtu.be/tQKZNu7PTCM

Slide 12

Slide 12 text

活用例 12 https://protopedia.net/prototype/5030 https://flows.nodered.org/node/@mshioji/node-red-contrib-mcu-draw-face

Slide 13

Slide 13 text

mcu-serialノード Serial通信を扱える • 日本の執筆者メンバーの方の記事をもとにノード化 • functionノードで動くならノード化しやすい • ノード間でインスタンスの共有 13 https://github.com/404background/node-red-contrib-mcu-serial https://404background.com/program/node-create-3/

Slide 14

Slide 14 text

改善方法の提案 Moddable SDKの開発者の方から改善案を頂きました 14

Slide 15

Slide 15 text

mcu-joystickノード M5StackのJoystick Unitを扱える • I2C通信を利用 • 出力は3つ • X軸、Y軸、ボタン 15 https://youtu.be/Ndb2MqFHdD8 https://github.com/404background/node-red-contrib-mcu-m5units

Slide 16

Slide 16 text

開発時に気を付けていること • 入力と出力の関係 • 既存のノードとの兼ね合い • 子どもでも使いやすいか？ノードをインストールするだけで使えるのがメリット 16

Slide 17

Slide 17 text

コミュニティでの開発事例

Slide 18

Slide 18 text

Pythonを実行するノード functionノードのようにPythonのコードを実行できるノードは既にある • python-functionノードなど • execノードでも実行可能 Pythonを実行するメリット • AI系のパッケージを活用できる • 物体検出、音声認識、音声合成など 18

Slide 19

Slide 19 text

Pythonを実行するノード既存のノードの課題 • システムのPythonを利用している • パッケージやバージョンがシステムに依存する • フローを共有しても動かない可能性 Pythonの仮想環境を利用した、新しいノードとして開発する 19

Slide 20

Slide 20 text

venvを利用するよくある使い方 1. 仮想環境を作成する 2. activateを実行して有効化する 3. ファイルを実行する絶対パスを呼び出して実行 1. 仮想環境内の実行ファイルの絶対パスを指定して実行するコマンド１行で実行可能！ 20 python –m venv <仮想環境名> source <仮想環境名>/bin/activate python hello.py /home/pi/pyenv/bin/python hello.py https://404background.com/program/python-venv/

Slide 21

Slide 21 text

初版のpython-venvノード • ノードで絶対パスを管理 • pipノードでパッケージをインストール • ノード内のコードを実行できる環境構築の手順もフローとして残すことが可能 21 https://404background.com/program/node-create-python-venv/

Slide 22

Slide 22 text

利便性について考える Q.他にどのような機能が必要か？さらに便利にするには？ 22

Slide 23

Slide 23 text

ノードを改善するテキストエディタを適用する 23

Slide 24

Slide 24 text

ノードを改善する複数の仮想環境を作成・管理する • Pythonのバージョンも切り替え可能 (Windowsのみ) 24 https://github.com/404background/node-red-contrib-python-venv/pull/15

Slide 25

Slide 25 text

ノードを改善する Node-REDのメッセージをコード内で取得したい！ • msg, flow, globalオブジェクトを取得可能 25 https://github.com/404background/node-red-contrib-python-venv/pull/6 https://github.com/404background/node-red-contrib-python-venv/issues/35

Slide 26

Slide 26 text

ノードを改善する絶対パスで仮想環境を作成したい！ 26 https://github.com/404background/node-red-contrib-python-venv/issues/18

Slide 27

Slide 27 text

ノードを改善する • childprocessのexecとspawnを切り替え可能にする • 実行終了後に出力 or 順次に結果を出力 whileループも実行可能 27 https://github.com/404background/node-red-contrib-python-venv/pull/20

Slide 28

Slide 28 text

活用例音声翻訳 • パッケージをインストール • 録音→文字起こし→翻訳 →音声合成→音声再生 • ノードを再利用できる • メンテナンスしやすい 28 https://github.com/404background/node-red-contrib-python-venv/discussions/48 https://404background.com/program/python-gtts/ https://404background.com/program/python-googletrans/

Slide 29

Slide 29 text

OllamaによるLLMどうしの対話 29 https://404background.com/program/ollama-4/ https://404background.com/program/python-search/

Slide 30

Slide 30 text

OllamaによるLLMどうしの対話 30 https://404background.com/program/ollama-4/ https://404background.com/program/python-search/

Slide 31

Slide 31 text

コミュニティでの開発 • オープンだと海外の方も協力してくれる • 自分では実装できない機能も追加 • みんなが欲しい機能も集まる • 交流するのが楽しい 31

Slide 32

Slide 32 text

その他の事例

Slide 33

Slide 33 text

AIとの開発バイブコーディングにより開発が加速課題：必要なファイルが不足することがある • ノードの開発に関する情報が少ない？ 33 https://github.com/404background/node-create-guidelines https://nodered.jp/docs/creating-nodes/ ガイドラインを読んでもらってから開発 • ノード開発のドキュメントをもとに作成 • フォルダの構成を定義 • ガイドライン自体がサンプルノード

Slide 34

Slide 34 text

pyodideノード Pyodideを利用してPythonのコードを実行可能 • Pythonのインストールが不要 • Node-REDのメッセージも受け取れる 34 https://github.com/404background/node-red-contrib-pyodide

Slide 35

Slide 35 text

ちなみに enebularでは実行できませんでした • python-venv, pyodideノード • 権限エラーなど 35

Slide 36

Slide 36 text

ruby-wasmノード WebAssemblyを利用してRubyのコードを実行可能 • アスキーアートプログラムを実行可能 36

Slide 37

Slide 37 text

LLM Plugin サイドバーでLLMと対話できる • 現在のフローを渡せる • LLMが提案したフローをインポートできる • 現状ではOllamaのみサポート Node-REDでもバイブコーディング？ 37 https://github.com/404background/node-red-contrib-llm-plugin

Slide 38

Slide 38 text

ROSとの連携 • ROSとの通信によるアームの制御 • WSL2のUbuntu環境とROS Bridgeを経由して通信 38 https://qiita.com/background/items/c0d5b0a744fdd2365fd1 https://404background.com/ros/ros1-3/ https://404background.com/program/ros-bridge/ https://youtu.be/KBqswSWB6b4

Slide 39

Slide 39 text

Unreal Engine 5との連携 • ロボットアームのモデルを制御 • HTTP通信による連携 • Unreal Engineもノード型 • 入力が複数 39 https://qiita.com/background/items/c0d5b0a744fdd2365fd1 https://404background.com/ue5/unreal-engine-5-7/ https://youtu.be/0j4AB2rYCT0

Slide 40

Slide 40 text

ROS+UE5+Node-RED 40 https://qiita.com/background/items/c0d5b0a744fdd2365fd1 https://youtu.be/0j4AB2rYCT0 • デジタルツインのためのシステム • 最近はTCP/UDP通信で連携

Slide 41

Slide 41 text

wsl-ubuntuノード WSL2のUbuntu環境のターミナルでコマンドを実行可能 • 複数のUbuntu環境を呼び出せる • sudo実行時のパスワードも指定可能 • roscore、Gazeboなどの実行 41 https://www.npmjs.com/package/@background404/node-red-contrib-wsl-ubuntu https://404background.com/program/node-red-wsl-ubuntu/

Slide 42

Slide 42 text

最後に

Slide 43

Slide 43 text

まとめ • ノードの開発を通してコミュニティと関わるのは楽しい！ • どんどん開発が進む • 自分にはできない実装も • 「ノードを開発する」という選択肢がある • 再利用できる • AIを活用して開発できる Thank you for Contributors! 43

Slide 44

Slide 44 text

ご清聴ありがとうございました! 後地拓真 GitHub@404background X@404backG Blog:https://404background.com/ E-mail:[email protected]