バイブコーディング~「オンラインホワイトボード」~バグフィックスへの道 post thumbnail image

2014年11月からAIを使ったプログラミングに挑戦しています。

【これまで作成したプログラム】

・ToDoアプリ
・日記帳アプリ
・タイミングゲーム
・じゃんけんゲーム
・数当てゲーム
・ブラックジャック
・ブロック崩し
・シューティングゲーム
・パックマン風ゲーム
・一人用人狼ゲーム
・イベント登録サイト
・AIおみくじ

と作ってきました。

【オンラインホワイトボードを作成】

今回は将来オンライン対戦ゲームを作るためにGoogleのFirebaseにあるRealtime Databaseを使ってみたくて、試しにオンラインホワイトボードというものを作ろうと思いました。

初めてGeminiと一緒に作ります。

とりあえずの原型である
「文字が入力できる」
「手描きができる」
というプロトタイプはすぐに出来たのですが、

・「手描きがリアルタイムで反映しない」

という問題が発生。

これを解決したところで喜んでリリース!

ところがスマホの事をすっかり忘れていて、いざスマホで操作しようとすると、画面が動いてしまい手描きが使えません。

これを修正するのが大変でした。

なんと4時間近く掛かりました。

この問題を画面を固定化する事でなんとかクリアしたものの、今度は

・「色情報が抜け落ちる」
・「消しゴムが描画に変換されてしまう」

というとんでもない事態に。

何度もコードを書き換えてはテストしてログをGeminiに確認してもらい、再度書き直し・・を繰り返し5時間・・

やっとスマホ-PC間でリアルタイムで色情報を保ったままで手描きを相互に反映し消しゴムもリアルタイムで反映することを確認できました。

【ここまでのリリースノート】

・6/10 16:10 ドローイングがリアルタイムで反映しない問題を修正しました
・6/13 リアルイベント用に参加者用QRコードを表示しました
・6/14 4:00 スマホでもドローイングが使えるように修正しました
・6/14 5:00 色情報が抜け落ちるバグを修正しました
・バージョン1.4

【残る問題点】

今回スマホで手描きを有効化させるために画面を固定化させる手法を採りました。
しかし、スマホでホワイトボード部分を最大化してしまうと固定化してるが故に
「縮小できない」
という問題が残りました。

【ついに完成】

その後、悪戦苦闘を経て遂に完成しました!

PCでの表示

スマホでの表示

完成を祝ってくれるGeminiさん

まだ細かい事を言い出せば改善すべき点はあるのですが、一旦はこれで完了とします。

他にも作りたいものが有り過ぎて・・

Leave a Reply

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Related Post