ビジュアルプログラミングIoTLT vol.23

ビジュアルプログラミングIoTLT vol.23「Claude Code で Node-RED での開発をフローレベルで協業するひとつのアプローチ」の登壇資料です。

◆スライド内の素材は以下を使用させていただいております。ありがとうございます！

・シルエットデザイン http://kage-design.com/
・human pictogram 2.0 http://pictogram2.com
・ICOOON MONO http://icooon-mono.com/
・Adobe Stock https://stock.adobe.com/jp

Transcript

1. 1 ビジュアルプログラミングIoTLT vol.23 Claude Code で Node-RED での開発を フローレベルで協業するひとつのアプローチ ワンフットシーバス 田中正吾
2. 私の話はスライドを後ほど共有します。 話す内容に注力いただいて大丈夫です！ 2
3. 7 分くらいで話します！ 3
4. 田中正吾（たなかせいご） 屋号ワンフットシーバス 代表 2004年よりフリーランス転向以後、FLASH 制作を中心にイ ンタラクティブコンテンツを主に行い現在に至る。最近では WEBフロントエンドをベースにしながらも、情報とインタ ーフェースが合わさるアプローチという視点で 生成 AI ・ IoT ・ XR といった技術も取り入れながら活動しています。 ウォンバットが好き。 4
5. Node-RED の仕組みで AI に併走してもらってます 半年くらい前まではこういう風に Claude に聞くスタイル 5
6. これでも結構いい感じ。コピペがつらい。 初手で完成ならいいけど更新しつづけるとなると修正のたびにエディタとチャットを行き来が大変。あと経緯が残りにくいのも大変。 6
7. Node-RED はプログラムの流れが flow.json で まとまってるので直接編集してもらっていいのでは？ 実際 Node-RED をコーディングエージェントが知ってるので結構理解できる 7
8. ともあれの悩ましさはある AI には目がないので視覚的にゼロから作るのは苦手 複雑なフローを追わせるのは flows.json 全追いで厳しいので対象範囲を絞り込 む必要があります。 ゼロからからノードをつないでもらうというのはキメラ（ありえないつながりの 変なフロー）ができるので期待できない。良いやり方があるかもだが・・・。 「3つ分岐している場所がさ」「つながっていないところがあるので」といった 目で見た指摘はうまく伝わらない。 コードを書くタイプのノード function ノードや文字列を入れれる template ノ ードをダッシュボード系の UI の ui_template ノードに限定してコードを書くよ うにお願いするのがいい。 8
9. function ノードを狙ってもらうのは かなり組んでくれやすい これでバッファデータを JSON に base64 化してくれていれるような仕掛けはばっちり 9
10. AtomS3R Cam のデータを取得して表示する仕組み buffer -> json object という名前の function ノードがうまく変更された（簡単ではあるけど） 10
11. ちなみに複雑になってきたら グループ機能で命名しとくと AI も分かりやすい フローの JSON でも明示にグループ情報が分かるため 11
12. 作ってて楽しいのは ダッシュボードの ui_template ノード Node-RED Dashboard 2.0 は Vue + Vuetify でできていてがっつりコードで組める 12
13. さっきの画像データの流れからのお願いした様子 ある程度の文脈は意識しつつ丁寧に背景を出しつつお願いする。最初は。 13
14. 実際に作業している様子 Vuetify のパーツをうまく活用しながら Vue の作法で書きつつ Node-RED ダッシュボード内の作法にも合わせてくれている 14
15. Claude Code の初手のお願いで結構いい感じに Vuetify で UI の性質が縛られているガードレール効果は大きそう 15
16. できあがったものを実際にデモしてみます！ ライブデモ！ 16
17. 余裕があれば UI をちょっと追加してみるデモもしてみたい 17
18. エクストラトーク 時間があれば 最近 Claude Code for VSCode でやりやすくなって Windows でも作業視野しく なったので Node-RED のちょっとした対応もできてありがたい 実際の案件でも function ノードでごりごり処理を書くように寄せれるのでハイ カロリーな SQLite のクエリや複雑な JSON データのエラー検知コードとかかけ てなかなかありがたいです flow.json が大きくなるとコードが書けるが再度埋め込むときに JSON 内のエス ケープとかが大変になってくるので分割挿入したり課題はあるので試行錯誤 18
19. まとめ Node-RED とコーディングエージェント（Claude Code）が協業できるアプロー チをひとつ見つけられた！ function ノードや template ノードというコードや文字列入れる系のノードや Vue + Vuetify コードを入れるダッシュボード ui_template ノードを書き換えて もらうのは結構しっかり動いてくれる このやり方でも SQL クエリ書いたりとか JavaScript でいろいろデータ処理のコ ードがかけるので仕事レベルでも結構使いどころがある とはいえフローが複雑になってくると AI に迷わせないグループ化で狙わせたり 試行錯誤が必要なので引き続きいろいろと試していきます！ 19