SVGフィルターをノードエディターで視覚的つくれるWebアプリを作りました
SVGフィルターって意外と難しいですよね。in、in2、resultといった属性でフィルタの入出力を行ったり、どのようにフィルタが重なるのかコードからは想像がつきにくいです。
それを視覚的に分かりやすいノードエディターとして編集できるWebアプリを作りました。
フィルター同士をつなげていくことでフィルターを重ねて複雑な表現も作れます。つなげ方を変えることで重ね具合もいろいろ試せます。
使用技術
JavaScriptフレームワークとしてVue.jsを、ノードエディターにVue Flowを使っています。コア機能は主にこの2つでできています。そのほかストアとしてPinia、ルーティングとしてVue Routerを使用しています。
きっかけ
SVG Filter Makerを作ってみようと思ったきっかけはこの記事を読んだからでした。
自分は時折Blenderで3DCGを遊ぶこともあるのですが、SVGフィルターの仕組みがマテリアルエディターと良く似ているなと思ったのが始まりでした。だからノードエディターでSVGフィルターも作れるのではと考えました。
しかし、その時は思いついただけで具体的な実現ビジョンもないアイデアだったのでしばらくは放置していました。その後、AIを触っていくうちに具体的な実装の道筋がなくてもAIに任せればいけるのではないかと思うようになります。
AIとの協業
そこからはChatGPTに壁打ちしながらアイデアを仕様書としてまとめました。提案された技術を確認し、こちらの希望を伝えて仕様として築いていきます。それを基にCursorを使ってコア機能をAIに作成してもらいました。
今回、自分が作った中ではAIの比重がかなり高いプロダクトです。コアのロジックなどは半分以上がAIコーディングになっています。
とくにノード情報からSVGフィルターを構成するロジックやフィルターの種類に応じてVue Flowを構成する部分などはほぼすべてAIが書いてます。そのため自分の役目はユーザーとして使いやすいインターフェースを考えることでした。
今後は先にプロダクトがあり、そこからデザインするという流れも増えていくような気もします。
今後
SVGフィルターすべての機能をこれで作れるわけではありませんが、できるだけこのツールでSVGフィルターを楽に作れるようアップデートしていこうと思っています。
応援してくれると嬉しいです。
Discussion