【AIバイブコーディング】AntigravityというAIでゲーム作ってみるテスト
はじめに
最近出てきたAI、Antigravityを使ってバイブコーディングでゲーム作ってみるよ。
AI進歩目覚ましいから、とりあえずどんなもんかやってみよう。
理想にすぐ近づけるなら、理想のゲームをどんどん開発できちゃうからね。
バイブコーディングってなんやねん？
雰囲気でコード書くことらしい。
バイブス上がる～↑↑
のバイブ（雰囲気）
まぁ自力コーディング無しで大雑把な指示でも、しっかりコード書いてくれるよって感じ。
とりあえずできたもの
まぁ・・・どうでしょう。
やり取りは3回程度で、グラフィックからコード、簡素ながら効果音まで付けてくれた。
当然、完成度は高くないものの完全にふわっとした指示で出力してくれたので、やはり凄いよね。
スコア要素は指示してないけど、勝手に付けてくれたよ。
さいごに
おそらく完全知識ゼロ初心者からすると超凄くて、少しでもコーディングとか齧ってUnityやUEなどの開発環境を持ってる人からすると、そうでもないって感じだと思う。
個別に具体指示できる人だと、まだGPTやgeminiで十分な印象。
【Webアプリ制作】ブラウザ上で加工した画像をPCやスマホに保存する（canvasの保存）
はじめに
【ツール制作】Webで動く目線加工ツールを作る - ム空間雑記:||
↑記事で製作した目線加工アプリでぶち当たった課題について、どういう流れで苦しんで、解決に至ったかをまとめる。
1）ユーザーが画像ファイルをブラウザにUPする
2）画像をブラウザcanvasに描画する
3）その上から目線やモザイクを上乗せしていく
⇒操作ごとに確定しない！Undoで戻せるようにするため
4）保存ボタンでローカルへ出力
⇒これです。これが超絶苦しんだ。
canvasからの保存、以外に単純じゃない問題
とりあえず色々手法を試した軌跡を書いておく。
その1：保存ボタンは1つ（クリック一発DL）
即座にPCではダウンロードフォルダに保存される。
まぁ普通だよね。
でもスマホではどうなる？
自分はiPhoneなのでAndroid環境は分からないんだけど、iPhoneではファイルってフォルダに入るわけ。
でもそれじゃ使えないのよ。
何故ならカメラロールじゃないから。
写真編集したら、やはりカメラロールに入れたい。
一応ファイルからカメラロールに移動はユーザー側で操作できるけど、そんな面倒なこと無理。
その2：保存ボタンは1つ（画像を別窓で開く）
次に試したのがこれだ。
ボタンを押すと別窓で編集済みの画像単体が開く。
PCでは右クリック保存できるし、スマホでも長押ししてカメラロールに保存ができる・・・と”考えていた”
GPT君もこれならいけるって言ってくれたのに・・・。
PCでは想定通りに操作できた。
しかしスマホでは画像は開くのに長押し保存できないんだ。
これ実は画像がblob URLとなっているせいだ。
Blob = Binary Large Object
メモリ上にあるバイナリデータの塊。
そう、まだこの時点で画像ファイルではないのである・・・！
PC環境だとどうやらblobでも画像扱いで保存できるみたい。
しかしスマホではダメなんだ（少なくともiphoneでは）
ただし、どうにか弄りまくると保存できなくはなかった。
保存ボタン⇒別窓（blob）で画像表示⇒長押しでさらに別窓表示⇒長押し保存
こんなアホみたいなことすると、何故か保存できた。
理由は分からんけど、PCでのChromeブラウザがblobを画像扱いできるので、スマホChromeも抜け穴があったのかもしれん。
とにかく、こんなアホみたいな操作してられないので断念した。
その3：保存ボタン1つ（ユーザー環境によって挙動を分ける）
次に試したのはこれだ。
PCなら一発保存。
スマホなら「共有シート」を開くってやつ。
共有シートってのは、画像とかを長押しした時に出るのとほぼ同じだね。
SNSでの送信や、写真保存の項目があるメニューを開くことができる。
これならスマホで保存できる。
そして保存ボタンは一つにして見た目すっきり。
これで勝つる・・・と思っていた。
結果的にダメでした。
PCはOKでもスマホで開いてるのにPC保存になる等の誤作動が頻発した。
検出方法としては、画面タッチを検出してスマホ扱いするとか画面解像度が小さければスマホ扱いする、等と色々あるんだけど。
ipadだとそもそも解像度デカい、ブラウザによってはPC表示モードのせいで小さいスマホでもPC扱いされてしまうらしい。
非常に不安定なためこれも断念。
その4：保存ボタン2つ（PCとスマホ向け共有シート）
これです。
結果、これで解決しました。
PC向けでは一発DL（ダウンロードフォルダへ）
スマホ向けでは共有シートを開いて画像保存とかSNS送信できる。
一応、共有シートはPCでも表示はできるので、別に変な挙動にはならない。
当初はボタン一つに絞りたかったけど、これ以上時間をかけるわけにはいかなかった。
さいごに
まさかこんなことで躓くと思わんかった。
さすがにAI活用といっても、自分の経験のないところを手探りでやる以上は、思ったよりは時間かかるもんだな。
とはいえほぼゼロ知識から完成に漕ぎつけられるのは、さすが技術の進歩ということか・・・。
【Webアプリ制作】Webで動く目線加工アプリを作る
はじめに
第一弾でルーレットを作った。
「Webアプリ、意外といけるな？」
そう思って次に何を作るか考えたとき、ふと思った。
画像加工アプリって、意外と“ちょうどいいの”がない。
重すぎる。
広告だらけ。
スマホで使いにくい。
アップロードした画像がどこ行くのか分からない。
だったら作るか。
ということで、
ブラウザ上だけで完結する
シンプルな目線加工アプリを作ることにした。
目線加工アプリって？
いわゆるこれ。
-
顔に黒いバーを入れる
-
一部をモザイクにする
-
SNS投稿前の簡易加工
それだけ。
でも意外と、
-
操作が重い
-
余計な機能が多い
-
スマホだと操作しづらい
という不満がある。
だから今回は、
とにかく軽く、迷わず使えること
これをテーマにした。
目指す仕様
1）GitHub Pagesで動作
⇒ サーバー送信なし（完全クライアント処理）
2）できるだけ軽量
3）目線バーをドラッグでひける
4）モザイクも選択可能
5）操作を戻すUndo機能
6）PC、スマホでも保存可能
目線加工アプリ（Censor Bar）完成
Web目線加工ツール｜Censor Bar Tool｜色付き目線・モザイクも可能
苦労したところ
なんといってもPCとスマホ環境での画像保存。
これに尽きる。
え？そこかよ？って思うじゃん。
まずこの画像編集処理はこういう流れになる。
1）ユーザーが画像ファイルをブラウザにUPする
2）画像をブラウザcanvasに描画する
3）その上から目線やモザイクを上乗せしていく
⇒操作ごとに確定しない！Undoで戻せるようにするため
4）保存ボタンでローカルへ出力
この、保存する仕様が本当に厄介で。
一発保存ボタンだとPCではダウンロードフォルダに保存される。
まぁ普通だよね？
しかしこれがスマホだったらどうなるか。
iPhoneだとファイルというフォルダに入れられる。
これが厄介。
何故ならカメラロールではないからです。
いつも使う写真フォルダに入らないので、正直使い物にならない。
結局PCとスマホで保存ボタンを分けた。
これについての詳細はまた別途記事を書いた。
【ツール制作】ブラウザ上で加工した画像をPCやスマホに保存する（canvasの保存） - ム空間雑記:||
さいごに
サーバーにデータを渡さない静的サイトでも、ブラウザ上でファイル加工ができる。
これでユーザー側としてはプライバシー面で安心だし、サービス提供側としても新しい知見だった。
ちなみに当初は人間の写真を入れたら、自動で顔認識してモザイクがかかる・・・なんてものを考えていた。
しかし、さすがにそこまでは無理そうだね。
一応、人間を判別する機能は作れるみたいだけど、それはあくまで正面からとらえた個人の写真に限定されそうな感じ。
でも、その機能の存在を知れて今後のWebアプリ作りのネタにできそうだ。
