Amazon Qでゲームを作ってTシャツをゲットする

# Amazon Q CLI でゲームを作ろう Tシャツキャンペーン
![01キャンペーンサイト.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21347/0d1ebad4-9a5a-48f7-826c-1b4265ee0739.png)
https://aws.amazon.com/jp/blogs/news/build-games-with-amazon-q-cli-and-score-a-t-shirt/
**~~急にTシャツが欲しくなったので~~**、
「Amazon Q」と「PyGame」を触る良い機会だと思い、
それぞれのインストールから始め、最終的にゲームのできるまでをやってみました。

## AWS Builder ID？ 
「AWS Builder ID」とは、
- 普段使っているAWSアカウントとは別物
- 普段のお買い物で使っているAmazonアカウントとも別物
- クレジットカード登録不要の『個人用アカウント』

というものになります。
「Skill Builder」や「Community.aws」、
そして今回の肝である「Amazon Q Developer」など、
無料で提供されている内のいくつかのサービスで使うことができます。

## 今回作るモノ
突然ですが、
「みん◯◯早押しクイズ」というスマホアプリにハマっています。
(ランクはA+とSを行ったり来たりなレベルですが…)
そこでは「フリーマッチ」として、ユーザーが自分で作った問題集を使い、
好きに部屋を立ててみんなに遊んでもらう機能があります。
「ゲームタイトル穴埋め問題」のような部屋もあり、よくお邪魔させていただいています。
その「ゲームタイトル穴埋め問題」を予習したいなと考え、
今回「Amazon Q Developer」くんに作ってもらいました。

## 環境作り～実際に作ってもらうまで
キャンペーンサイトの各Stepを参考に進めていきます。
### Step1「AWS Builder ID」を作る
https://community.aws/builderid

「Sign up with Builder ID」のボタンをクリック。
別途、アカウント作成の小窓が表示されるので、使用するメールアドレスを入力して次へ。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21347/24109fb3-6f21-49d9-8ecd-680fce28887d.png" width="25%">

使用する名前を入力して次へ。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21347/d3437354-b2a5-4774-a5a6-8dc0ed5f6517.png" width="25%">

先ほど入力したメールアドレスに「認証コード」が届くので入力して次へ。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21347/632bd869-130e-43c3-b22b-4d68ce5d89bf.png" width="25%">

パスワードを設定して「AWS Builder IDを作成」をクリック。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21347/97713c5f-7e7f-44a6-9d9f-9f8169dde0bd.png" width="25%">

小窓が再び「AWS Builder ID の作成」画面になるので、今度はサインインを実行。
すると小窓が閉じ、元のタブでサインイン状態となります。
「Claim your alias」とエイリアス(要はハンドルネーム)を聞かれるので、
お好みのを入力して「Claim」をクリック。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21347/c170229d-4ee4-43be-8887-743d88e211fc.png" width="50%">

これで「AWS Builder ID」の準備が整いました！

### Step2「Amazon Q CLI」「PyGame」のインストール
今さらですが、今回の作業環境は以下のとおりです。
- Windows11 + WSL(Ubuntu)
- Python3はインストール済み
- VSCode

また、Pythonはほぼ未履修状態です。
まずは「Amazon Q CLI」のインストールから。

https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/command-line-installing.html

リンク先のUbuntuの項目を参考にインストールを進める。
(今回はGUI環境ではないので「Installing with a zip file」を参考に進めました)

```shell
$ sudo apt-get update
$ sudo apt-get upgrade

$ ldd --version
# ldd (Ubuntu GLIBC 2.39-0ubuntu8.4) 2.39

$ curl --proto '=https' --tlsv1.2 -sSf "https://desktop-release.q.us-east-1.amazonaws.com/latest/q-x86_64-linux.zip" -o "q.zip"
$ unzip q.zip
$ ./q/install.sh
# 以降、選択肢は基本デフォルトで。
# Select login methodでは「Use for Free with Builder ID」を選択。
# 途中、ブラウザを介しての認証が入ります。
```
最後に「Logged in successfully」と表示されインストール完了。
一度ターミナルを抜け再度入り直すと
```shell
Amazon Q now supports AI-powered inline completions!

To disable run: q inline disable
```
と表示されました。

次はVSCode「Amazon Q」拡張機能をインストール。
![04拡張機能のインストール01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21347/bba6d021-9ad3-4f1b-819f-17a289c87222.png)
Ctrl + Shift + Xで拡張機能を開き「Amazon Q」と入力。
続けて「インストール」をクリック。
完了するとVSCode右下に通知が届きサインインを求められるので、
「Personal account」を選択して「Continue」をクリック。

![04拡張機能のインストール02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21347/dac1ccdd-6c0d-4e8a-9f97-087d92e44914.png)

サイドバーに「AMAZON Q: LOGIN」が表示されるので、
「Personal account」を選択して「Continue」をクリック。
![04拡張機能のインストール03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21347/e1611782-8c93-4535-9969-586086c8a045.png)

