GPT-5が出ましたね。
会社でもとにかくAI使え！みたいなお達しが出まして、有償プランをプライベートでも使えるように補助金が出ているので色々使うようにしています。
エンジニアでAI活用といえば専らAIコーディング＆AIコードレビューですが、いわゆる文字列による構文が決まっているタイプのプログラミング言語には特効があり、特にフロントエンド系の業務をしているともう手放せない存在となりつつあるのではないでしょうか。私はそうです。
HTMLやCSSが書けることはわかった。プロジェクトを作れることもわかった。ジュニアエンジニアの教育目的として使えることもわかりました。
では構文がない(と言ったら語弊がありますが…)『ビジュアルプログラミング言語』を使うときAIは手助けをしてくれるのでしょうか？
今回はビジュアルプログラミング言語に「vvvv gamma」、AIモデルに「GPT-5(時々Thinking)」を採用しました。
vvvv gammaとはプロトタイピングに特化したビジュアルプログラミング言語の一種であり、特にCGを得意分野としています。
GPT-5にvvvv gammaについて聞いてみる
最初に結論を書きますが、GPT-5は条件付きでvvvv gammaでのパッチング(＝プログラミング)を手助けしてくれます。
今回vvvv gammaでvaperwave風のCGを作るためにはどうすればいいかをGPT-5に相談し、なるべくAIの指示通りにパッチングするという制限をつけてパッチングをしました。
※vaperwaveというのは音楽ジャンルを発端としたアートワークデザインの一種です。
ピンクや紫、シアンのネオンを貴重としたカラーリング
未来的であるのにどこか退廃的
平成初期のノスタルジー
GPTはvaperwaveというジャンルやその中で代表的なオブジェクト(サンセット、グリッド、パームなど)の概念は既にわかっているので、最終的にユーザーが作りたいもののイメージはできます。さて、イメージできているものをvvvv gammaで作ることはできるのか。ちなみに私はvvvv gammaがﾁｮｯﾄわかります。
実際にできたCGがこちらです。
パッチはこんな感じ。なるべくGPTの通りに組むのが目的だったのでメチャクチャ汚いのはご容赦ください。
チャットログはこちら。※アップロードした画像などが非表示になっています
https://chatgpt.com/share/689b4bf1-1f24-8011-81bb-d425dbc899f2
vvvv gammaの知識がネットに少なすぎる
vvvv gammaに限らずGPT-5のモデルとしての問題説も否めませんが、「よく考えたらそれできないのでは？」みたいなことを平気で言います。これはフロントエンドプロジェクトでのコーディングでも以前からあったことなのですが、vvvv gammaではこれが顕著でした。
私はvvvv betaからvvvvを触っていた人間なので、GPT-5が返してきた回答の端々にvvvv betaの内容が含まれていることに気が付きました。
GPT曰く、vvvv gammaのドキュメントや知見がネットにないからbetaのほうが得意とのこと。そう考えると旧vvvvページにあったフォーラムってかなり重要な目的を果たしていたのかもしれない…
それでもGPTをつかってパッチングがしたい
チャットログを見てもらえればわかりますが、このノードがない(見つからない)という質問を何回も繰り返すことになっていて、かつもっと簡単に目的の描画を実現できるノードがあるにもかかわらず回りくどいパッチングを要求してくるのでいくつか自分で修正をしてパッチングをしています。
ただしこれは前提としてvvvvの知識が必要になり、初学者の方がGPTを使ってビジュアルプログラミングを勉強する時の参考にはなりません。エラーを解決したいときやパッチングで詰まったときに効率的にGPTから回答を引き出すにはどうしたらいいのでしょうか。
とにかくスクショを貼る！
通常のコーディングアシストでもエラーメッセージが出たらそのままエラーログをAIに投げて解決させることがあります。ビジュアルプログラミング言語では多くの場合画面上にエラーが表示されるので、これをスクショしてGPTに投げます。
こうすることでエラーの内容を読み取ってある程度有効な解決案を提示してくれるようになりました。vvvv gammaに関しては文字でエラーの内容を伝えるよりもスクリーンショットのほうが有効のようです。
Inspectorウィンドウを含めてスクショを撮る
ノードの使い方やノード同士の接続の仕方がわからないとき、ピンが受け取るデータ型などを一覧表示して確認・編集できるのがInspectorウィンドウです。
このウィンドウを含めてスクリーンショットを撮ってGPTに見せることでパッチングで詰まったときのアドバイスの解像度が上がりました。
というのもGPT-5は実際に存在するノードを使用するようにサジェストしても実際には存在しないピンを使って説明することがかなり多く、実際にどのようなピンがあってどのようなデータ型を受け取るのかを提示してあげないと正確な答えを返してくれません。スクリーンショットでノードの中身を提示してあげれば架空のピンについて言及することがある程度少なくなります。少々めんどくさくてもスクリーンショットを撮ってアドバイスを求めることをお勧めします。
ただしスクショを貼りまくるとChatGPTのスレッドそのものが重くなるのである程度のところでスレッドを切ってあげてください。
まとめ
エンジニアやクリエイターがAIに職を奪われるのではと危惧されて久しいですが、vvvv Patcherに限ってはまだまだそんなことなさそうです。やったぜ…！
↓ vvvvに関する自著があります。こちらもどうぞ。
