はじめに
Amazon Q CLIを使ったゲーム開発キャンペーンでTシャツがもらえるということで、AIとの協働で「フォント違和感ゲーム」を作ってみました。このゲームは、流れるてくる文書の中からフォントの違いを見つけてクリックするゲームです。2,3時間でゲームを完成させた開発過程を、5つのステップに分けて紹介します。なお著者はこのゲームで使われているHTML, CSS, javascriptに関する知識は全くありません。なので実装はすべてAmazon Qが行っています。
Amazon Q CLIのインストール（WSL）
WSL環境でAmazon Q CLIをインストールします。詳細な手順は公式ドキュメントを参照してください。インストールが終わっていればターミナルで q を打ち込めば対話形式で開発していくことができます。
🎯 Step 1: ゲームの構想の壁打ち、仕様の決定
「文字列の中の違和感があるフォントを指摘するゲーム」の開発をAIと会話しながら決定しました。最初は普段使っているpythonで開発を考えていましたがWebブラウザで動かしたかったため断念しています。
策定された基本仕様：
- ゲーム名：フォント違和感ゲーム
- コンセプト：文書内のフォント異変を発見するゲーム
- 技術：HTML + CSS + JavaScript
- ルール：制限時間内にフォントの違いを見つけてクリック
🛠️ Step 2: プロトタイプ開発
まずざっくりとプロトタイプをAIにつくってもらいます。作ってもらった機能は以下です。
- 文書のテンプレートのランダム生成
- 異なるフォントをランダムに紛れ込ませる仕組み（Noto Sans JP vs Noto Serif JP）
- クリックを判定するシステム
プロトタイプを触っているうちに以下の課題が見えたので追加で対応してもらいます。
- 全ての文書に必ず異変を配置（はじめは異なるフォントが入っていないパターンも用意していた）
- 異変文字への直接クリック方式を採用
✨ Step 3: 難易度の調整
基本的な箱はできたため、難易度を徐々に上げていくようにしました。当初は明朝体とゴシックを見分けるだけでしたが、デザイン書体のようなわかりやすいものから始めていくことにしました。
難易度:
- Easy：Noto Sans JP vs Courier New（等幅フォント）
- Normal：Noto Sans JP vs Noto Serif JP（ゴシック vs 明朝）
- Hard：Noto Sans JP（通常 vs 太字）
また、デザイン書体はより初級向けとして違いの分かりやすいフォントを選択するように変更しました
🍣 Step 4: ゲームシステムの変更
最初は無限にリトライができて、一定問題を解き終わるとクリアの仕組みでした。これを変更して時間内に何問とけるかというシステムに変更しました。またミスのペナルティは持ち時間が減る仕組みに変更しました
新システム仕様：
- 制限時間：60秒
- 誤答ペナルティ：-5秒
- レベルアップ：3正解ごと
また問題が流れるようなアニメーションの調整や、正解した時のポップなどの調整も行ないました。
🔧 Step 5: 完成とデプロイ
不要なファイルを削除してもらったり、コードに適切なコメントをつけてもらったりを行ってもらいました。
またS3で静的ホストするための手順についてまとめてもらいました(AWSの権限を渡すのは少し怖かったので手順書だけ作成してもらっていました)
ゲームの内容
ゲーム画面はこんな感じで、違和感のある部分 S の部分をクリックしていきます
正解するとポップアップが出ます！
間違えると怒られてペナルティで5秒減らされます。
最後にハイスコアが出ます
まとめ
ゲームや、関連する周辺知識が全くなくてもゲームを作成することができました！Agentを使ったコーディングが初めてだったので、次行うときに気を付けたいこととしては
- チャットで行われた内容は要約してログ用にファイルに記載してもらうようにAIに依頼する。セッションがきれると過去の履歴データが吹っ飛ぶので、その場合をログを読んでこれまでの流れを理解してもらう
- 〇〇の機能を戻してや、一つ前に戻しても完全に同じ状態に戻るとは限らないので、チャットのファイルのたびに
git commitしてもらうように依頼する。ひとつ前に戻してといわずに、ひとつ前のコミットに戻してというように依頼する - できるだけ具体的に指示を行うようにする。例えばスタートボタンを削除してというとスタートボタンの要素だけが削除されてゲームを始めれないようになってしまう...
になります。AIに限らず人間とチームで開発しているときには気をつけないといけないことですね...
本業はゲーム作成ではなくSQL書いたりPython書いたりがメインですが、そちらでも利用できそうなので業務にAgentを使ってみようと思います！