hitode909の日記

以前はプログラミング日記でしたが、今は子育て日記です

Gemini Canvasとゲーム「MASAWADARUSH」を開発した

昨年はChatGPTにお願いしてマサワダ画像を作ってもらっていた*1。
半分デバッグに参加させられたりして、苦労していたし、座標が全然合わない。また、タイトル生成部分は別に作って切り貼りなどしていた。
今年もアドベントカレンダーの時期になったので、バイブコーディングの記録を残しておく。
作ったのはこんなゲーム。

MASAWADARUSH

これは「マ」「サ」「ワ」「ダ」を指でなぞっていくとブロックが消えていくというゲーム。
ここから遊んでみてください。
gemini.google.com

遊べるということはさておきで、こだわったところは音が出るところ。ランダムなスケールの音でメロディーを作ってもらうようにした。ゲームはどうでもよくて、こういう音が出るプログラムが好き。
なんとなく、マサワダ、と言ってるような音を出したい。ヴォコーダー的に音声合成したら？とかお願いしたら、そういう音を出してもらえた。

Xへのシェア機能を作るのが難しい

結果のシェアを作るのが難しくて、GeminiのCanvasはiframeのなかで動くので、location.hrefは取れない。window.parent.location.hrefは別オリジンなので参照できなかった。共有URLは生成したときに発行されるので、事前にわからない。
GitHub Pagesにホスティングして、URLを固定したら、シェアするときにURLも添付できるのだけど、Gemini Canvasポン出しなのが今年らしいと思うので、このままにした。
消した文字を投稿するのもちょっと気に入ってるところ。こういう変な機能はAIは推薦してくれない。


今年デバッグに参加させられたところは、スマホでのタッチイベント。canvasを縮小したタイミングで座標がズレてしまった。そこの計算漏れてるよね、とか指摘する場面があった。
それ以外は、コードが途中でちぎれたりすることもなく、難なく書いてくれた。
Reactの実行環境はGemini Canvasの時点で技術選定が終わってて、そのなかのコードを書くだけなので、スラスラ書けてる、という側面もありそう。


という形で、1年で進歩したと思う。


この記事はmasawada Advent Calendar 2025の2日目です。みなさん参加忘れてませんか？どうやら今年は中止らしい？と聞いたのですが、勝手に始めましょう。
adventar.org

*1:ジェネレーティブな「マサワダ」映画タイトルを生成する - hitode909の日記

朝の身支度スタンプラリーの試み

子が、朝や夜の身支度を全然進めてくれない。
朝食を1時間半にわたって食べ続けたりして、なかなか朝の予定を進行できない。

ChatGPTのグループチャットで、妻とAIの三者面談の育児相談チャットを作って喋っていた。
こういうかたちで状況をお伝えして、話を聞いてもらっていた。

そこで喋っていたらスタンプラリーを作ろう、ということを思いついた。べつにAIが考えてくれたわけではなく、人間側が発想したと思う。
工程がチェックリストになっていて、起床完了とか、朝食を食べる、とかそういう単位でチェックポイントを設けたら楽しいんじゃないかと考えた。

1日目がこれ。これは効果あった。朝のスタンプラリーがあるよ、と言って起こしたら、やる…！！！と飛び起きて、自分でスタンプを押したり落書きしたりして満喫していた。

落書きして、矢印がたされたりしているけど、こんな感じ。このゴールの絵は、目薬の絵。

夜のスタンプラリー。保育園で遊びすぎて力尽きているのか、風呂に入る直前で号泣して脱落してしまった。

ふたたび朝。これもやっぱり途中で飽きていた。

スタンプラリーはめちゃくちゃいい考えかと思ったけど、長持ちはしない。
こういう持ちネタが10種類くらいあって、今日は「レ・ミゼラブル身支度」とか「裁判員裁判身支度」とかいろいろ用意しておけるとよさそう。
迷路になってるとか、間違い探しになってるとか、工程を進むたびに折っていくとおもしろい形になる折り紙とか、用紙の工夫もできそう。
あとは、早く身支度して自転車の練習をしよう、とか、子が関心ある活動に誘うというのも有用だった。