再びブラウザで認証を求められるので許可する。
認証が終わるとVSCodeでAmazon Qの「ようこそ」画面が開かれている。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21347/3fe171c1-b153-47bb-aa2b-4a2869d2724d.png" width="50%">

最後に「PyGame」をインストール。

https://www.pygame.org/wiki/GettingStarted

「Unix Binary Packages ＞ Debian/Ubuntu/Mint」の方法でインストール。
```shell
$ sudo apt-get install python3-pygame
$ python3

# 対話モードに入った後にインストール確認
$ >>> print(pygame.ver)
# 2.5.2
```

### Step3 Amazon Qくんに頑張ってもらう
いよいよAmazon Qくんに~~丸投げ~~お願いして作っていってもらいます。

VSCodeからCtrl + Shift + Pで「コマンドパレット」を開き「Amazon Q」を入力。
![05制作01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21347/5b7bcc39-df5d-43fd-96c5-d63d3046fc7a.png)
「Open Chat」を選択。

するとサイドバーにチャット欄が表示されるので、指示を出してみます。
手始めに…
```
PyGameで「ゲームタイトル穴埋め問題」アプリを作りたいです。
【画面構成】
・解答の制限時間(10秒)の「残り秒数のテキスト」「減少するプログレスバー」
・問題文テキスト(例：スーパー◯◯◯ブラザーズ)
・解答用ボタン

【要件定義】
・問題文表示と同時に制限時間のカウントダウン
・解答用ボタンを使い1文字ずつタップ(クリック)し解答を入力
・1度に表示させる解答用ボタンは「正解の1文字＋誤答用のダミー3文字」
・1文字をタップする事に「次の正解の1文字＋誤答用のダミー3文字」で切り替えて表示
・正解の文字列を全てタップできたら、でかでかと「正解！」のテキスト＋「丸線」を表示
・途中、誤答文字を1度でもタップしてしまったら「不正解…」のテキスト＋「バツ印」を表示
・以上を総問題数分繰り返す。
・全問題が終了したらリザルト画面に切り替え＋「再挑戦」「終わる」のテキスト表示
・問題用のゲームタイトルはGoogleスプレッドシートから読み込むか、コード内のJSONで管理する。
・もちろん出題される問題の順番はランダム
```
まずはこんな感じでチャットへ投げてみました

(コーヒーブレイク)

![05制作02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21347/adc2bd40-42c5-4586-a8a8-321974ae463f.png)
おお…？

![05制作03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21347/c7a8c637-f287-4f74-8fc9-faa91bbfbd63.png)
おおお…？

![05制作04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21347/5f12acad-3469-4139-9b72-80abe682aaf7.png)
おおおお！？

![05制作05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21347/8c1d4870-66cd-49bc-98d0-c61fe01be29e.png)

**できちゃいました**
早速実行してみます。
```shell
python3 main.py
```

![05制作06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21347/07beabea-df11-435f-b279-38cd04805fcb.png)

**文字化けしちゃいました**
Amazon Qくんへ、追加でチャットを投げます。
```
・日本語が文字化けしちゃいました…
・制限時間のテキストは「小数点以下第二位」まで表示させたいです。
```

![05制作07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21347/77688452-b746-4473-87b1-0bf2c6a791cd.png)
![05制作08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21347/f6dd72f9-1d0b-4fcc-8d2d-7c71ec42f28a.png)

**直りました**
ここまでで自分が打ったコードは「 **0文字** 」です。
とりあえずゲームとして動くようにはなりましたが、

- 各種テキストが重なって表示されてしまう
- 制限時間が見切れてしまう
- 無解答でのタイムアップ時、真っ白になってしまい「再挑戦」も「終わる」も表示されない

という問題点があったので、さらにお願いします。
```
・各種テキストが重なって表示されてしまう
・制限時間が見切れてしまう
・無解答でのタイムアップ時に真っ白になってしまい「再挑戦」も「終わる」もひょうじされない
```
(「表示」を開いて「ひょうじ」としてしまったけど大丈夫でしょ…)

![05制作09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21347/65a9382e-5c30-47f3-b649-f6d65578369c.png)

一晩どころか**一瞬で**直してくれました。
まだ細かい修正点は残っている状態ですが、自分用のアプリとしては十分な出来だと思います。

## 総評
Tシャツ欲しさから始まった「Amazon Q(とPyGame)」ですが、
指示以外では1文字も打たずに、ここまでのモノができちゃう時代なんですね。
アカウント作成から制作まで、順を追って行くだけで特に詰まるところもありませんでした。
今のところ、業務的に使う場面はないかもですが、
サンデープログラミングならぬ「サンデー指示出し」で色々と試してみたいです。

### ※もしかして
Ubuntuへの「Amazon Q」インストールは必要なかった…？？？

### ※心配事
「できるだけ革新的なゲームを作ってみてください」とあるけど大丈夫かな…
(2025年6月18日 時点でまだ応募をしていない状態)