昨年はChatGPTにお願いしてマサワダ画像を作ってもらっていた*1。
半分デバッグに参加させられたりして、苦労していたし、座標が全然合わない。また、タイトル生成部分は別に作って切り貼りなどしていた。
今年もアドベントカレンダーの時期になったので、バイブコーディングの記録を残しておく。
作ったのはこんなゲーム。
MASAWADARUSH
これは「マ」「サ」「ワ」「ダ」を指でなぞっていくとブロックが消えていくというゲーム。
ここから遊んでみてください。
gemini.google.com
遊べるということはさておきで、こだわったところは音が出るところ。ランダムなスケールの音でメロディーを作ってもらうようにした。ゲームはどうでもよくて、こういう音が出るプログラムが好き。
なんとなく、マサワダ、と言ってるような音を出したい。ヴォコーダー的に音声合成したら？とかお願いしたら、そういう音を出してもらえた。
Xへのシェア機能を作るのが難しい
結果のシェアを作るのが難しくて、GeminiのCanvasはiframeのなかで動くので、location.hrefは取れない。window.parent.location.hrefは別オリジンなので参照できなかった。共有URLは生成したときに発行されるので、事前にわからない。
GitHub Pagesにホスティングして、URLを固定したら、シェアするときにURLも添付できるのだけど、Gemini Canvasポン出しなのが今年らしいと思うので、このままにした。
消した文字を投稿するのもちょっと気に入ってるところ。こういう変な機能はAIは推薦してくれない。
マサワダマママママササワダダダマサササワダママママサワワワダマサササササワワワワワダマササワダマサワダダダダマママサワワダ スコア: 4810 #MASAWADARUSH
— 趣味はマリンスポーツです (@hitode909) 2025年12月4日
今年デバッグに参加させられたところは、スマホでのタッチイベント。canvasを縮小したタイミングで座標がズレてしまった。そこの計算漏れてるよね、とか指摘する場面があった。
それ以外は、コードが途中でちぎれたりすることもなく、難なく書いてくれた。
Reactの実行環境はGemini Canvasの時点で技術選定が終わってて、そのなかのコードを書くだけなので、スラスラ書けてる、という側面もありそう。
という形で、1年で進歩したと思う。
この記事はmasawada Advent Calendar 2025の2日目です。みなさん参加忘れてませんか？どうやら今年は中止らしい？と聞いたのですが、勝手に始めましょう。
adventar.org