この日記を書いてたら、迷路身支度でいいじゃん、と思って作ってもらったのだけど、あんまりうまくいかない。スタートから、なにもせずゴールすることができる、という子にとって天国のような工程になっている。

その後、AIに頼ってられないと思い、手書きで迷路スタンプラリーを作ってあげたら、「難しすぎ」と見向きもされなかった。

■

パッシブエアコンでの暖房について。
昨年度は何の疑問もなく全フロアで暖房を入れていて、そうすると湿度が29度になってしまい、乾燥して困るので、加湿器を買っていた。
今年は床下だけオンにしてみている。
家庭の暖房手法で、床下エアコンといって1階の床の下にエアコンを1個取り付けて、冬はそれで家中温める、という手法がある。
うちもできるんじゃないか？と床下だけオンにしたら、これで問題なくて、家中安定して20度くらいになるし、吹き出し口から乾燥した風も飛んでこないので快適。
加湿器はつけていて、湿度50%前後を維持できている。
全部の機能を使わないほうが快適、というのが直感に反しておもしろい。
blog.sushi.money

来週月曜にはてなのエンジニアセミナーで登壇します！全員昼ご飯を食べながら見てください

いまのチームには7年か8年くらい居るのだけど、長らくアプリケーションエンジニアをやっていたけど、最近エンジニアリングマネージャにもなった、という話をしたら、どんなことやってるんですか？という質問がだいたい飛んでくる。
これまでどんなことをやっていて、今は何をしているか、という話を15分くらい喋ります。
イベント概要はこちら。
developer.hatenastaff.com

参加申し込みはこちら。
hatena.connpass.com

申し込みといってもオンラインで動画配信をするという形なので、昼ご飯を食べながらや散歩しながら、ボクシングゲームをやりながら、別のオンラインセミナーを見ながら、見る気はないがにぎやかしにクリックしておくなど、お気軽にどうぞ。
オンラインで登壇するのって孤独で、観客が居ないのが苦手。Xなどで実況してもらえるとうれしいです。

■

河森さんの展示をやってるというので万博公園に行った。
万博での体験はVRゴーグルを付けて見る作品だけど、その映像が上映されている。
VRコンテンツってサイケデリックなものになりがちな気がする。3D CGでリアルタイムに合成する必要があるので、テクスチャをそんなに凝るわけにもいかない、とか、そんなに予算かけられないので、つるっとしたテクスチャになり、ドープな雰囲気が生まれる？
視聴者を日常から解放するのがVR、みたいなところがあって、3Dの和室とか作ろうとするとディテールに違和感を覚えたりしてたいへんだけど、宇宙なら見たことないので簡単に作れるのかもしれない。
映像書き出し時にもFPSが下がってガタガタしているような感覚があって、それによってもプレステのゲームを遊んでるような感覚になる。

もうひとつはイマーシブな作品で、曲に合わせてジャンプしてみよう、みたいなもの。それも映像としての上映。
イマーシブな体験を映像化したものって不思議で、フィードバックが欠けることで1次元なくなっていると思うけど、さらに還元すると絵1枚になるということで、そういう抽象化はよく見るので、そんなに恐れたり不思議がることもないな、と納得した。逆に、映像はなくなって、音にあわせてジャンプしよう、だけ残すということも考えられるけど、ほったらかしにして上映していて怪我でもされると嫌なので、おとなしく見ていられる映像が



遊具で遊んでたらもう夜になっていて、広場でやってるラーメンのイベントを見に行って、暗闇の中でラーメンを食べて帰った。
今日ついに気づいたのが、ららぽーとに車を停めるんじゃなくて、日本庭園前に停めると、ららぽーとの中をぞろぞろ歩いて、あれ買ってこれ買って、みたいな会話をしなくて済むし、いくら買い物したら何時間無料、みたいな世界からも逃れられる。


■

南禅寺にようやく行けた。ちょっとしおしおしている葉もあって、時期的には先週のほうがよかったような気がする。去年来たときのほうがフレッシュだった記憶がある。
すっかり観光客がいなくなっていると聞いて行ってみたけど全然そんなことはなくて、自転車で近づくのはたいへんだった。庭の観覧が行列になっていて入るのを断念した。