生成AIお絵描きバトルゲーム「Doodle Fighter」の開発プロセスや、FastAPI、Supabase、Gemini APIの実践的なインテグレーション事例を紹介する技術ブログです。
ブラウザのCanvasで描いた落書きを、高速かつブレなくAIにプロファイリングさせるためのシステム設計とPydanticによる厳格なJSON出力制御の解説。
Serverless環境特有のデータベース接続制限のバースト回避手法と、戦闘力（total_power）の絶対値差を使った実力が近い相手を高速に抽出するSQL設計。
AI API呼び出し課金の高騰を防ぐためにCanvasのお絵描き操作データ（描画時間、ストローク数）を利用したチート・Bot対策とIPベース制限（slowapi）の実装。
キャンバスに「文字」を描いてシステムプロンプトを上書きしようとするVisual Prompt Injectionの脅威と、システムプロンプトによる二重ガードレールの実装。
適当な線の連打や塗りつぶしによるスコア稼ぎ行為（Scribble Attack）を、メタデータとVision AIの造形認識で検出・弾くロジック。
Cloudflare PagesのClean URLs機能と静的_redirectsの衝突で発生した308リダイレクトループ問題の原因究明と修正手順。
オリジナルキャラクターカードへの個別URL付与と、Twitter/X共有時に動的OGP画像をプレビュー表示させるためのルーティング構成手法。
会員登録ゼロの匿名プレイヤーに対し、国旗・国名メタデータを安全にDB追加するためのAlembicマイグレーションとUnicode国旗変換手法。
初心者向け公式プレイガイド。ゲームの流れ、お題に沿った描き方のコツ、戦闘力やBig Five性格パラメータの診断メカニズムの完全解説。
robots.txtのクローラーブロック解除やモバイルレスポンシブUI崩れ防止など、AdSense審査通過に向けた実証ログ。
大型フレームワークに依存せずVanilla JS下で静的DOMと動的生成UIを多言語化した知見と、Playwrightによるi18n・PWA表示の自動E2Eテスト手法。
自己完結型AAAパターンによるキャンバス自動描画、AIキャラクター診断、多言語UI即時切り替え、0件状態の動的テキスト自動検証テクニック。
Webブラウザ上で動作するQTEバトルのリアルタイム実装手法と、ゲームの拡張性を劇的に高めるスキルデータのDBマスタ化の実践録。
Trivyによる脆弱性・シークレット漏洩の自動ブロックと、AIエージェントによるDependabot PRのリスク判定を組み合わせた、疲れ知らずのセキュリティ運用術。
当ブログは、生成AI×Webゲーム「Doodle Fighter」の制作・運用を通じて得られた、FastAPI、Gemini API、Supabase、Cloudflare Pages、CI/CD等の実践的な実装知見とアーキテクチャを体系化して公開しています。