わが子とお風呂を楽しむシリーズ：iPadを水鉄砲で撃つゲームを作ってみた。

以前 #AIとやってみた で書いた記事の中で紹介したアプリを掘り下げます。

子どもがお風呂に入らなかった時期ってありませんか？
お風呂をもっと楽しめるようなものにできたらなぁと考えて作ったのがこのアプリたちです。

① 水鉄砲でiPadを撃って画面を塗る「スマホプラトゥーン」🎨🦑
② 水鉄砲でiPadを撃ちターゲットを壊す「スマブラトゥーン」🎯

（最初は娘がお風呂を楽しめるように作りましたが、もう娘は大きくなりました。今は息子とこのアプリを楽しんでいます。）

①水鉄砲でiPadを撃って画面を塗る「スマホプラトゥーン」🎨🦑

そもそもiPadを水鉄砲で撃つって何なの？バカなの？

って思われた方もいるかもしれませんが、人類の知が結集したハイテクをアホらしいことに使うことが大好きなのです。
このテクノロジーたちは水鉄砲で打ったくらいでは、壊れないという絶対的な信頼のもと水鉄砲で撃ちます（防水対策用にケースに入れてます）

というのは置いておいて、皆さんもお風呂でiPhoneやiPadを使うと水滴でも画面が反応するという経験ありませんか？きっとお風呂で動画や漫画を読まれたことがある方は経験があるはず。つまり、実はあれって水がタッチ操作ができるということを示しています。笑
なので、その特性を活かしつつ、この人類の知の結晶であるデバイスを水鉄砲でiPad画面を打ち抜くことエリアを塗りつぶしていく——それが物理版スプラトゥーンの構想ですw

iOSで作ったアプリをバイブコーディングで移植する

最初に作ったスマホプラトゥーンは娘のためと書きましたが、当時はSwiftでiOSアプリとして作っていました。
単純な塗り絵アプリではあるのですが、iOSアプリとして基礎自体はできていたので元のiOSアプリをClaude Codeに渡してWebアプリとして再実装したものです。

システム構成はGASで実装しています。
①GASでゲームの本体となるhtmlを書く。
②スプレッドシートでパラメータ調整
というシンプルなもの

この辺りはClaude CodeやGemini CLIでGASでフロントも用意するという指示を出したのちclaspでアップロードまでできちゃうので、よかったら試してみて下さい。これまでバイブコーディングしたことある人なら動かすのは簡単だと思います。

過去のページでも説明していますが、中身は簡単に言うと「塗り絵アプリ」
なので、難しいことは一切やってません。Claude Codeで書き直させても30分はかからなかったと思います（正確に時間は測っていないです）

スマホで息子と撮影したのがこちら。

多分ケース的なのなくても大丈夫だとは思うんですけど、一応入れてます。

② 水鉄砲でiPadを撃ちターゲットを壊す「スマブラトゥーン」🎯

せっかくバイブコーディングでサクッとできたので、もう一つ作りたいなと思って作ったのがこちら。

スマブラの「ターゲットを壊せ」モードを、水鉄砲で撃ち抜く形式にしただけの派生作品です。過去からも構想としては持っていたのですけど、ついでに実装してみました。こっちは全部バイブコーディング（Gemini）に任せたものです
的のデザインだけこちらで作って表示をさせてますが、それ以外は全部お任せです。仕組みとしては水鉄砲が当たったところに的があれば的が壊れてポイントが入るという単純なものなので、Geminiでやって30分かかってないはず。

こちらもGASで実装をしていて、システムとしては①と全く同じ構成
フロントがGAS上のhtmlで、パラメータはスプシで管理です

こちらも水鉄砲でうつと反応します（以下の動画はデモなのでクリックしてますが）
塗るのと違って、こっちは的を狙わないといけないので、息子はちょっと苦戦していました。

まとめ：お風呂を楽しくするために

子どもとのお風呂時間を楽しくするために、ゲームを作ったというお話でした。
お風呂に入れるのも、子どもが大きくなったらできなくなるわけですから、一緒に楽しめるように技術を使って楽しくしてみました。

GASを使えば、サーバーも入らずに自分のみ公開で自分専用のゲームを作ることができるため、かなり良いと思います。

ニーズがあれば、もう少し詳しくゲームの作り方の記事でも書こうかなと思います。

最後まで読んでいただきありがとうございました。

普段は「はっきんぐパパ」として電子工作やものづくりの記事も書いていますので、こちらもぜひ覗いてみてください。
はっきんぐパパはこちら↓