【Amazon Q CLI】プログラミングまったくできない私がゲームを作ってみました！

# はじめに
プログラミングがまったくできない私が今話題になっているキャンペーンに参加してみました！
(なんでも挑戦してみよう精神でえいや！で参加してます(笑))
[Amazon Q CLI でゲームを作ろう](https://aws.amazon.com/jp/blogs/news/build-games-with-amazon-q-cli-and-score-a-t-shirt/)

Amazon Q CLIを使ってプロンプトだけでゲームを作ります。
そしてキャンペーンに応募(ブログや動画をSNSに投稿)すればTシャツも貰えます！



# 作成するゲームの概要
とりあえず暇つぶし程度にできるゲームを作って見ようと思いましたが、パッと浮かばなかったので、ゲームの候補もAIに任せてみて、候補の中から選びました。

■ゲームの内容
複数マスの四角いマスがあってランダムマスで１マスだけ黒色に変わるので変わった色のマスをクリックして時間内に何マスクリックできたかを競うゲームです。
・難易度も選択できるようにしたい。

■特徴
・マウスクリックのみ
・難易度ごとにマスが増える
・難易度を選択できる
　→Easy：3x3
　→Normal：6x6
　→Hard：9x9



 # 作業工程
 ①環境準備
 ②とりあえず初期バージョンをAmaozn Q CLIに依頼してみる
 ③動作させてみて気になった箇所をAmaozn Q CLIにフィードバックして修正してもらう
 ④追加機能を実装してもらう
 ⑤自分では浮かばなかった追加の機能についてAmazon Q CLIに聞いてみる
 **※Amazon Q CLIとのやり取りは日本語で行います。**



 # ①環境準備
■アカウントの取得
AWS Builder IDを持っていない方は[リンク](https://community.aws/builderid?trk=b085178b-f0cb-447b-b32d-bd0641720467&sc_channel=el)からcommunity.aws ユーザー名を取得する必要があります。


■Amazon Q CLIのインストール
Amazon Q CLIをインストールする前に、作業端末でWSLを有効化し、Linux環境をセットアップしました。
**※WSL有効化の詳細な手順は割愛します。**

①unzipのインストール
以下のコマンドを実行し、unzipをインストールします。
```
sudo apt install unzip
```
②Amazon Q CLIのモジュールのダウンロード
以下のコマンドを実行し、Q CLIのモジュールをダウンロードします。
```
curl --proto '=https' --tlsv1.2 -sSf https://desktop-release.codewhisperer.us-east-1.amazonaws.com/latest/q-x86_64-linux-musl.zip -o q.zip
```
lsコマンドで q.zipが存在していればOKです！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098236/731ddb84-1e44-4549-80a5-6f6ec60b5363.png)

③q.zipを解凍
以下のコマンドを実行し、q.zipを解凍します。
```
sudo unzip q.zip
```
以下のように解凍が成功したらOKです！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098236/a1a15b57-88cd-4027-a535-edaf74e5a2bb.png)

④ディレクトリを移動
以下のコマンドを実行し、ディレクトリを移動します。
```
cd q
```

⑤権限の変更
以下のコマンドを実行し、権限を変更する。
```
sudo chmod +x install.sh
```

⑥Qのインストール
以下のコマンドを実行し、Qのインストールをする。
```
./install.sh
```

⑦以下のように表示されるためYesにてEnterキーを押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098236/e3190c05-f553-4608-873b-b0a9d3ab874e.png)

⑧以下のように表示されるため上の選択しにてEnterキーを押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098236/73862c64-a110-491a-baa8-3debb7bd3571.png)

以下のようにURLが表示されるめ、ブラウザ上にURLを入力する。
白塗り部分は、ユーザごとに異なります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098236/6f5cfb36-d97b-4db2-bcf0-7ab2a206799c.png)

Builder IDのログインを求められるので、ログインし、Amazon Q Developerのアクセスを許可し、リクエストが承認されたらOKです！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098236/fea93d96-b30c-4c88-b80b-ed578cbc783d.png)

承認後、プロンプトが以下のようになっていればOKです！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098236/482051c9-9d82-4a1a-b808-29b36670b38f.png)
ここで一旦OSの再起動を実施してください。

⑨Qの起動
再起動後、再度プロンプトを起動し、`WSL`→`q`の順番で入力し、画像のようになればOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098236/2551a3a0-19b0-4129-aab0-78d1f26b7645.png)

⑩PYGAMEのセットアップ
以下のコマンドを実行し、PYGAMEをインストールする。
```
py -m pip install -U pygame --user
```
以下のようになっていればOKです！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098236/7f99ac6b-7ad5-40d9-b234-435c92e2c690.png)

### 環境の準備はこれで完了です！後続でAmazon Q CLIとのチャットを実施しましょう！



#  ②とりあえず初期バージョンをAmaozn Q CLIに依頼してみる
Amazon Q CLIを起動し、最初に下記プロンプトで作ってもらいました。

以下が実際のプロンプトです。
```
日本語で会話しながら一緒にゲームを作成しましょう。
まずは前提条件です。
　①PYGAMEで動くゲームをつくる
　②ファイルは表示ではなく出力　でお願いします。
次はゲームの仕様です。
複数マスの四角いマスがあってランダムマスで１マスだけ黒色に変わるので変わった色のマスをクリックして時間内に何マスクリックできたかを競うゲームです。
```
プロンプトを実行後、ゲームは作成してくれましたが、実行環境が整っていないからゲームを起動できない旨をAmazon Qから返してきてプロンプトが停止しました。
ここで驚いたのは、`ゲームが起動できるように足りないものをインストールしてくれ`と雑にお願いしたところ、ゲームを起動するために必要なものをAmazon Qがエラーチェック・インストール・修正・テストまでやってくれました…　すごいですよね…

