🏇

【Discord】ゲームウマ娘のボットを作ってみた話

2021/12/11に公開

Python

Discord

ウマ娘

tech

記事を書いた理由

特段すごい技術を使っているわけではありませんが、「自分がこういうものを作った」というものを文章で残したかったので書きました。

開発経緯

Discordは今ではゲームチャットとして欠かせない存在です。もちろん、ウマ娘も例外ではなく、毎日誰かが話題を持ってきては盛り上がっていることだろうと思っています。
開発開始当時はまだウマ娘も伸び盛りで、関連するボットはほぼ存在しませんでした。(今もそれほどないと思います)
「イベント開催通知が流せたら」「キャラクターの情報がその場で見れたら」と考え、じゃあ作ろうということで、2021年6月に開発をスタートしました。
ボットには「UmaBot」という名前を付けました。

使用している言語等

【ボット】Python3 + Discord.py + MySQL
【Web】Python3 + Flask
※Discord.pyは2021年8月をもって開発終了しましたが現在でも使用しています。スラッシュコマンドやインタラクション等、開発終了後に追加された一部の機能はAPIと直接やり取りしています。

機能開発

当時自分はウマ娘にだいぶハマっていました。ゲームにどハマリしたのもこれが人生で初めてだったと思います。やる気に満ちていたので勢いで書き始めました。

イベント開催通知

まずはメインとも言える「イベント開催通知機能」の開発に取り組みました。コードは2〜3時間で書き上げました。

データベースには開始日時、終了日時をUTCタイムスタンプで記録しており、イベントの進行状況をプログラムから分かりやすくするためにステートを持たせています。ステートの更新および通知は一定間隔で行うようにしています。
0=開催前、1=開催中、2=終了1時間前、3=終了30分前、4=終了という感じです。
終了1時間前・30分前、終了時にも通知を出しています。（設定変更可能）

お知らせ配信

ボットから何らかのお知らせを出したい時があります。
そのためにも配信機能を実装しました。
お知らせは後述の管理システムから登録します。

実際のお知らせ送出の様子 (2021年6月10日 DL数800万突破に関するお知らせ)

キャラクター性能表示

会話の中で「あのキャラって強いよね」「脚質がね...」という話になることは少なくないはずです。
そんなとき、会話の中でキャラの性能が見れたらとても便利だろうなと思ったので、性能表示機能も実装しました。
データベースはJSONで書き、1時間かけて現在実装されている育成ウマ娘のデータをそろえました。現在もキャラクターが追加されるたびに更新しています。

JSONデータベースの一部。2021年12月7日時点で４４人。指が疲れた

別なコマンドではリストから選ぶことが出来ます。名前を忘れてしまったときに便利です。

こだわりポイント１：インデント

強調表示を使って項目のタイトルを表現してもどうしてもごちゃごちゃしたように見えました。
そこでインデントを使用することで視認性を向上させました。

こだわりポイント２：絵文字

普通のテキストで強調表示を使ってランク(A,B,Cなど)を表すと、他のテキストと一緒になって分かりづらいと感じました。
そのため、適性ランクやステータスの部分に絵文字を使うことで、より見やすくしています。

こだわりポイント３：埋め込みの色をキャラクターのイメージカラーに連動させる

「そこ、こだわる？」って思う人は少なからずいますよね...ですよね...
イメージカラーに合わせるだけでも、なんかこう...変わってくるなと思って実装しました。自分でもどう説明すれば良いのか分かりません。

ホームページのキャラクター一覧からリンク画像の枠色を読み取って色の抽出を行っています。

イベント情報表示機能

「今どんなイベントが開催されているか」というまとまったページなどは用意されていないため見逃しがちです。
そこで、イベント開催通知機能で使用しているデータを使って一覧表示機能を実装しました。

もちろん個別指定で見ることが出来ます。

こだわりポイント１：見やすさ

リストで一定数まとめて表示する方式なので、いかに見やすくするかを考えました。
ユーザーが求めているのは「イベントは今やってるのか」「開催期間はいつまでなのか」を知ることなので、求めているものが見やすくなるようにしました。

こだわりポイント２：終了間近のイベントでは残時間を表示

イベント終了まで72時間を切ったものは「（残○○時間）」という風に表示しています。

スラッシュコマンド

最近Discordには、スラッシュコマンドという/ を入力すると出てくるリストから選んでコマンドを実行できるものが実装されました。
コマンドの説明、引数名などが指定できるため従来よりかは利便性が向上しています。
UmaBotでは積極的にそのような新機能を取り入れ、より使いやすくしました。

