【アプリ開発】AWSセキュリティを学べるテトリスパズルを自作してみた！！

いつも記事を読んでいただきありがとうございます！
モブエンジニア（[@mob-engineer](https://qiita.com/mob_engineer))です！

Amazon Q Developer for CLIでゲームを作る企画を通じて簡単なゲームを実装してみましたが、**社内外の教育活動に活用できるゲームを実装したい**と思い、第2弾を実装してみました。

## 基本方針

基本的にAmazon Q Developer for CLIへの指示のみで実装しました。そのうえで、コンセプトとして次のような考えを持って実装しました。

- AWSセキュリティを学べるテトリスパズル
- ガバメントクラウド含むセキュリティ要素を含んでいる
- 日本語・英語双方に対応できるようする

## ゲーム内容

実装したゲームについては以下GitHub.ioで公開しています。以下URLから遊ぶことができるため、遊んでみてください。

#### ゲームURL

https://masakiokuda-eng.github.io/cloud-guardian-puzzle/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846878/ec0f28c5-7374-4f32-a3e4-ec02d23cb17c.png)

- 英語対応　※一部日本語なので要チューニングが必要ですが

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846878/796eb7cd-a11c-40f3-a887-6a4b8ed48b99.png)

- チュートリアル画面　※配置例はアニメーションで動くようにしています

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846878/bb878ad2-0c29-47ca-abf8-6ac86121fab6.png)

- プレイ画面

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846878/5bfe099c-5fd6-43b5-bd82-3652fc5ef66c.png)

セキュリティ対策を考慮した実装ができれば高得点が取れるように実装しています。

## 開発まわりのこだわり

リポジトリについては以下URLをご確認ください。

#### リポジトリ

https://github.com/MASAKIOKUDA-eng/cloud-guardian-puzzle

ディレクトリ構成としては次の通り作成しました。

```text
├── assets/                  # 静的アセット
│   ├── images/              # 画像ファイル
│   │   └── aws/            # AWSサービスアイコン
│   ├── sounds/              # 音声ファイル
│   └── styles/              # CSSスタイルシート
├── dist/                    # ビルド成果物
├── public/                  # 公開ファイル
│   ├── assets/              # 公開用アセット
│   └── index.html           # メインHTMLファイル
├── src/                     # ソースコード
│   ├── components/          # Reactコンポーネント
│   │   ├── common/          # 共通コンポーネント
│   │   ├── game/            # ゲーム関連コンポーネント
│   │   └── pages/           # ページコンポーネント
│   ├── core/                # コア機能
│   ├── i18n/                # 国際化
│   ├── levels/              # レベル定義
│   ├── models/              # データモデル
│   ├── puzzles/             # パズル定義
│   ├── tetris/              # 2Dテトリス実装
│   │   ├── components/      # テトリス用コンポーネント
│   │   ├── engine/          # ゲームエンジン
│   │   └── models/          # テトリス用モデル
│   ├── tetris3d/            # 3Dテトリス実装
│   │   ├── components/      # 3Dテトリス用コンポーネント
│   │   ├── engine/          # 3Dゲームエンジン
│   │   └── models/          # 3Dテトリス用モデル
│   └── utils/               # ユーティリティ関数
└── tests/                   # テストファイル
```

今回の実装ではNode.jsを利用したので、npmコマンドでのビルド⇒デプロイ処理が必要でした。ローカルで遊ぶのであれば単純にサーバーを構築すれば事足りるのですが、GitHub.ioでの公開を目的としていたため、実装に時間がかかりました。

そのうえで、実装方針として**GitHub Actionを用いてデプロイ用のブランチへビルド生成物を配置**する方式を取り入れました。その際、作成したDeploy.ymlは次の通りです。