以下にゲームが起動できるまでのトラブルシュートのスクショを載せておきます。
画像①：ゲーム作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098236/94a31957-658e-49c2-a6f8-134b1a60c0be.png)

画像②：トラブル(Pythonコマンドが見つからない)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098236/ce0bc2a1-c5dd-4934-aa5b-b0e2747c6b20.png)

画像③：トラブル(PYGAMEがインストールされていない)
※Pythonに詳しくないため、なぜ準備したはずのPYGAMEがなかったのか不明でした。
※PythonとPython3では違う？？？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098236/9138fb73-0249-4551-b761-c174d5a91673.png)

画像③：トラブル(pipがインストールされていない)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098236/66181758-4d8a-43be-b0fb-d5d04d409b60.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098236/370f2075-130f-4376-8afa-c70754eb28df.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098236/8fb393ab-e1ed-4515-90f0-bf3c090e43dd.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098236/778e3258-1460-4634-8c2c-a89cf01723ff.png)


トラブルを乗り越えて出来上がったゲームは以下です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098236/69b61ee1-b6de-48cc-9feb-effc777ce6df.png)

初期バージョンとしては文句なしの出来上がりできたが、文字化けしていました。



#  ③動作させてみて気になった箇所をAmaozn Q CLIにフィードバックして修正してもらう
とりあえず以下をフィードバックしてみました。
①文字化けの修正(日本語にしてほしい)
②Easyレベルとして、3x3で制限時間を10秒にしてほしい。

以下が実際のプロンプトです。
```
作成ありがとうございます！初期バージョンとしては良いと思います！
ですが、より良いものを作成するために改善点をお伝えしますので、修正してください。
①文字化けの修正(日本語にしてほしい)
②Easyレベルとして、3x3で制限時間を10秒にしてほしい。
```

基本的に、改善点を伝える→動作確認を繰り返しました。

色々改善を繰り返してみて、最終的に以下のようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098236/9ef722a0-9a22-467d-a798-bbdea66a6403.png)
文字化けは直らなかったので、英語版にしてもらいました。
`Easyレベルとして、3x3で制限時間を10秒にしてほしい。`という要望には答えてくれました！
これでも十分すごいですよね！



#  ④追加機能を実装してもらう
最終形として以下の機能を実装してみたいのでAmazon Q CLIに依頼しました。
①タイトル画面の追加
②難易度の追加
　→Easy：3x3
　→Normal：6x6
　→Hard：9x9
③見た目向上
④ハイスコア機能

以下が実際のプロンプトです。
```
ゲームの追加機能の要望です。
1.タイトル画面を追加し、以下の難易度を選択できるようにしてください。
　→Easy：3x3
　→Normal：6x6
　→Hard：9x9
2.各難易度で時間も選択できるようにしたい
　→10秒
　→20秒
　→30秒
3.見た目向上
4.ハイスコア機能
```

出来上がったゲームは以下です！
UIもガラッと変わって良くなりましたよね！
動作確認してみて、Ver.1.0.0としてのゲームが完成しました！

■タイトル画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098236/3802f51a-f4fb-4e2b-9eb3-2a40714f4288.png)

■「START GAME」→「難易度選択」→「制限時間選択」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098236/d501ced1-1881-4229-9d54-be56d349e5f5.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098236/6fecd0ba-c96e-4bbd-9e6f-5a6519a3d4cb.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098236/9cd98366-3eec-4fd0-8540-0fc09ad34d89.png)

■GAME OVER画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098236/c332a7b5-8227-404d-81a6-815a8920c08d.png)

■HIGH SCORES画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098236/ca7806e0-704d-45c2-90c3-176d80e06f80.png)
補足：具体的な実装について伝えていませんでしたが、ハイスコアはJSONファイルで永続保存してくれているみたいです。



#  ⑤自分では浮かばなかった追加の機能についてAmazon Q CLIに聞いてみる
現時点で十分遊べるレベルですが、もっと面白くなるアイデアについて聞いてみました。

以下が実際のプロンプトです。
```
ここからもっと面白くなるアイデアがあれば教えて！
```
ここから8個ほど出してくれました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098236/3ed0d14b-2de5-417d-b010-bec9e63b54c0.png)

なんと実装優先度まで出してくれています…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098236/9506bf93-1172-437e-838d-e3765b61efe5.png)

今回のAmazon Q CLIが提案してくれたアイデアは実装しませんが、マルチプレイの機能の実装について気になったので聞いてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098236/475cb50a-9f8d-47d7-8b97-0bfe03581752.png)
いつかマルチプレイ機能も実装できたらいいですね！



# まとめ

* プログラミングができない私でも、対話形式でゲームを作れる。
* 割とざっくりとした要望でも理解してくれる。
* ゲームがどうゆうプログラムで実装されているのか/修正箇所を明示してくれるのでどんなことをしているのかはある程度理解できる。分からなかったらAmazon Q に聞いてみれば回答してくれるので安心できる。



# 完成したゲーム
今回作成したゲームはGitHubに公開いたしましたので、遊ぶことができます！
https://github.com/htani0817/click-game/tree/main
※GitHubに投稿するにあたって必要なRead.meの作成とリポジトリの作成、ローカルからのプッシュもすべてAmazon Q がやってくれました。楽ですね…