Amazon Q CLIでゲームを作って特製Tシャツをゲットしよう！🏆👕


![title](https://github.com/ishiharatma/public-contents-images/blob/main/build-games-with-amazon-q-cli-202505/title.gif?raw=true)

## はじめに

「[Build Games with Amazon Q CLI and score a T shirt 🏆👕](https://community.aws/content/2xIoduO0xhkhUApQpVUIqBFGmAc/build-games-with-amazon-q-cli-and-score-a-t-shirt)」というキャンペーンを知りましたのでキャンペーンの概要とゲーム作成のノウハウなどを紹介します。

## 完成したゲームのデモ動画

完成形はこのようになりました（4倍速で表示しています）。

実装したコードはAmazon Q のチャットで指示して自動的に生成されたコードのみです。AWSサービスのアイコン画像のみ自分で配置しました（AWS アーキテクチャアイコンからダウンロードするように指示すれば、この作業も不要です）。

![v2-gif](https://github.com/ishiharatma/build-games-with-amazon-q-cli-202505/blob/main/images/game-v2.2-x4.gif?raw=true)

実装されたコードを参照したい場合は、こちらのGitリポジトリにアクセスしてください。まだまだ改善の余地がありますが、Amazon Q CLI の生の出力のまま公開しております。参考になれば幸いです。

https://github.com/ishiharatma/build-games-with-amazon-q-cli-202505/blob/main/amaq-puyo-v2/

### * Amazon Q CLIとは？

Amazon Q CLIは、AWSが提供するAI支援ツールで、コマンドラインから直接AIと対話しながらコーディングができます。従来のコーディング方法と異なり、自然言語で要望を伝えるだけで、AIがコードを生成・修正してくれるため、開発効率が大幅に向上します。

## キャンペーン概要

https://community.aws/content/2xIoduO0xhkhUApQpVUIqBFGmAc/build-games-with-amazon-q-cli-and-score-a-t-shirt

このイベントは、Amazon Q CLIを使ってゲームを開発することで、**特製Tシャツが貰える**というキャンペーンです。

開催期間は、**2025年5月20日から6月20日まで**です。

対象国は次のようになっています。

```text
オーストラリア、バングラデシュ、ブータン、ブルネイ、
カンボジア、中国、フィジー、香港、インド、インドネシア、
日本、ラオス、マレーシア、モルディブ、ミャンマー、
ネパール、ニュージーランド、パキスタン、パプアニューギニア、
フィリピン、シンガポール、韓国、スリランカ、台湾、タイ、ベトナム
```

参加するために必要なステップは次の４つだけです。

- Step1：Amazon Q CLIをマシンにインストールする
- Step2：Amazon Q CLIのチャットでゲームを作る
- Step3：Amazon Q CLIで作ったものをブログまたはソーシャルメディアで共有する。投稿は母国語でよい。
- Step4：Tシャツ引き換えフォームに記入する

## 1. 開発環境の構築：Windows + WSL + VSCode + devcontainer

Amazon Q CLIを効率的に使うため、Windows環境でWSLとVSCodeのdevcontainerを組み合わせた開発環境を構築しました。

### 1-1. 工夫したポイント

- ローカル環境での実施例はあるので、Windows(WSL) + VSCode + devcontainerでの構築に挑戦しました。
- devcontainer での実行のため、[GUIを使用せずにインストールする方法](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/command-line-installing.html#command-line-installing-ubuntu)を実施しました。
- Amazon Q CLI はルートユーザーでのインストールをサポートしていないため、今回は`--force`オプションで強制的にインストールしました。

### 1-2. Dockerfileの設定

```dockerfile
FROM ubuntu:22.04

# Installing required packages
RUN apt-get update && apt-get install -y \
    python3 \
    python3-pip \
    python3-pygame \
    curl \
    unzip \
    fontconfig \
    fonts-dejavu-core \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/*

# Install Amazon Q CLI
RUN curl --proto '=https' --tlsv1.2 -sSf "https://desktop-release.q.us-east-1.amazonaws.com/latest/q-x86_64-linux-musl.zip" -o "/tmp/q.zip" && \
    cd /tmp && \
    unzip q.zip && \
    cd q && \
    ./install.sh --no-confirm --force && \
    cd / && \
    rm -rf /tmp/q && \
    rm -f /tmp/q.zip
```

### 1-3. devcontainer.jsonの設定

```json
{
  "name": "Amazon Q CLI Environment",
  "build": {
      "dockerfile": "Dockerfile",
      "context": ".."
  },
  "features": {
      "ghcr.io/devcontainers/features/git:1": {},
      "ghcr.io/devcontainers/features/aws-cli:1": {},
  },      
  "customizations": {
    "vscode": {
      "extensions": [
        // Install your preferred extensions
      ]
    }
  },
  // Command to run after container creation
  "postCreateCommand": "bash .devcontainer/postCreateCommand.sh",
  // Workspace folder path
  "workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}"
}
```

## 2. 開発プロセス

### 2-1. 基本機能の実装

[ぷよぷよ](https://puyo.sega.jp/portal/index.html)風ゲームを作ることにしました。

最初に、ゲームの基本機能を実装しました。Amazon Q のチャットで以下のような簡単な指示を行ないました。

```text
ぷよぷよのようなゲームを作成します。
pygame 2.6.1を使用します。仕様は次の通りです。

## 基本仕様

落ちてくる「ぷよぷよ」は、AWSサービスのアイコンにしてください。黄色のサービスがないので、EC2で代用します。

赤：CloudTrail
青：Aurora
黄→オレンジ：EC2
緑：S3
紫：Amazon VPC

## 操作

キーボードで操作します。

- ←と→で左右に移動
- ↑またはスペースで回転
- ↓で落下
```

これだけの指示で、完成度の高い**ぷよぷよ風ゲーム**が実装されました。

```python
# ゲームの基本構造
import pygame
import sys
import random
import math

# 初期化
pygame.init()
screen = pygame.display.set_mode((600, 700))
:
:
```

最初に完成したものはこのようになりました。シンプルですがぷよぷよ風になっているのではないでしょうか？

![v1-gif](https://github.com/ishiharatma/build-games-with-amazon-q-cli-202505/blob/main/images/game-v1-x4.gif?raw=true)

### 2-2. 機能の拡張と改良

基本機能ができた後は、より細かい要望を伝えて機能を拡張していきました。

- ぷよの揺れを改善：常に揺れているのではなく、落下直後に1回だけ揺れるようにした。
- 加速落下機能：「↓で落下」という指示ではぷよぷよの機能である加速落下が実装できていないため、明示的に加速落下と指示をした。
- 落下予測機能：「落下予測地点を半透明の円で表示したい」と指示をして、実装させました。
  ![rensa](https://github.com/ishiharatma/public-contents-images/blob/main/build-games-with-amazon-q-cli-202505/down-160.jpg?raw=true)
- 連鎖演出機能：初期実装ではすべてのぷよが一気に消えてしまい、ぷよぷよの特徴である「連鎖」の演出がありませんでした。「連鎖が発生したら順番に消える」という指示をして、アニメーション付きの連鎖システムを実装させました。
  ![rensa](https://github.com/ishiharatma/public-contents-images/blob/main/build-games-with-amazon-q-cli-202505/rensa-160.jpg?raw=true)
- UI改善：トータルスコア、最大れんさ数などの表示追加や、日本語表示といった改善も指示するだけで柔軟に対応できました。
  ![rensa](https://github.com/ishiharatma/public-contents-images/blob/main/build-games-with-amazon-q-cli-202505/left-area-160.jpg?raw=true)
- ゲームタイトル画面の実装：すぐにゲームがスタートするのではなくタイトル画面を実装させました。
  ![title](https://github.com/ishiharatma/public-contents-images/blob/main/build-games-with-amazon-q-cli-202505/title-160.jpg?raw=true)
- コンティニュー画面の実装：初期実装の「Press R to restart」ではなくぷよぷよ風のゲームをコンティニューするかどうかの画面を実装させました。
  ![rensa](https://github.com/ishiharatma/public-contents-images/blob/main/build-games-with-amazon-q-cli-202505/continue-160.jpg?raw=true)

### 2-3. バグ修正と最適化

開発中に発生したバグも、Amazon Q CLIに自然言語のみで指示することで解消していきました。
解消したバグは以下のようなものです。

- 関数定義順序の問題：関数が使用される前に定義されていないといったエラーに対して修正を指示し、コード構造を最適化
- 落下ロジックの修正：「ぷよ」が落下後に空中で止まる問題を解決するアルゴリズムの修正を指示し、バグを解消
- フリーズ問題：いくつかの修正を行なった影響で、ぷよが消えるタイミングでフリーズする問題の修正を指示して、バグを解消
- 日本語表示の問題：フォント設定をシステムフォントを使用するように指示し、日本語文字化けを解消

![repair](https://github.com/ishiharatma/public-contents-images/blob/main/build-games-with-amazon-q-cli-202505/repair-320.jpg?raw=true)

## 3. Amazon Q CLIの活用テクニック

### 3-1. 効果的な指示の出し方

Amazon Q CLIを使う際は、具体的で明確な指示を出すことが重要です。

- ❌ 「ゲームを改善して」→ 抽象的すぎる
- ✅ 「落下後のアイコンが空中で止まる問題を修正して」→ 具体的で明確

#### 指示例

- タイトルなどの文字に関して

```text
文字の色は白で、その周りの縁取りをオレンジにしてください。
ポップな感じの表現にしてください
```

- 連鎖システム

```text
複数消える場合は一気に消えるのではなく、順番に消えるようにしてください。
消えるときは点滅してはじける様に消えてください。
2連鎖以上の場合、「Xれんさ！」という文字を画面中央に表示してください。
文字の色はオレンジで、その周りの縁取りを黒にしてください。
ポップな感じの表現にしてください
``` 

- コンティニュー

```text
ゲームオーバー時に「Amazon Q～」というテキストが上から落ちてくるアニメーション追加してください。
2秒かけて、画面中央まで移動させてください。
その後、10秒のカウントダウンを開始し、 「コンティニューする？」と表示し、「はい」「いいえ」を選択できるコンティニュー画面実装してください。
カウントダウンの時間が経過したら、画面が暗転してタイトルに戻ってください
```

### 3-2. 段階的な開発アプローチ

複雑な機能は一度に実装しようとせず、小さな単位に分けて段階的に開発すると効率的です。

1. まず基本機能を実装
2. 動作確認をしながら機能を１つずつ追加
3. 最後に視覚効果やアニメーションを調整

### 3.3. エラー対応のコツ

エラーが発生した場合は、エラーメッセージを正確に伝えることで、Amazon Qがより適切な解決策を提案してくれます。
エラーログを直接コピーアンドペーストできるため、正確な情報伝達が容易です。

### 3-4. WSL + devcontainer環境のメリット

- 環境の再現性: チーム全体で同じ開発環境を共有できる
- クロスプラットフォーム: WindowsでもLinuxネイティブの環境で開発可能
- VSCode統合: エディタとターミナルを行き来せずに開発できる
- Amazon Q CLI互換性: WSLを通じてLinux版のAmazon Q CLIをスムーズに実行

## まとめ

ゲームを作ることがはじめてでしたが、Amazon Q CLIを使うことで簡単に実装できました。
特に、自然言語のみでやり取りを行ない、コードをまったく書かずに今回のような複雑な機能を実装できる点が魅力です。
私のようなゲーム開発の初心者で専門的な知識がなくても、AIの支援を受けながら自分のアイデアを形にできます。

そして、WSLとdevcontainerを活用することで、Windows環境でもAmazon Q CLIを簡単に実行できます。rootユーザーを使用した場合は、`--force`オプションの活用など、いくつかの工夫は必要ですが、一度環境を構築してしまえばスムーズな開発体験が得られます。

今回のイベントを通じて、Amazon Q CLIを利用した開発の可能性を実感しました。Amazon Q CLIは単なるコード生成ツールではなく、開発のパートナーとして一緒に問題を解決してくれる心強い味方だと感じました。皆さんもぜひ、Amazon Q CLIを使った開発に挑戦してみてください！