ChatGPTでNode-REDのフローをつくってみたLT

ChatGPTでNode-REDのフローをつくってみたLT「ChatGPT さんに 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. 20230720_ChatGPTでNode-REDのフローをつくってみたLT
   ChatGPT さんに Node-RED のフロー発注！
   基礎作成・既存追加・よもやま話！
   ワンフットシーバス 田中正吾
   

   View Slide

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

   View Slide

3. 20 分くらいで話します！
   

   View Slide

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

   View Slide

5. ChatGPT さん
   

   View Slide

6. ChatGPT さん JSON 構造を
   以前から結構理解してくれる
   JSON
   

   View Slide

7. JSON データを褒めてくれたりする
   https://www.1ft-seabass.jp/memo/2023/05/04/chatgpt-understand-json-data-tips/
   

   View Slide

8. ChatGPT が Node-RED のフロー JSON を
   案内してくれる事例も
   Node-RED にゅーびぃーず Vol.10 公開イベント
   https://www.youtube.com/watch?v=C1vAPxEgQY8
   

   View Slide

9. ということで ChatGPT さんに
   いろいろな発注（お願い）をしてみます！
   

   View Slide

10. 指示書から基礎を作ってくれるやり取り
    

    View Slide

11. フロー JSON からインポート方法まで！
    https://chat.openai.com/share/15a697a0-9ec6-413c-8977-9bb7f445d0a9
    

    View Slide

12. ちゃんと柴犬 API データ取ってこれる！
    

    View Slide

13. ここまで発注するなら、人間が直接組んだほうが
    早そうだが、可能性はとても感じる！
    

    View Slide

14. 今までのフローに追加してくれるお願い
    

    View Slide

15. こんな内容
    https://chat.openai.com/share/f184a680-c5c6-4b86-87c1-a65b5779b389
    

    View Slide

16. こんなキメラができる時もある。おもしろい。
    https://chat.openai.com/share/1dc2e87a-98ec-479d-a129-bd8e407e1491
    

    View Slide

17. 例示したフローのノード ID 含めて
    フローをつくるので ID 重複が起きる時もある
    

    View Slide

18. フロー JSON 内の配列の理解をしつつ
    Node-RED の公開文化が寄与してそう
    早くから多数公式サンプル公開されていたし、フロー JSON やナレッジ記事豊富だったので取り込まれてそう
    

    View Slide

19. 柴犬 API からデータを取ってくるチャレンジ
    https://shibe.online/
    

    View Slide

20. 直接読んできてくださいは厳しい
    https://chat.openai.com/share/b5d8174c-7ae9-4d91-a3d5-a8d7f8bbb6ce
    

    View Slide

21. サイトに書かれている仕様を直接伝えると
    良い感じでやってもらえる
    https://chat.openai.com/share/661d31e7-a734-4958-bfed-fb369f2541fa
    

    View Slide

22. 軽くデモしてみます！
    

    View Slide

23. 時間があれば http.dog
    https://chat.openai.com/share/703b8bde-a905-4020-b62e-140b156cf003
    

    View Slide

24. 時間があれば dictionaryapi.dev
    https://chat.openai.com/share/f3f32c6b-1faa-42b0-b2be-6fb8608969ed
    

    View Slide

25. ブラウザ機能が復活＆扱いが安定してくれば
    このあたりの流れもより面白くなりそう！
    

    View Slide

26. ➔ ChatGPT は JSON データも理解ができる
    ➔ Node-RED はフロー JSON で仕組みが作れるので
    ChatGPT に基礎作成や既存改修ができなくもない
    ➔ わりと Node-RED の仕様を理解しているのは、おそらく
    古くからナレッジが公開されていて ChatGPT が学習して
    そうだから（公開文化すばらしい！）
    ➔ まるで発注の指示書を作るように、最初に API 仕様を伝
    えてフロー作成をお願いすると、結構良い感じにつくって
    くれるので、おもしろい！
    ➔ ひきつづき、このあたり可能性をさぐっていきたい！
    まとめ
    

    View Slide