GCPJavaScriptゲーム

“WoWs Minimap Renderer”のDiscordボットを作った

World of Warships (WoWs) のリプレイファイルをDiscordで共有する際、専用クライアントを起動せずに試合展開を確認できると便利です。
そこで、リプレイファイルをアップロードするだけで、ミニマップの動きを動画化して返信するDiscordボットを作成しました。

Discord上での実際の動作の様子

本記事では、このボットを誰でも簡単に自身のサーバーへ導入する方法を紹介します。
個人の利用範囲であれば、Google Cloud Platform (GCP) の無料枠を活用して運用できるよう設計されています。

スポンサーリンク

ボットの機能

Discord のスラッシュコマンド /render.wowsreplay ファイルを添付して送信すると、クラウド上で自動的にリプレイを解析し、数分後にミニマップの戦況遷移を動画として返信します。

運用コストとアーキテクチャ

クラウドサービスを利用するためコストが懸念されますが、本ボットは以下の構成により費用を抑えています。

  1. 待機中は0円: ボットのフロントエンド (Google App Engine) は、リクエストがない時は無料枠内で収まるインスタンスクラスを使用します。
  2. オンデマンド実行: 動画生成を行う負荷の高い処理 (Cloud Run) は、リクエストがある時だけ起動し、処理完了後は直ちに停止します。

これにより、「個人やクランでの通常利用であれば、ほぼ無料枠に収まる」 運用が可能です。
※大量のリクエストが発生した場合は課金される可能性がありますが、GCP側で予算アラートや上限を設定することでリスクを回避できます。

導入手順

コマンドライン操作に不慣れな方でも導入できるよう、ブラウザのみで完結する手順を説明します。

Step 1: Discord ボットの作成

まず、Discord上でボットのアカウントを作成します。

  1. Discord Developer Portal にアクセスします。
  2. 「New Application」をクリックし、任意の名前(例: WoWs Minimap Renderer)を入力して作成します。
  3. 左メニューの「Bot」を選択し、「Reset Token」をクリックしてトークンを取得し、メモしておきます。
  4. 左メニューの「General Information」を選択し、Application IDPublic Key をメモしておきます。

次に作成したボットアカウントをサーバーに招待します。
左メニューの「OAuth2」を選択すると、右側にスコープの選択リストが表示されるので、botapplications.commands にチェックを入れます。

そうすると、その下にボットの権限選択リストが表示されるので、Send MessagesAttach Files にチェックを入れます。

後は一番下の Generated URL をコピーし、ブラウザでアクセスしてサーバーに招待します。

Step 2: Google Cloud (GCP) の準備

ボットを稼働させるためのGoogle Cloudプロジェクトを用意します。

  1. Google Cloud Console にアクセスし、Googleアカウントでログインします。
  2. 画面の指示に従ってアカウントを有効化し、無料トライアルを開始します。
    • ※本人確認のためクレジットカード登録が必要ですが、自動的な課金は行われません。
  3. 画面上部のプロジェクト選択から「新しいプロジェクト」を作成します(プロジェクト名は任意です)。
  4. 作成したプロジェクトの プロジェクトID をメモしておきます。

Step 3: デプロイ(自動設定)

ブラウザ上で利用できるターミナル「Cloud Shell」を使用して設定を行います。

  1. 以下のボタンをクリックして、Cloud Shellでセットアップ画面を開きます。
    Open in Cloud Shell

  2. 画面下にターミナルが表示されるまで待機します。

  3. Terminalメニューから「New Terminal」を選択して、別ウィンドウでターミナルを開きます。

  4. 以下のコマンドをコピーし、ターミナルに貼り付けて Enter キーを押します。

    cd cloudshell_open/wows-minimap-renderer-bot && npm install && npm run gcp:deploy
    

  5. 対話形式で設定項目が尋ねられるため、順に入力します。

    • 「プロジェクトIDは?」→ Step 2でメモしたIDを入力
    • 「Discordのトークンは?」→ Step 1でメモしたトークンを入力
    • その他、指示に従って入力を進めます。
    • 最後に「スラッシュコマンドを登録しますか?」と聞かれるので、そのまま Enter (Yes) を押してください。

「デプロイ完了!」と表示されれば成功です。
最後に表示された URL をコピーし、Discord Developer Portal の 「Interactions Endpoint URL」に貼り付けることで設定は完了です。(Save Changesを忘れずに!)

撤去方法

ボットが不要になった場合は、以下の手順でプロジェクトを削除してください。これにより以降の料金発生を防げます。

  1. GCP コンソール で対象のプロジェクトを開きます。
  2. 「IAM と管理」→「設定」へ進みます。
  3. 「シャットダウン」をクリックします。

これでプロジェクトに関連する全てのリソースが削除されます。

技術情報

本ボットのソースコードは GitLab で公開されています。

Seizu Development Forge / Web Apps / Discord WoWs Minimap Renderer Bot · GitLab
大人気海戦ゲーム「World of Warships」の対戦リプレイデータを2Dミニマップ動画にするDiscord用ボットアプリ。 簡単デプロイと、GCPの無料枠内で運用できる超お手軽仕様となっています。

主な使用技術

  • 言語: Node.js (Interaction受信), Python (動画生成)
  • インフラ: Google App Engine (Frontend), Cloud Tasks (Queue), Cloud Run (Worker)
  • IaC: OpenTofu (Terraform)

システムアーキテクチャ

flowchart BT Discord[Discord] User((User)) subgraph GCP ["Google Cloud Project"] GAE["App Engine<br/>(Bot Entrypoint)"] Queue["Cloud Tasks<br/>(Render Queue)"] Worker["Cloud Run<br/>(Renderer)"] end User ==>|Slash Command| Discord Discord ==>|"Interaction (HTTP POST)"| GAE GAE ==>|Enqueue Task| Queue Queue ==>|Push Task| Worker Worker ==>|Response / Upload| Discord

GCP以外にも、Docker Compose を使用したセルフホスティング(自宅サーバーやVPSでの運用)もサポートしています。
インフラ構築に関心のある方は、リポジトリも併せてご覧ください。

レンダラー本体のリポジトリはこちらです。

GitHub - WoWs-Builder-Team/minimap_renderer: Generates a video of your minimap.
Generates a video of your minimap. Contribute to WoWs-Builder-Team/minimap_renderer development by creating an account on GitHub.

さいごに

使ってみたいけど記事を読んでもよくわからん!って人は遠慮なくお尋ねください👍

以上!

コメント

タイトルとURLをコピーしました