「M-1エントリーナンバーバトラー2024」10330組のスコアを集計してみた


## はじめに
「M-1グランプリ」という漫才の賞レースはご存知の方も多いかと思いますが、「M-1エントリーナンバーバトラー」と聞いてピンとくる方は少ないかもしれません。

「M-1エントリーナンバーバトラー」とはM-1グランプリ2023王者の『令和ロマン』さんが考案したゲームで、M-1に出場する芸人さん達のエントリーナンバーを使って、該当するコンビの実績データからスコアを算出し競うといった内容です。

1. 任意のエントリーナンバーを指定する
1. 公式サイトの[コンビ情報の検索](https://www.m-1gp.com/combi/index.php)で指定したエントリーナンバーを入力する
1. ヒットしたコンビの過去大会の成績を基にスコアを算出する
1. 1〜3を繰り返し最もスコアを稼いだプレイヤーの勝利


参考動画: 

https://youtu.be/wtHnGwPMiC8?feature=shared

この動画を観て「どんな芸人さんがスコア上位になるんだろう？」「スコアのばらつきを見てみたいな」といった純粋な興味が湧き、今回10330組分のデータを集計するに至りました。

## WebスクレイピングはNG
調査にあたって、M-1グランプリ事務局様にサイトのポリシーについてお問い合わせをしたところ、Webスクレイピングは禁止されており、手作業でのデータ集計が必須であると分かりました。
(画面操作のシミュレートも多分NG)

そこで、まずは愚直にコンビ1組ずつ詳細ページを開き、スコアを計算することにしました。
ところが、私は幼少期にそろばん教室へ通っておらず暗算が非常に苦手であるため、1つのレコードを作成するのに1分以上掛かってしまいました。
このペースでデータ集計をしていたら年が明けてしまいます。

「今からでも間に合うのだろうか…」
そう思いながら、地元のそろばん教室を調べようとしたその瞬間、
![スクリーンショット 2024-12-09 23.42.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957067/ac5449c2-dfc7-88de-1e67-de69e83ef3e4.png)
↑このアイコンが頭に飛び込んできました。


## Chrome拡張機能を作ってみる

ということで、今回はChrome拡張機能を作ってデータ集計を行うことにしました。
もしかしたら、もっと良いアプローチがあるかもしれませんが、技術的な興味もあり、この方法を試してみることにしました。

## 要件を整理する
改めて要件を整理しました。
- 現実的に可能な操作範囲内で、全てのコンビのスコアを算出し、その結果をエントリーナンバーを含むコンビ情報に紐づけて保持する
- サイトへのアクセスを自動化することは禁止とする

## Chrome拡張機能の仕様を考える

前述の要件を踏まえて、機能の振る舞いを決定しました。

### 仕様
拡張機能のアクションボタン(アイコン)をクリックすることで実行される。

**1.タブの処理**
- 現在ウインドウ内で開かれているすべてのコンビ詳細ページについて、以下を実行する
  - スコアを算出し、コンビ情報とスコアを組み合わせたレコードを作成
  - 処理が完了したタブを閉じる

**2.スプレッドシートへの保存**
- 作成された全てのレコードをGoogleドライブ上のスプレッドシートに追記します

## Chrome拡張機能を実装する

大きく3つのステップに分けて実装を進めました。

### [STEP1]拡張機能の雛形作成

まずは拡張機能の基本構成を準備しました。
以下の4つのファイルを作成し、それぞれ役割を明確に分けています。

- **manifest.json:** 拡張機能の設定ファイル、権限やリソースを定義する
- **background.js:** アクションボタンのクリックを検知して処理を開始する
- **calculate.js:** ページ内容からスコアを算出する
- **spreadsheet.js:** スプレッドシートへデータを書き込む

### [STEP2]Google Sheets APIの繋ぎ込み

次に、Google Sheets APIを利用し、スプレッドシートにデータを書き込むための仕組みを構築しました。

1. **認証情報の作成**
Google Cloud ConsoleでChrome拡張機能向けの認証情報を生成。
2. **manifest.jsonの更新**
Google Sheets APIにアクセスするための権限を追加する。
3. **書き込みロジックの実装**
background.jsに認証処理を組み込み、データをスプレッドシートに追記する処理を記述。

### [STEP3]スコア算出ロジックの構築

最後に、各コンビのスコアを生成するロジックを実装しました。
詳細は割愛しますが、過去大会の結果部分のテキストを抽出してスコアを生成する仕組みを実装しました。

***

**完成！**:tada:
アイコンはなんかローカルにあった緑のテニスプレイヤーの画像にしています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957067/6b10837c-fafb-c4b8-0585-1ebbb213bc0f.png)

## データを集計する
実際に行った作業は以下の通りです。
### 1. 2024年の出場コンビ一覧ページを開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957067/4be68730-efb8-3f37-7170-d5b2954b5563.png)


### 2. バックグラウンドタブでコンビ詳細ページを開く(大体20件ずつ)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957067/7c086d07-11a9-a0c0-55c2-5c751d0a2cbf.png)

### 3. 緑テニスプレイヤー押下
コンビ詳細ページのタブが全て閉じられ、スプレッドシートに追記される。
![無題の図形描画 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957067/1cb11e29-b7a3-f789-29cf-4cee6d0be613.png)
![無題の図形描画 (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957067/53ae0cc0-907a-4409-065e-a7a5fcd9d96d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957067/0ebfff0b-8d24-6e12-1afc-e5bd3647da02.png)

### 4. 2,3を繰り返す

### 気を付けたこと
- 拡張機能の管理画面が開かれていると何故かタブの処理が失敗するので閉じるようにした
- サイトへの負荷を軽減するため、念のため他の利用者が少ない深夜帯に作業を行うよう心がけた
- スプレッドシートにレコード数とナンバー重複の有無を表示させ、ミスをしていないか確認しながら作業を進めた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957067/1e38d02f-1c77-649f-cd3d-bead0681bf03.png)

***

この単純作業を計5〜6時間実施して、すべてのデータを集計することができました！

以下は集計したデータをグラフ化したもの。
![Figure_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3957067/7957d613-a97e-6bbe-9739-90d02192a0b6.png)


## さいごに
集計したデータを元にランキング表などを作りましたが、完全に趣味の域になってしまうため別記事(note)で公開しました。
興味があれば是非覗いてみてください。

https://note.com/gentle_quince195/n/nf38e55470da6?sub_rt=share_pb

<font color="red">※すみません、noteまだ完成していません。</font>