```yml
name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

permissions:
  contents: write

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v3

      - name: Setup Node.js ⚙️
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'

      - name: Install dependencies 📦
        run: npm ci

      - name: Copy assets to public directory
        run: |
          mkdir -p public/assets/images/aws
          cp -r assets/images/aws/*.png public/assets/images/aws/

      - name: Build 🔧
        run: npm run build

      - name: Create .nojekyll file
        run: touch dist/.nojekyll

      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          folder: dist
          branch: gh-pages
          clean: true
```

また、Package.jsonの生成についても工夫が必要でしたので実装に時間がかかりました。

```json
{
  "name": "cloud-guardian-puzzle",
  "version": "0.1.0",
  "description": "AWS GovCloudのセキュリティとコンプライアンスをテーマにしたテトリスゲーム",
  "main": "src/index.js",
  "scripts": {
    "start": "webpack serve --mode development --port 3001",
    "build": "webpack --mode production",
    "test": "jest",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/MASAKIOKUDA-eng/cloud-guardian-puzzle.git"
  },
  "keywords": [
    "aws",
    "govcloud",
    "security",
    "puzzle",
    "game",
    "tetris"
  ],
  "author": "",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/MASAKIOKUDA-eng/cloud-guardian-puzzle/issues"
  },
  "homepage": "https://MASAKIOKUDA-eng.github.io/cloud-guardian-puzzle",
  "dependencies": {
    "phaser": "^3.55.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.10.0"
  },
  "devDependencies": {
    "@babel/core": "^7.21.4",
    "@babel/preset-env": "^7.21.4",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^9.1.2",
    "copy-webpack-plugin": "^13.0.0",
    "css-loader": "^6.7.3",
    "file-loader": "^6.2.0",
    "gh-pages": "^6.3.0",
    "html-webpack-plugin": "^5.5.1",
    "jest": "^29.5.0",
    "style-loader": "^3.3.2",
    "webpack": "^5.80.0",
    "webpack-cli": "^5.0.2",
    "webpack-dev-server": "^4.13.3"
  }
}
```

## 実装してみた課題

HTMLのみで完結するゲームであればサクッと実装できますが、Node.jsなどを用いて動的にプレイできるゲームをGitHub.io経由で公開できるようにする場合、考える要素が多くあると思いました。また、Diffをきちんとチェックしてあげないと、**要件から外れたコードが生成される**リスクがあると感じました。

そのため、**Amazon Q Developer for CLIを正しく利用するのであれば最低限の言語への理解**が必要なのかなぁと思いました。（ローカルサーバでプレイできるといった要件であれば、実装難易度はそこまで高くないですが）

そのうえで、ゲームをプレイする中で見えた改修ポイントとしていくつかありました。

#### 改修ポイント

- 英語↔日本語への切り替え時、一部文字列が反映されない
- ゲームプレイ時、画面がカクカク動いていしまう
- 単純なテトリスゲームなので、プレイヤーキャラクターを使えるようにしたい
- （開発に関しては）Portが3001のみで起動する仕様のため柔軟性がない

## 今後の展望

ゲーム制作だけでなく**ハンズオン作成**や**実務への利活用**含め、Amazon Q Developer For CLIを活用していきたいと考えています。そのうえで、jsii（Typescriptを他の開発言語へ良しなに変換してくれるライブラリ）について興味を持っているので、**なんちゃってjeiiの自作**を次のターゲットにしたいと思います。

ざっくりとした内容ですが、最後までお読みいただきありがとうございます。

#### キャンペーン紹介ページ（6/20まで）

https://aws.amazon.com/jp/blogs/news/build-games-with-amazon-q-cli-and-score-a-t-shirt/

#### Amazon Q Developerについて

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

#### Amazon Q CLI関連記事

https://qiita.com/har1101/items/10c2d85948216b73ed35

https://dev.classmethod.jp/articles/amazon-q-developer-cli-coding/

https://business.ntt-east.co.jp/content/cloudsolution/ih_column-191.html


※個人的にOSSメンテナンスでも使えそうな印象を持っています