スラッシュコマンドでは実行者にしか見えないエフェメラルメッセージが送信できるので、これを活用したオリジナルコマンドも用意しています。
例えばTPの回復時間を調べるコマンドは、実行者にだけ見えればいいので都合がいいです。

管理システム

UmaBotは人による管理がどうしても必要です。
ウマ娘プロジェクトのホームページをスクレイピングしてイベントのデータを登録する...なんてことはもちろんできません。
イベントデータの登録は、Twitterでお知らせが出たことを確認したらその都度手作業で行っています。登録作業を楽にできるようにするにはそのようなシステムを作る必要があります。
まさかDiscord上で管理コマンドを打って...ということは難しいし不便なので、WebUIを作りました。
フロントエンドはBootstrapを使って作りました。

これがお知らせ配信用のフォームです。

そしてこれがイベントデータ登録用のフォームです。

普段はこのWebUIから登録をしています。

イベントデータの管理にもこだわり要素が入っています。
リストで今の状態を把握できるようにしています。開催状態を左端のマークで表したりもしています。緑を開催中、赤を終了、灰色を開催前としています。

そして、各行には操作ボタンを３つ（編集・複製・削除）用意しています。
（一人しか使わない管理画面にこだわるのはちょっと変わってるかなって自分で思ってたり・・・）

こだわりポイント１：イベントデータの使いまわしができるように

ウマ娘ではピックアップガチャやチャンピオンズリーグなど定期的に開催されるイベントがあります。
その度に文章を考えていると時間がかかりすぎるため、前回使用したデータを利用できるようにしました。
今までスケジュール詳細も記載したイベントを登録するまで６分ぐらいかかっていましたが、使いまわしができるようになったことで数字などを書き換えるだけで済むため、２分にまで短縮することができました。

こだわりポイント２：レスポンシブ対応

管理画面にはスマートフォンからアクセスする事が多いので、PCで使いやすい、だけでは不十分です。
特にイベントリストの3つの編集ボタンですが、このままスマートフォンで表示するとデザインが崩れてしまいます。

ボタンが縦に配置されてしまい行幅が膨らんでしまう

そこで、デバイスの横幅に応じてボタンをそのまま配置するかプルダウンメニューに収めるかをCSSで自動で切り替えるようにしました。メディアクエリを使用しており、JavaScriptによる実装は行っていません。

/* 横幅1000px以上のデバイスではスマートフォン用のプルダウンメニューを隠す
　 テーブルの幅も広がりすぎないように調整する */
@media screen and (min-width: 1000px) {
  .table {
      width: 80%;
  }
  #action_sp {
      display: none;
  }
}

/* 横幅999px以下のデバイスではPC用のボタンを隠し
   スマートフォン用のプルダウンメニューを表示させる */
@media screen and (max-width: 999px) {
  #action_pc {
       display: none;
  }
  #action_sp {
       display: inline;
  }
}

課題

配信に時間がかかる

たくさん導入してもらって通知を設定するサーバーが増えると、順次送信という方法を取っているためラグが生じます。
一斉に送ろうとすればAPIのレートリミットに引っかかってブロックされてしまうため、間隔を空けて送信しています。
今の利用数だと1回の通知を送信するのに2分ぐらいかかっています。
Discordの新機能「ニュースチャンネル」を利用して一斉送信できないか検討しています。

管理体制

現在UmaBotの管理は自分一人で行っています。
来年は受験生なので、だんだん情報をチェックする機会がなくなっていきます。
先ほども書きましたがデータ登録は手動です。
そうなると忙しくなって登録作業が間に合わなくなる可能性があります。
これはいくら管理UIを改善してもどうにもならないので、複数人で管理体制を組む必要があります。~~一緒に管理してくれる人募集中です~~

今後について

このボットはもちろんウマ娘の情報を発信するために開発したものですが、プログラム自体はウマ娘のために特化させているわけでありません。
例えばイベント通知はどのゲームでも共通して使える機能です。
今後数年間動かして運用を終了した後にオープンソースとして公開した時、他のゲームの情報を発信するボットとして使えるように意識して開発しています。

最後に

ほぼ自分のボットの紹介みたいになってしまいましたが、できるだけ自分なりの努力とこだわりを記事にまとめることができたので良かったと思っています。
また、少なからず今後自分のようにゲーム関連のボットを開発される方の参考になれば幸いです。

UmaBot 公式サイト
https://umabot.cbrx.io/

UmaBot 導入リンク
おかげさまで導入サーバー数800を達成しました！
https://cyberrex.jp/invite/umabot/