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

ビジュアルプログラミングIoTLT vol.24 1 Claude Code のセッション状況を Node-RED 経由で IoT
ライトで光らせたよもやま話ワンフットシーバス田中正吾

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

10 分くらいで話します！ 3

田中正吾（たなかせいご）屋号ワンフットシーバス代表 2004年よりフリーランス転向以後、FLASH 制作を中心にインタラクティブコンテンツを主に行い現在に至る。最近では WEBフロントエンドをベースにしながらも、情報とインターフェースが合わさるアプローチという視点で生成 AI
・ IoT ・ XR といった技術も取り入れながら活動しています。ウォンバットが好き。 4

コーディングエージェントの状況が目で見て分かるといいな Claude Code 良く使うんですが指示後に良く指示待ちさせてる。分かりたい。 5

Claude Code のセッション状況が IoT デバイスに送られるのができたこんな感じ（できれば動画で見せる） 6

ざっくりとした仕組み claude-code-pipe が Claude Code を動かすと情報を Node-RED が受けて MQTT 経由で
IoT ライトに伝える 7

いざライブデモ実際に Claude Code の状況を IoT デバイスに転送してみる 8

よもやま話いろいろと組み合わせている 9

Claude Code の情報をリアルタイムで引き出せる Webhook でうまく転送 https://github.com/1ft-seabass/claude-code-pipe 自作の Claude Code
のセッションをブリッジするシンプルなミドルウェア 10

claude-code-pipe を応用して自前のコーディングエージェント窓口も作ってる普段使いのもの、今回はこれで claude-code-pipe 経由で Claude Code に指示出してます。 11

Node-RED は claude-code-pipe からセッション状況を受け取ってる到着するメッセージタイプに応じて色を変えてる。赤で止まっている感を強く伝えてみた。こういう間をつなげるのには Node-RED はうってつけ疎結合の良い道具。 12

ふりかえりまずうまくいって先が見えてきた色だけで分からせるのでもなかなかいい。赤で止まっているのは強い。ガチで開発して稼働するとぴかぴか光ってかわいい。素敵。 IoT 的に LCD ディスプレイに文字で出すと PC で見れつ普通の開発セッションと
見た目が変わらなくなる。あと読まないといけない。あんまり厳密にセッション内の出来事に厳密に意味を持たせすぎると新たな認知負荷がきそう。これは状況表示だが実際の指示側もやってみたくなる。結構な流量になので外部 MQTT サービスだとちょっと流量制限が心配になるそうかこれも AI が外に出てくるフィジカル AI っぽさがある 13

まとめひとまずコーディングエージェント開発状況がうまく IoT に流すことができた！実際にやってみるとどう分かりやすくしたいかという IoT UX な世界が見えてくる現実世界に出てくるとやっぱりおもしろい！ 14

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

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

1ft-seabass PRO

More Decks by 1ft-seabass

Other Decks in Technology

Featured

Transcript