猫の画像を使ってあそぶブラウザゲームを作ろう !

ここまでで環境構築が完了しました。次は CDK やソースコードを準備し、にゃんポーカーをデプロイします。

1. Cloud9 の画面の上にある [File] -> [Upload Local Files] をクリックして、あらかじめダウンロードしておいた nyantech2022-main.zip をアップロードしてください
2. Cloud9 の画面の下部にあるターミナルで、アップロードした zip ファイルを unzip コマンドで解凍してください。
   $ unzip nyantech2022-main.zip
3. 作成されたファイルの中の resize.sh を実行して、Cloud9 のディスクスペースを拡大してください。
   $ cd nyantech2022-main/tools
   $ bash resize.sh 50
4. ターミナルで以下のコマンドを実行して background ディレクトリに移動して、CDK など依存モジュールをインストールしてください。
   $ cd ../backend
   $ npm ci
5. ターミナルで以下のコマンドを実行して、CDK の Bootstrap を実行してください。この手順は、お使いのアカウントのリージョンにおいて CDK を初めて使用する際に一回のみ必要なものです。処理が完了するまで 5 分程度かかります。この手順は、前の手順でカレントディレクトリを backend に変更しているので、そのまま backend ディレクトリで実施してください。
   $ npm run cdk bootstrap
6. ターミナルで以下のコマンドを実行して、Backend のデプロイを実行してください。この手順は backend ディレクトリで実施してください。コマンド実行後メッセージが表示されますが、y/n と聞かれた際は y と入力して Enter キーを押してください。BackendStack のデプロイには 10 分程度かかります。
   $ npm run cdk deploy BackendStack

8. 左側のペインにあるファイルツリーで frontend/app/.env を探して開いてください。この .env ファイルに先ほどコピーしたドメインとエンドポイントをペーストしてください。

VUE_APP_API_BASE_URL=<BackendStack.WebApiEndpointxxxxの値>

VUE_APP_CLOUDFRONT_BASE=https://<BackendStack.ImageDistributionxxxxの値>

※ VUE_APP_CLOUDFRONT_BASEは、https://の部分を消さず、続きのところにペーストしてください。

9. ターミナルで以下のコマンドを実行して frontend/app に移動し、Frontend アプリケーションの依存モジュールをインストールしてからビルドを実行してください。

$ cd ../frontend/app

$ npm ci

$ npm run build

10. ターミナルで以下のコマンドを実行して、frontend/infrastructure に移動し、依存モジュールをインストールし、FrontendStack をデプロイしてください。途中で y/n を聞かれた際は y を入力して Enter キーを押してください。デプロイには 10 分程度かかります。

$ cd ../infrastructure

$ npm ci

$ npm run cdk deploy FrontendStack

12. マネジメントコンソールで Amazon S3 にアクセスし、”backendstack-imagedist” で始まるバケットを開いてください。

13. [Upload] をクリックし、images.zip を解凍して作成されたすべての画像と map.yml をアップロードして、バケット直下に画像と map.yml ファイルがアップロードされた状態にしてください。アップロードが完了するまでに数分かかります。

14. アップロードが完了したら、にゃんポーカーを開いているブラウザのタブをリロードしてください。画像が 5 枚表示されたでしょうか ?

10 万回ランダムに 5 枚の画像を選んだ際にどの役ができているかを調べてみました。数字は出現率です。こうして見てみると、茶白フォーカードが一番作りやすそうですね。茶白さんならロイヤルストレートスラッシュも一番出しやすそうです (グラフでは出現率 0.19 % ですが)。もしかすると、10 万回の試行では一度も出なかった激レアの役があるかもしれません。

にゃんポーカーをあそんでいると、こういう役があったら良いのに、とか、写真にフレームをつけたいな、などのカスタマイズ欲がむくむくと沸いてきたのではないでしょうか ? そんなみなさまに、「こういうカスタマイズをする場合はここを変更すべし ! 虎の巻」をお届けします。

• 役判定ロジックをカスタマイズしたい場合
  backend/lambda/webapi/poker.py の judge() の中身を書き換えてください。いきなりロジックをいじるのはちょっと…という場合は、手始めに役の名前をお好みに変えるところから始めてみてはいかがでしょうか ? コードを変更したら、カレントディレクトリを backend に変更してからステップ 2 の手順 6 の、backend のデプロイの部分を再度実行してください。
• 写真や色柄の設定をカスタマイズしたい場合
  マネジメントコンソールで Amazon S3 にアクセスし、”backendstack-imagedist” で始まるバケットを開いて、ファイルをすべて削除してください。次に、マネジメントコンソールで Amazon DynamoDB にアクセスし、左側のメニューから [テーブル] -> [項目の探索] を選択し、3 つのテーブルの項目をすべて削除してください。その後、使用したい画像とそれに対応する map.yml を ”backendstack-imagedist” で始まるバケットにアップロードしてください。
• 写真を交換する回数を変えたい場合
  frontend/app/.env の VUE_APP_MAX_REPLACE の数字をお好みに変更してください。その後、ステップ 2 の手順 9 と 10 を実行して Frontend を再度デプロイしてください。
• ゲーム画面をカスタマイズしたい場合
  frontend/app/ の下にあるコードを編集することで、画面のカスタマイズが可能です。たとえば、src/components/Card.vue の中の <style> タグを編集することで、画像選択時の色を赤色から変更することができます。コードの変更を反映させるには、ステップ 2 の手順 9 と 10 を実行して Frontend を再度デプロイしてください。
  

使用したリソースの中には、削除しない限り課金が続くものがあります。課金を止めるためには、以下の手順でリソースの削除を行います。削除したリソースは元に戻せないのでご注意ください。

デプロイしたアプリの削除
AWS Cloud9 のターミナルで以下のコマンドを実行してデプロイしたリソース一式を削除してください。
$ cd frontend/infrastructure (ご自身のカレントディレクトリの場所に応じて読み替えてください)
$ npm run cdk destroy
$ cd ../../backend
$ npm run cdk destroy

AWS Cloud9 環境の削除
AWS Cloud9 のマネジメントコンソールから今回作成した環境を選択し、上にある [Delete] ボタンをクリックして環境を削除してください。

S3 バケットを空にする
cdk bootstrap 実行時に作成された S3 バケットの中身を削除してください。バケット名は cdk-[hash]-assets-[account id]-[region] という名称です。バケット自体はそのまま削除せずにおいてください。

今回は、猫さんの写真と CDK を使ってにゃんポーカーをデプロイしました。

写真と map.yml を差し替えて自分好みの猫さんで画面を埋め尽くしたり、役判定ロジックをカスタマイズしたりと、いろいろ遊んでいただければ幸いです。また、CDKについてもっと知りたい ! となったみなさま、こちらの CDK Workshop をぜひお試しください。CDK の使い方やメリットを体感いただけるワークショップです。

猫さんの写真は Twitter での呼びかけに答えてくださったみなさまからいただきました。

また、本記事で使用した CDK のコードはプロトタイピングエンジニアの秋田が作成しました。

CDK Workshop »