画像認識でスプラトゥーンの大会運営を自動化するbotを作りました【Python,Discord,OpenCV,gspread】

# 初めに
こんにちは。あつし（[@Anaakikutsushit](https://twitter.com/Anaakikutsushit)）です。
普段からSplatoon2の非公式大会を運営しています。

これまでに運営した大会はこちら
⇒ https://ofuse.me/#users/3093

運営しているうちに、大会を自動化できないか考えるようになり、今回のようなbotを作成した次第です。
**本記事は、ある程度プログラミングが出来て、大会運営などに興味があり、そもそも自動化を考えたことがなかった／自動化に興味があるという狭い範囲の人を対象にしています。**
プログラミング初学者向けに、このような手順を踏めばプログラミングできるようになるよという内容はありません。

### この記事を読んでわかること
- どういう方法で開発したのか？（記事タイトル通り、Python3.7）
- 実際に開発している[リポジトリ](https://github.com/anaakikutushita/Special_Festival)
- 大会本番での様子（これ無しでは無理なレベルでした）
- 今回から学んだ反省点（多少人力を介する＆API制限をちゃんと考える 必要がある）
- 参考にした記事（記事の最後にまとめて）

### この記事を読んでもわからないこと
- プログラミングしたことない人が環境構築する方法（[参考になるページ](https://www.python.jp/install/install.html)へのリンクはあり）
- 技術的な実装手順とか細かいこと
- 実際のコードの全容（リポジトリから参照はできる）
- 記事内容以外の方法との比較や、もっといい方法

# 大会とbotの概要
今回の大会は下記のようなものでした。
選手（チーム）それぞれが記録を出して運営に報告。
運営側はその記録をランキングとして張り出すという形式の大会です。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ウデマエの関係ないスプラトゥーン2大会を開きます！<br><br>ルールは簡単。スペシャル発動回数の多いチームが勝ち！<br><br>同じチームのメンバーだけでプラベを開いて記録を出し、他チームの記録と競い合うシステムです！<br><br>詳しいルールや応募方法はdiscordサーバーに参加して確認！<br>⇒ <a href="https://t.co/GugKUuYfmn">https://t.co/GugKUuYfmn</a> <a href="https://t.co/5RXAJr4bLf">pic.twitter.com/5RXAJr4bLf</a></p>&mdash; あつし☀人生クリア率10.1% (@Anaakikutsushit) <a href="https://twitter.com/Anaakikutsushit/status/1077100713728139264?ref_src=twsrc%5Etfw">2018年12月24日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

①選手が結果画像をdiscordに送信する
結果画像のサンプル↓
![2019-01-04-17-26-34.png](https://qiita-image-store.s3.amazonaws.com/0/336249/3048e80c-2a37-a4c1-a0fa-ac3c22188977.png)

**②黄色枠部分の数を読み、スプレッドシートに記録する**
[実際のスプレッドシート](https://docs.google.com/spreadsheets/d/1aWJ4qOF6-LHhtlO7Ev9EUk2st4-6lBUnMuGsODT7FaE/edit?usp=sharing)

③スプレッドシート内で、選手が現在何位かを表示する

**このうち②の手順を自動化しました。**
discordに送信された画像から数字を読み取って、スプレッドシートに書き込むという一連の処理を自動化したわけですね。

# どういう方法で開発したのか？
前述の処理内容は、大まかに3つに分割することができます。
1. Discordの投稿内容を処理する
2. 画像から数字などを読み取る
3. 情報をスプレッドシートに書き込む

これらの3つの処理にはそれぞれ、次のライブラリを使わせて頂きました。
1. discord.py ⇒discordサーバー上で動くbotを作るために使いました
2. opencv ⇒画像解析し、ゲーム内どのステージの記録なのかを特定するのに使いました。
3. tesseract ⇒画像解析するのはopencvと同じですが、文字認識に特化しています。
4. gspread ⇒グーグルスプレッドシートを読み書きするために使いました。

開発言語はPythonです。バージョンは3.7。
もともとPythonでの開発経験があったことに加えて、別の画像認識アプリでOpenCVとPythonを利用していたんですね。
今回のbotを作るにあたり、discordもスプレッドシートもどちらもPythonで操作できるとわかったので、そのままPythonで開発しました。

Pythonを導入するには、現在はこういうスタートアップページが有志の手で用意されています。
[Python 環境構築ガイド](https://www.python.jp/install/install.html)

これ以降は実際の開発の様子を書いていきます。
[開発しながら書いてたTwitterのスレッド](https://twitter.com/Anaakikutsushit/status/1077360103508963334)には、もっと詳しい情報が載っています。知りたい方はどうぞ。

## discord botを作る
参考にした記事はこちら。
[Pythonで実用Discord bot(discord.py解説)](https://qiita.com/1ntegrale9/items/9d570ef8175cf178468f)
この記事の内容は非常にやさしいです。私でもすぐにbotを作れました。
一方、本当に初歩的な内容しか載っていないということでもあります。

botでもっといろんな処理をさせたい場合は、discord.pyのドキュメントを読みましょう。
[discord.py 1.0.0a ドキュメント](https://discordpy.readthedocs.io/ja/latest/index.html)
このドキュメント内のAPIリファレンスが、botに出来ることの全てと考えてオッケーです。

また、discordの設定をDeveloperモードにするのも忘れずに。
<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr">まずは特定のチャンネルにメッセージを送りたくなりました。<br>メッセージを送るためには、送信先のチャンネルIDを確認する必要があります。<br>チャンネルIDは通常は表示されていません。Developerモードにすると見つけられます<a href="https://t.co/lvVrzIMJng">https://t.co/lvVrzIMJng</a></p>&mdash; あつし🌘人生クリア率10.1% (@Anaakikutsushit) <a href="https://twitter.com/Anaakikutsushit/status/1077393350674632706?ref_src=twsrc%5Etfw">2018年12月25日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
discordをDeveloperモードにすることで、プログラミングに必須な各種情報をdiscordから簡単にゲットできます。

補足
2018年現在では、discord botを作成・運用する上でPython3.6以下かdiscord.pyの開発中バージョンが必要になります。
<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr"><a href="https://t.co/eMhAXNgIBf">https://t.co/eMhAXNgIBf</a>の正式版がpython3.7をサポートしていないのが問題とのこと。次のどちらかの対策が必要<br>・python3.6にダウングレードする<br>・<a href="https://t.co/eMhAXNgIBf">https://t.co/eMhAXNgIBf</a>の開発中バージョンにアップグレードする(3.7をサポート)<a href="https://t.co/EtbKNwj8Sn">https://t.co/EtbKNwj8Sn</a></p>&mdash; あつし🌘人生クリア率10.1% (@Anaakikutsushit) <a href="https://twitter.com/Anaakikutsushit/status/1077374533189787648?ref_src=twsrc%5Etfw">2018年12月25日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

上述した記事を読みつつコードを書いていけば、discordで動くbotを作れます。
実際に私が作ったコードは[リポジトリ](https://github.com/anaakikutushita/Special_Festival/blob/dev/discord_bot/source.py)から確認してみてください。
※botのトークンを直書きしてしまっていますが、現在再発行しています

## 画像から数字を読み取る
botを作り、選手がdiscordに投稿した記録画像を取得できるようになりました。
今度はその画像をプログラムに解析させる段階です。
画像解析でやることは、数字を読み取る以外にもいくつかありました。
<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr">discordに投げられてきたこの画像で処理しなきゃならないことをおさらい。数字は優先度。<br>1.全プレイヤーのスペシャル発動数の合計を求める<br>2.部屋に参加しているプレイヤー数を求める<br>3.ルールとステージが大会の指定に沿っているか判定する<br>4.タイムスタンプが大会の進行に沿っているか判定する <a href="https://t.co/ueLkC1VRN2">pic.twitter.com/ueLkC1VRN2</a></p>&mdash; あつし🌘人生クリア率10.1% (@Anaakikutsushit) <a href="https://twitter.com/Anaakikutsushit/status/1077848144321294336?ref_src=twsrc%5Etfw">2018年12月26日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

最初に見積もったタスクは最終的に少し変化し、次のようになっています。
1. 画像の解像度を一定にそろえる
2. ゲーム内のどのステージの記録なのか認識する
3. プレイヤーの人数を認識する
4. プレイヤー一人ひとりのスペシャル発動数を認識する

画像から情報を読み取るにあたっての基本的な考えは「あらかじめ座標を調べておいた領域を解析する」ということです。
一枚の画像の中で、読み取るべき数字は決まった座標にしか存在しません。
![image0 (1).png](https://qiita-image-store.s3.amazonaws.com/0/336249/fb4c421f-6b54-f9ee-9e69-f980c5ac467b.png)


従って画像内の領域を決め打ちして、その領域から取り出すべき情報を認識すれば、目的の作業を完了することができます。
この考えはスペシャル数以外の「ステージ名」「プレイヤー人数」にも共通しています。
<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr">ヒストグラム比較は、黄色く塗った2つの領域で2回行います。ABの領域とも標本のヒストグラムと同じであれば、同じステージとして判定していいだろうという試みです<a href="https://t.co/CI0WAm4B3N">https://t.co/CI0WAm4B3N</a></p>&mdash; あつし🌘人生クリア率10.1% (@Anaakikutsushit) <a href="https://twitter.com/Anaakikutsushit/status/1080218503943077888?ref_src=twsrc%5Etfw">2019年1月1日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr">プレイヤーがいるかどうかは、「真っ白いピクセルがあるかどうか」という条件でよさそう。<br>最初は「黒っぽいピクセル」で判定しようと思ったけど、割と色が変わるし、白なら色変わらないしってことで<a href="https://t.co/wXEcjrTsV8">https://t.co/wXEcjrTsV8</a></p>&mdash; あつし🌘人生クリア率10.1% (@Anaakikutsushit) <a href="https://twitter.com/Anaakikutsushit/status/1078886635645808640?ref_src=twsrc%5Etfw">2018年12月29日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

プレイヤー数は↓の画像の領域を見ています。
![regions_player.png](https://qiita-image-store.s3.amazonaws.com/0/336249/4de2a65e-d6d0-4a07-56e2-5fd14137ad04.png)


画像から数字を認識するのは少し面倒でした。
ステージは8パターンだけ認識すればよかったので、標本を用意するのも可能だったんですが……。
数字となると0～99まで可能性があるので、とても標本を用意する気にはなれません。

そこで文字を認識するライブラリtesseractの出番。
ただし、このライブラリをそのまま動かしただけではうまくいきませんでした。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ちなみに他の数字もよろしくありません。<br>9⇒空文字<br>7⇒1<br>さてどうしたものか。スプラトゥーンフォントを学習させるか</p>&mdash; あつし🌘人生クリア率10.1% (@Anaakikutsushit) <a href="https://twitter.com/Anaakikutsushit/status/1078763668433584128?ref_src=twsrc%5Etfw">2018年12月28日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

1. 文字以外のノイズが入っているため、うまく認識できない
2. スプラトゥーンのフォントが特殊なため、うまく認識できない

### 文字以外のノイズが入っているため、うまく認識できない
1番目の問題は、画像を反転・2値化することで白黒の画像に変換して解決しました。
このような色の変換処理はopencvに備わっている機能で可能です。

<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr">うん、閾値処理によってかなり精度が上がるようです。<br>ただpytesseractからは全然脱却できてません。なんかエラー出るんすよね……<a href="https://t.co/WFVhxV8Kty">https://t.co/WFVhxV8Kty</a></p>&mdash; あつし🌘人生クリア率10.1% (@Anaakikutsushit) <a href="https://twitter.com/Anaakikutsushit/status/1078866288972185602?ref_src=twsrc%5Etfw">2018年12月29日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

さらに、関係のない画素をギリギリまで排除すればするほど認識制度を上げることができます。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">思い切って右端5pxをさらにカットしました。これならかなりうまくいっています</p>&mdash; あつし🌘人生クリア率10.1% (@Anaakikutsushit) <a href="https://twitter.com/Anaakikutsushit/status/1078882769281794050?ref_src=twsrc%5Etfw">2018年12月29日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

明らかに数字と認識されないようなノイズだとしても、tesseractは何かしらの文字を認識しようと頑張ってくれるんですね。
私の場合、解析対象の右下の隅に三角形が入り込んでしまうというノイズを抱えていました。
tesseractは、そのノイズも「3」として返してきました。
このノイズは横幅にしてたったの5px。
ですが、この5pxぶんだけ解析範囲を狭めてあげることで認識制度は格段に向上しました。
文字認識させる場合は可能な限り解析対象にノイズが入り込まないように調整しましょう。

### スプラトゥーンのフォントが特殊なため、うまく認識できない
2番目の問題は、tesseract（文字認識ライブラリ）にスプラトゥーンで使われているフォントを学習させることで解決しました。
当該ライブラリに任意のフォントを学習させる手順はこちらの記事がわかりやすいです。
[甲骨文字で書かれた文章をOCRで読み取れるようしてみる](https://www.tdi.co.jp/miso/tesseract-ocr)

ただし当然ですが、フォントを学習させるためにはフォントが必要になります。
しかし私はスプラトゥーンに使われているフォントは持っていません（聞いた話によると特注だとか任天堂の自作だとか　らしいです）。
そこでフォントを自作して利用することにしました。
私も今回初めて知ったのですが、フォントは誰でも簡単に自作することができるんですね。
[caligraphr](https://www.calligraphr.com/en/webapp/app_home/?/)というサービスが簡単便利で必要十分な感じ。おススメです。

フォントを自作するとなると大量の作業が必要になると思いますよね。
しかし今回の場合はそこまで大変な作業量にはなりません。
今回は0～9の10種類の文字だけ学習させればよいからです。

1. ゲーム画面のスクリーンショットを集めて、0～9の数字画像を作る。
2. opencvで2値化処理を施し、白黒の画像にする。
3. 拡大し、ペイントソフトでノイズを消して整える

<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr">スペシャル回数のサンプル画像から、学習に使うフォントサンプルを作成しました<a href="https://t.co/rZ4BBBaEh6">https://t.co/rZ4BBBaEh6</a></p>&mdash; あつし🌘人生クリア率10.1% (@Anaakikutsushit) <a href="https://twitter.com/Anaakikutsushit/status/1078784053342494721?ref_src=twsrc%5Etfw">2018年12月28日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">こんな感じ。<br>この画像ファイルをもう一度calligraphrに送ればフォント化されるはずです<a href="https://t.co/fjH6T48XNE">https://t.co/fjH6T48XNE</a></p>&mdash; あつし🌘人生クリア率10.1% (@Anaakikutsushit) <a href="https://twitter.com/Anaakikutsushit/status/1078817515000651776?ref_src=twsrc%5Etfw">2018年12月29日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

作成した実際のフォントはこちらです。

<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr">フォントはotfもttfも両方作れます。と言っても私はこの二つの違いがよくわかりませんけどね。<br>実際に表示するとなんかイイ感じだ<a href="https://t.co/7HENr9uUup">https://t.co/7HENr9uUup</a></p>&mdash; あつし🌘人生クリア率10.1% (@Anaakikutsushit) <a href="https://twitter.com/Anaakikutsushit/status/1078819518569435136?ref_src=twsrc%5Etfw">2018年12月29日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

あとは甲骨文字を認識させたという上記の記事の通りに学習させればOKです。

しかし私の環境では、いくら学習量を増やしても誤認識をゼロにすることはできませんでした。
1と7を相互に誤認識するというパターンだけが残った形です。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">作業量さらに5倍ドンでも精度上がりません！うわあああ！！</p>&mdash; あつし🌘人生クリア率10.1% (@Anaakikutsushit) <a href="https://twitter.com/Anaakikutsushit/status/1079329706019704832?ref_src=twsrc%5Etfw">2018年12月30日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr">テスト用画像を眺めてたんですが、このスペシャル回数を1とか7とか正確に認識しろっていうのは無理があったかもしれんな……人間の目で見てもジェッパの回数7回かな？って一瞬思ったもん<a href="https://t.co/wRlGSRRVHF">https://t.co/wRlGSRRVHF</a></p>&mdash; あつし🌘人生クリア率10.1% (@Anaakikutsushit) <a href="https://twitter.com/Anaakikutsushit/status/1079511110129078272?ref_src=twsrc%5Etfw">2018年12月30日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

もともとのフォントが似ている以上、ここの誤認識は避けられないと考えるべきです。
実際の大会運営中にも10回ほど誤認識が発生しました。
そのときは目で見て手動で正しい結果に書き換えるという対応で切り抜けています。

## 画像からステージを読み取る
ステージを認識するのは簡単です。文字を認識するのに比べれば。
原理的には、領域内の「色の出現頻度」＝ヒストグラムを比較することで実現しています。
大会で使用されるステージは8種類。
あらかじめ「ステージ1～8のヒストグラム」を解析・保持しておきます。
discordに画像が投稿されたらそのヒストグラムを解析。
そのあと、保持しておいたヒストグラムの中のどれと似ているかな？と判断するといった具合です。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ヒストグラム比較はこの記事が参考になります。<br>ヒストグラムの計算はグレースケール画像に対して行う！という内容の記事が多いのですが、こちらは三原色とも考慮した比較について記載しています<a href="https://t.co/raVS3xRbpf">https://t.co/raVS3xRbpf</a></p>&mdash; あつし🌘人生クリア率10.1% (@Anaakikutsushit) <a href="https://twitter.com/Anaakikutsushit/status/1080231516817436673?ref_src=twsrc%5Etfw">2019年1月1日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

グレースケール化した画像に対してヒストグラムを計算しても一定の効果はあります。
ただ今回は更に精度を上げたかったため、三原色全てに対してヒストグラムを計算しました。
なお、グレースケールの場合と比べてどの程度精度が上がるのかという対照実験はしていません。
感覚的に、輝度（白黒）だけで判定するよりも精度は上がるとみてよいでしょう。

保持しておいたヒストグラムとどのくらい似ていればいいのか？という閾値は思ったよりも低い値に設定する必要がありました。
最終的に、80%程度の類似が認められればOKという設定に着地しています。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">閾値を下げたら正しく認識されました。90%でいいと思ってたのですが、80%くらいにしないとダメなのかも</p>&mdash; あつし🌘人生クリア率10.1% (@Anaakikutsushit) <a href="https://twitter.com/Anaakikutsushit/status/1080285871855652864?ref_src=twsrc%5Etfw">2019年1月2日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

以上の内容を実装し、画像から読み取るべきことは全て読み取れるようになりました。

- ステージ名
- プレイヤー数
- プレイヤー1のスペシャル数
- プレイヤー2のスペシャル数
- ……
- プレイヤー8のスペシャル数

欲を言えば以下の情報も読み取りたかったです。

- どのルール（ナワバリバトルやガチエリアなど）の記録か
- 画像のタイムスタンプは大会期間中のものか

しかしこの辺りは時間的余裕がなかったため飛ばしました。
実装するとなると多言語対応が必要になるため、かなり大変そうです。

<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr">将来的には画像認識でルールも特定できるようにしたいんですけど、各国語対応しなきゃいけないのかな……と思ってつらくなりました。<br>日本語／英語だけならまだやる気大丈夫かな。画像集めるの面倒だけど。<a href="https://t.co/evP7f7lYsE">https://t.co/evP7f7lYsE</a></p>&mdash; あつし🌘人生クリア率10.1% (@Anaakikutsushit) <a href="https://twitter.com/Anaakikutsushit/status/1080044281019097089?ref_src=twsrc%5Etfw">2019年1月1日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

以上の内容を実装して完成です。
実際のコードはリポジトリから確認してみてください。

## 情報をスプレッドシートに書き込む
discordに投稿された画像を処理し、情報を読み取ることができるようになりました。
最後は、読み取った情報をスプレッドシートに書き込む段階です。

Pythonのプログラムからスプレッドシートを扱うにはgspreadというモジュールを利用します。
しかしその前に、スプレッドシートのAPIを利用するための初期設定が必要です。
初期設定にはこの記事を参考にしました。
[【もう迷わない】Pythonでスプレッドシートに読み書きする初期設定まとめ](https://tanuhack.com/python/operate-spreadsheet/)

初期設定さえ完了してしまえば、あとは自由にスプレッドシートにアクセス可能になります。
自由と言っても、API制限には気を付けましょう。
私は大会が終わってから気づいたのですが、gspreadには時間あたりのAPI利用制限があります。
[Usage Limits](https://developers.google.com/sheets/api/limits)
要約すると次のようになります。

- 500秒あたり500回以内（プロジェクト単位）
- かつ、 100秒あたり100回以内（ユーザー単位）

後述しますが、私はこの制限に引っかかってしまいました。
その結果、大会中にbotが止まるという事故に。そのときだけ手動で処理しました。

API制限を上手く乗りこなすには、n秒の間隔を空けて処理するコードを実装しましょう。
これはgspread側ではなく、discord.py側で制御が必要です。
[リポジトリのサンプル](https://github.com/Rapptz/discord.py/blob/master/examples/background_task.py)を見ながら実装するのがいいでしょうね。

スプレッドシートを各種操作するコードはこの記事を参考にしました。
[gspreadライブラリの使い方まとめ！Pythonでスプレッドシートを操作する](https://tanuhack.com/python/library-gspread/)
上記内容を読んでいけば、大抵のことはできるようになります。
[公式のドキュメント](https://github.com/burnash/gspread/blob/master/README.md)もあります。英語ですが一次情報を確認したい方はこちら。

実際の大会における処理の様子を下記に示しておきます。
前提としてスプレッドシートの内容を軽く説明しておきましょう。
大会で使ったスプレッドシートは次のような構成をしています。
①大会で使うルールとステージを書き込んだシートがあります。
![73e550374ca5b580ab22828d00a44cbe.png](https://qiita-image-store.s3.amazonaws.com/0/336249/20ee3295-7b03-cddf-fee6-b1d4c365e660.png)

②参加チームの一覧と、現在勝ち進んでいるか／いないかがわかるシートがあります。
![edafb8e24647cf3fcdc7f206f42c2dc2.png](https://qiita-image-store.s3.amazonaws.com/0/336249/ba657a4c-9f52-042a-2cb9-e772ffd05713.png)
ラウンド1というのは、ラウンド1で敗退したという意味です。
oは勝ち進んでいるという意味です。

③各参加者の画像の解析結果を記載するシートがあります。ラウンドごとに用意しました。
グレーの部分がbotから書き込むエリアです。
白いエリアはプログラミングには関係ありません。書き込まれた内容を計算・整理して表示するだけのエリアです。
![fccbd8e36d6cd95c107edd113c2bf4d9.png](https://qiita-image-store.s3.amazonaws.com/0/336249/9b3060d8-64f1-af9e-784d-49ad1c7cc009.png)
現在進行しているラウンドのシートを、必ず右端に置くようにしています。
右端に固定することで、どのシートに書き込めばよいのかを楽に取得できるようになっています。

1行目（ヘッダ）に書いてある情報を補足します。
pnはプレイヤー数、p1～p8はプレイヤーのスペシャル回数を書きこむ列となっています。
ラウンドごとにステージが3つずつあるので、s1～s3の列を右に作ってあります。

このスプレッドシートの構成を前提として、次のような手順で処理していました。

1. discordに画像を送信したユーザーのIDを書き込む列を特定（実際には列の位置は固定なので特定する必要がなかった）
2. 3つあるうちのどのステージの記録かを特定し、s1～s3のどの列にするかを決定
3. Discord IDがシート上に既存の場合は値を上書きする
4. Discord IDがシート上に存在しない場合は新規行に書き込む
5. チームが勝ち上がっているか確認する
6. 勝ち上がっていない場合は順位を数字ではなく「参考」と入力する

こうしてスプレッドシートに値が書き込まれたあと、人間の目でチェックして修正します。
修正が必要になるのは、数字の1と7を間違えて認識・書き込んでしまった場合だけでした。

実際のコードは[リポジトリから確認](https://github.com/anaakikutushita/Special_Festival/blob/dev/discord_bot/process_gsheets.py)してみてください。

# 大会本番での様子
以上までで開発は終了し、大会本番を迎えました。
discord上に残っている実際の動作ログはこんな感じです。
黄色い名前のユーザーが大会参加者です。
自分たちのチームの記録を画像で送信し、botがそれを処理しています。
![e64ad7c8da4a6e2443da9b7b54322fea.png](https://qiita-image-store.s3.amazonaws.com/0/336249/49e82d00-d943-ab25-b73b-95869d700461.png)

**正直言って大会運営はめちゃくちゃ快適でした。**
人力だとbotの比ではないくらいに打ち間違いがあったり時間がかかったりしてしまいます。
botに完全に任せきりには出来ないものの、明らかな省力化になったことは間違いないですね。

特にbotの効果が出ているのが**最後の画像提出からラウンド締め処理までの時間**です。
ラウンド1は大量の画像が送信されたためにAPI制限を引き起こし、botが停止しました。
その結果、途中から人力での入力を余儀なくされたわけです。**ラウンド1の手動処理が全部終わったのは最後の画像提出から25分後**。
パンクが起こった正確な時刻はわかりませんが、本来なら23時30分でラウンド1は終了するはずでした。
しかし手動処理が途中から始まった（つまり全部の報告を手動で処理したわけではない）にも関わらず、手動処理が終わったのは23時55分となってしまいました。

一方、参加者の皆さんの協力を得て終始botで運営した場合は非常にスムーズ。
ラウンド3の最後の画像提出は1時20分で締切。
**全部botで処理すればわずか2分、1時22分にはラウンド3終了のアナウンス**をすることができました。
この3分間は、人力で勝ち上がったチームとそうでないチームの記録を付けている時間でした。
同じ形式の大会を全て人力でこなしたら、膨大な時間がかかったことが容易に想像できます。

ほか、形式が異なる画像を自動で却下してくれるなんて働きもありました。
![64de8c2d0b68b465d55f02e2df3f393d.png](https://qiita-image-store.s3.amazonaws.com/0/336249/4f5db8de-0845-1b8c-d3a9-856db30d8d0b.png)
これは画像から情報を読み取るにあたってガチガチに座標などを指定したことのオマケですね。

# 今回から学んだ反省点
なんと言っても**botが止まってしまうのは絶対に避けるべき事態でした**。
まさか大量の報告を処理しきれずに止まるなんてことは夢にも思わずテストもしていなかったのです。
現在では対策も見つかっていますし、実装もできそうです。
これは今回勉強できたことで最も大きかったことでしょう。

ほか、**人力が必要になるポイントでは専用の通知を出すべき**でしたね。
そして、人力で切り抜けるにしてもその人力を最小限にする工夫をしておくべきでしょう。

人力が必要になると予見できていたポイントはいくつもあります。

- 処理結果に1や7が含まれているとき（誤認識の確率が相対的に非常に高い）
- スプレッドシート内で記入中の位置をハイライトする機能。リアルタイムで誤認識を修正しやすくなる。
- 報告の締め切り時刻でbotを停止すること
- ランキングが更新されるたびに入れ替えること（大会中はラウンド終了後の1回だけ入れ替えてました）
- 新しいラウンドを始めるときの処理。ラウンドごとのシートを追加したりアナウンスしたり。

ほか、こういう機能も付いていると参加者が楽しくプレーできたでしょう。

- 順位を抜かされた時に通知する機能（特に勝ち上がり圏内から外れたとき）
- 報告した画像のスコアが結局いくつになったのかを表示する機能
- ランキングで前後のチームとのスコアの差を表示する機能

やはり頭で考えているだけだったり、本番にさらされないと見えてこないものがたくさんありました。
同様の大会は今後も継続して主催していきます！
興味が湧いた方は是非選手側としても運営側としても関わって頂けると嬉しいです。ご連絡お待ちしています。

あと、私自身は2018年中で仕事が無くなってしまいました。
C#の業務経験2年と、上記botを開発できる程度のPythonの技術力あります！
在宅ワークしかするつもりありませんが、良いお話あればTwitter（[@Anaakikutsushit](https://twitter.com/Anaakikutsushit)）でお待ちしております！

# 開発中に参考にした記事
## Discord botを作る・動かす
[Pythonで簡単なDiscord Botの作り方](https://qiita.com/PinappleHunter/items/af4ccdbb04727437477f)
[create_task = asyncio.async: SyntaxError: invalid syntax](https://stackoverflow.com/questions/51196568/create-task-asyncio-async-syntaxerror-invalid-syntax)
[Pythonで実用Discord bot(discord.py解説)](https://qiita.com/1ntegrale9/items/9d570ef8175cf178468f)
[discord.py 1.0.0a ドキュメント](https://discordpy.readthedocs.io/ja/latest/index.html)
[ユーザー/サーバー/メッセージIDはどこで見つけられる？](https://support.discordapp.com/hc/ja/articles/206346498-%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC-%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC-%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8ID%E3%81%AF%E3%81%A9%E3%81%93%E3%81%A7%E8%A6%8B%E3%81%A4%E3%81%91%E3%82%89%E3%82%8C%E3%82%8B-)
[PythonでWeb上のファイルをダウンロードする](https://qiita.com/yuukiclass/items/88e9ac6c5a3b5ab56cc4)
[Python3でwebスクレイピングしたいのですが存在するURLが開けません。](https://ja.stackoverflow.com/questions/27922/python3%E3%81%A7web%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0%E3%81%97%E3%81%9F%E3%81%84%E3%81%AE%E3%81%A7%E3%81%99%E3%81%8C%E5%AD%98%E5%9C%A8%E3%81%99%E3%82%8Burl%E3%81%8C%E9%96%8B%E3%81%91%E3%81%BE%E3%81%9B%E3%82%93)
[urllib.request — URL を開くための拡張可能なライブラリ](https://docs.python.jp/3/library/urllib.request.html)
[【Python】Webスクレイピング urllib.request / urlopen() でダウンロード](https://qiita.com/ononoy/items/4e244d83dec0a4757929)

## 画像解析で情報を読み取る
[Pythonで画像内の数字認識](https://qiita.com/yoshizaki_kkgk/items/0289f682d5cfcf450b9c)
[Windows で Tesseract 3.0.5 を使ってみる](https://www.kunihikokaneko.com/dblab/licenseplate/tesseract.html)
[Tesseract Not Found Error](https://stackoverflow.com/questions/50655738/tesseract-not-found-error)
[Tesseract-OCRの学習](https://web.archive.org/web/20161211171659/http://hadashi-gensan.hatenablog.com:80/entry/2014/01/15/135316)
[甲骨文字で書かれた文章をOCRで読み取れるようしてみる](https://www.tdi.co.jp/miso/tesseract-ocr)
[【文字フォント】Calligraphrで自作の手書きフォントを作る](https://pc-pier.com/blog/2017/05/01/calligraphr/)
['numpy.ndarray' object has no attribute 'mode'](https://stackoverflow.com/questions/44090179/numpy-ndarray-object-has-no-attribute-mode)
[OpenCVを使ってヒストグラムの相関で画像同士の近さを計算してみた話](https://ensekitt.hatenablog.com/entry/2018/07/09/200000)

## スプレッドシートに書き込む
[【もう迷わない】Pythonでスプレッドシートに読み書きする初期設定まとめ](https://tanuhack.com/python/operate-spreadsheet/)
[burnash/gspread - Google Spreadsheets Python API](https://github.com/burnash/gspread/blob/master/README.md)

## その他Pythonの基本的なこと
[unittest — ユニットテストフレームワーク](https://docs.python.jp/3/library/unittest.html)
[Getting Started with unittest in Python](https://www.sirajussalekin.com/blog/getting-started-with-unittest-is-python/)
[テストコードの構成](https://docs.python.jp/3/library/unittest.html#organizing-tests)
[Pythonで文字列を連結/結合する方法まとめ](https://www.headboost.jp/python-connect-strings/)

最後までお読みいただきありがとうございました。