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

いつも記事を読んでいただきありがとうございます！
モブエンジニア（@mob-engineer)です！

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

基本方針

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

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

ゲーム内容

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

ゲームURL

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

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

• プレイ画面

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

開発まわりのこだわり

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

リポジトリ

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

├── 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は次の通りです。

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の生成についても工夫が必要でしたので実装に時間がかかりました。

{
  "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まで）

Amazon Q Developerについて

Amazon Q CLI関連記事

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