Google AI Studioでバカラ作ってみた💵 🎰 🎲
はじめに
年末にマカオへ行く機会がありまして、ギャンブルが合法ということもありカジノでバカラをやってみようとなりましたが、肝心のルールを知らなかったのでGoogle AI Studioを使って自分用のWebアプリを作ってみました 💵 🎰 🎲
アプリとして公開するまでの総時間としては4時間ほどでした
自分で作ってみて、会社で展開するならどうするのが良いかなどの気づきを書いてみます
最終的にできたもの
開発画面 & プレイ画面
ルール確認画面
過去スタッツの確認画面
雑に要件定義する
- ⭐一度読み込めばオフラインでもプレイできること
- ⭐モバイルサイズに最適化されていること
- ⭐の要件は飛行機の中でもプレイしたかったので重要事項です ✈️
- ルール詳細を確認できること
- 過去のスタッツを確認できること
- 罫線とか大路っていわれるみたいで、これを参考に次のゲームの勝利を予想するようです
- これが醍醐味っぽかったので機能として取り込むことにしました
- ベットしないでゲームを進めることができること
- 1ゲーム進める
- 10ゲーム進める
作ってみる
すっごい雑にプロンプト投げてみました
バカラのゲームを作ってください
ルールを常に確認できるようにしてください
ゲーム結果を最大100ゲーム分表示してください
日本語で作成してください
ゲームの推移が分かるようカードの絵柄を表示するようにしてください
出てきたもの
使ったモデルはGemini3 Flashで生成時間は30秒ていど
最後のものから考えるとクソ安っぽいものの、意外とちゃんとしたものがでてきました
ゲームとしての動作も問題なかったものの、プロンプトを練らずに投げたり要件を入れ忘れていたりで調整が必要そうです
ひたすら調整
細かくバージョンが残っていませんでしたのでざっくり流れになりますが以下のように修正を加えていきました
- まずはモバイルへの対応
2. 自分がiPhone15Pro を利用しているのでそこで動くよう指示を与えてモバイル対応 -
演出の追加 (ルールを覚える目的から逸れている部分)
4. カードを開いた時の1枚ずつめくられていたので、2枚同時表示
5. ゲームの推移の表示 (開始から終了までの状態遷移)
6. 勝利時の演出追加 - スタッツの調整
8. 大路は勝ちが重なった場合は下に積み上げて、別の勝者の場合は横にずれる仕様に変更
9. 勝率の表示 (全ゲーム/過去50回/過去100回) - 機能追加
11. オートプレイの追加 - 表示調整
13. ルールはボタンを押してモーダル表示に修正
14. バンカーが奥でプレイヤーが手前になるよう修正
15. 高級感ある雰囲気のデザインに修正 (雑すぎるw)
16. ボタンサイズの調整
公開する
デプロイボタンからのデプロイが一番最小工数だったので、そちらからデプロイしました
(デプロイするには有料のGoogle Cloudプロジェクトが必要です、事前に登録しておいてくださいな 💵)
初回デプロイした際にエラーが出たのですが再度ボタンを押したらすんなりデプロイできました
エラー内容の記録がなくなってしまったのですが、このエラーの原因探るのに30分ほど無駄にした記憶があります 🙀
最終形を確認してみたい人用にリンク
🔗 https://baccarat-royale-689294672224.europe-west1.run.app/
感想や会社での展開を考えてみる
感想
生成時間
修正回数を重ねていくとFlashのモデルを使っているにも関わらず生成までに3分〜5分かかるようになっていった点がきつかったです
作っていた時は夜中で他のことをしながらで気にはしていなかったのですが、高速モデルでこの生成時間はかなり待つなぁという感想を持ちました
クオリティ
一発目で出てくるアプリケーションの質の高さにはびっくりしました、その反面で修正については、かなりしっかりしたプロンプトにしないと指示を無視されたり中途半端な実装になりました
Githubとの連携
生成されたコードをAI StudioからGithubに保存することは可能です
(リポジトリを新規作成して保存するのみで、コードの同期は不可)
保存先の選択肢としてある感じ、相互に同期を取ることがでいないので開発サイクルに組み込んでAI Studioを使うのは現時点では不可と考えるのが良さそうです。使うなら初回のみ
会社での展開にて気を付けたいこと
プロンプトについて
自分のように雑に投げて作り込んでいく人が続出することが容易に想定できる
(そして、待った結果でてきた生成物に勝手に失望して使えない判定することも容易に想定できる)
ですので、このあたりはこれまでシステム開発に携わってきた人たちがサポートしてあげるか、要件定義してくれてプロンプトを生成するエージェントを事前に作っておくと良さそうだなと感じました
見た目や演出は後回しにした方が良き 🎯
要件定義にて言語化できていなかった点なので調整の際に演出の追加をこだわってしまって、無駄に時間を使ってしまいました
いわゆる非機能要件の部分だと思いますが、感覚に頼るところが大きく言語化できない部分は無視して進める勇気か、言語化してプロンプトに組み込んであげる必要がありそうです
どんなユースケースがありそうか
AI Studioだけではバックエンドの開発ができずGithub上の変更をAI Studioに同期できないので以下のような使い方のみになりそうです。
- フロントエンドのみで完結するもの
- プロトタイプの作成
見た目が出力できてインパクトがありますが、思ったより業務の機能実装に使われないのかなって印象です
デプロイは気を付ける
デプロイボタンが付いているので、めちゃくちゃ簡単にアプリ公開できます
ただクラウドインフラのセキュリティを考えずに使われることが簡単に想定できるので、情シスやクラウドインフラを見ているチームと相談して前提環境は作ってあげると良さそうです
その他
データはどこに？
保存ボタン
これを押した場合の保存先はGoogle Driveになります
Shareするときもここの設定をみるようで、リンクを知っている全員に閲覧権限をつけていてもGoogleアカウントが必須になります (ドライブのファイルとしての扱いだからだと思われ)
デプロイボタン
デプロイした場合はソースコードはGoogle CloudのCloud Storageに保存されます
Cloud Runで動くDocker ImageはArtifact Registryに登録されていましたのでデプロイボタンクリックで自動的に作られるっぽいです
最終的にCloud RunでDocker Imageをつかい、ボリュームとしてCloud Storageをマウントしてサービスとして動くという形をとっているみたいです
ローカルでの開発とデプロイについて
Githubとの連携は可能なので、プロトタイプとしてAI Studioで一通り作ったあと開発環境に落としていくのが良さそうです
- AI Studioでプロトタイプを作り込む
- Github保存
- ローカル環境で追加の開発
- 動作環境に合わせて必要なデプロイプロセスの構築
例えばCloud Runで動かしていく場合は、Dockerfileを作っておいてCloud Runのサービス登録時にCloud BuildにてDockerfileからイメージをビルドしデプロイする形などが良いです (もろもろGithub Actionsで自動化するのも良いかと 👌)
おわりに
Google AI StudioはVive codingして動くものが作れる体験としてはよく個人や少数で使うのには非常によいプロダクトだと感じました
しかし、実際に会社で使えるかっていう観点だと動作スピードやセキュリティ、バックエンドが作れず欲しいアプリにならないなど絶妙にかゆいところに手が届かないなぁとも同時に感じました (AIについてもシステム面についてもリテラシーが必須)
とはいえ、使い所はあると思うので情シスとして環境を整えておきたいと思います
またバックエンド含めたアプリの開発はFirebase Studioがあるのでこちらを使えるよう情報の取り込みと訓練していくことも並行して進めていきたいと思います
ほなまた 👋
Discussion