本記事はWeb API Advent Calendar 2021の12日目の記事となります。
■概要
最近、スプレッドシートを活用して複数人で情報修正編集できる機能を活用し、twitchという動画配信サイト向けのプラグインを作った。
スプレッドシートをプログラム側で制御する手順等は日本語の記事がそれなりにあるので,そちらに任せるとして、
スプレッドシートを活用するまでの至った経緯などを紹介。
実際に使ってみたい方はGoogle Sheets APIで検索することをおすすめする。
■ツール概要
temtemというポケモンのようなモンスター同士を戦わせるゲームを生配信する際に視聴者が任意のモンスターの情報をカーソルをあわせることで配信上(overlay)で確認ができるというもの。
↓実際に動いている様子
twitchプラグイン黙々とやってたけど、シパンクには間に合わなさそー。
データは適当なのと、全体的なデザインや詳細画面のデザインは今回は対応しない予定・・・ pic.twitter.com/vbNcnCsd9P— shibamata (@shibamata_p) April 11, 2021
ハースストーンというカードゲームでは有名な「HearthStone Deck Tracker」というプラグインがあり、プラグインの種類としてはにたようなもの。
格闘ゲームのような画面に動きがあるゲームは、そのゲームを知らない人でもなんとなくみることができる。
ただ、ターン制ゲームの視聴者はどうしても実際にそのゲームを今遊んでいる人が対象になってしまう課題がある。
なぜなら、プレイヤーであればカードゲームの絵柄を見るだけで、一体そのカードがどんなカードなのかわかるが、しばらくプレイしていない人ややったことがない人は何が起きているか分からないからだ。
（配信者も親切に使うときに効果を読み上げてくれたりはしない。遊戯王は親切だった。）
そのため、視聴者毎の知識差を埋めるためにこのプラグインを開発した。
視聴者の言語設定に応じて表示する言語を変えてくれる機能もつけることができる。（この機能は実装中）
■スプレッドシートはどこにでてくるの？
さて、ここまで来るとスプレッドシートが何も関係ないように思える。
スプレッドシートを使うに至る経緯を説明させてほしい。
■スプレッドシートを使うにいたった経緯
情報を表示するということは情報を入力する必要がある。
上であげたハースストーンというカードゲームはゲーム自体がログを出力しており、
それを集計するツールを利用してユーザーに表示する情報を取得している。
メモリを参照するようないわゆるリバースエンジニアリングは利用規約で禁止されている。
悪いことをしないホワイトなプログラマーとして、リバースエンジニアリングは行わない。
ではどのように情報入力をするか？
人間の力で解決する。
つまり配信者が”JSON形式で入力”である
ただ、この情報を毎回配信者が入力しているようではとてもじゃないが、不便である。
そのため、表示したい情報を選択すると自動でjson化してくれるサイトを作成した。（例えば技名を選べば、技の威力や説明などは自動で用意される。）
・実際のJSON出力するサイト
・HTMLを出力するgulpソース
使うモンスターを選べば覚える技リストが表示され、そこから選ぶ仕組みだ。
モンスターの情報を入れ終わった後に「CSV」というボタンを押せば何故かJSONが出力される。
（以前はCSV出力だったので残ったままだった・・・今気づいた）
出力されたJSONをtwitchの配信管理画面にコピペすれば、視聴者側に反映される。
ただ、それすらも私はめんどくさいと思うので、ゲームのスクリーンショットをアップロードすれば自動で入力される仕組みにした。
プログラマーたるもの怠けるべきで、簡単に”人間の力で解決する”などとはいってはいけない。
temtemのスクショ突っ込むと勝手に各種情報入力してくれる仕組み作りました。（オンラインには未反映）
実は2つアイテムが未対応だったりするし、ドラッグアンドドロップも対応させないといけない pic.twitter.com/6b2gMtkeTj— shibamata (@shibamata_p) November 28, 2021
open CVとGCPのCloudFunctionを利用した仕組みになっているが、この記事のテーマとずれるため、
興味ある方は12/19にきっと更新されるであろう下記、AdventCalendarからどうぞ。
・opencv AdventCalendar
じゃあそのサイトに乗せる情報はどこから持ってくるのか。
公式wikiからスクレイピングする。(selenium)
※ちなみにwikiの情報はCC BY-NC-SA 3.0で利用することができるので、ホワイトなプログラマーからジョブチェンジはしていない
スクレイピングした情報をcsvとしてローカルで管理し、gulpというタスクランナーでHTMLに変換している。
海外のゲームなので、wikiの情報は基本的に英語である。
しかし、日本ユーザーに日本語で表示したいし、日本語ユーザーが英語で情報入力するのはとても大変だ。
Google Translate APIなどを利用し、翻訳するロジックをいれたい所だが、
ゲーム内では日本語設定があり、独自の日本語訳があるため、自動翻訳は難しい。
ではどうするか。
人間の力で解決する。
しかし、僕一人でゲーム内の情報を確認して、この英語に対応する日本語はなにかなと入力する作業は現実的でないし、ホワイトなプログラマーのタイピング速度を持ってしても指が辛い。
英語のリストはスクレイピングで取得したので作成できる。
あとは日本語の情報入力を有志の方々にやっていただく。（この場を借りてお礼申し上げます。）
ある程度のアカウント管理が出来て、誤った修正を戻す事ができて、
ないとは思うが、万が一悪意ある修正が行われた時、誰が行ったかわかるようにしたい。
また、情報入力する人はITに詳しくない方もいるので、タグや区切り文字など気にせずに作業をしてもらいたい。
このwikiのような機能を自前で実装するのは大変だ。
そこで登場するのがスプレッドシートだ。
ご存知のとおり、スプレッドシートは多人数でブラウザ上から編集できるEXCELのようなもの。
スプレッドシートの編集はGoogleアカウントで実施し、編集履歴の確認などもできる。
シートの所有者がどのアカウントに閲覧権限をつけるか、保護されない箇所の編集を許可するかを決めることができる。
保護箇所も修正・編集できる管理者、編集者、閲覧者をアカウントごとに指定できる。
※ただし、細かいロールのような仕組みは企業アカウントでないとできないようで、自前で別に管理シートを用意すればプログラム上で制御できそうだが、今回は用意していない。
そしてgoogleスプレッドシートをソースコード上から制御するのがGoogle Sheets APIである。
■処理の流れ
今回作ったバッチは以下の処理を行える。
Wikiからスクレイピングで取得した情報（英語）をCSVとして保存
↓
CSVの情報をスプレッド載せる
↓
プログラムで管理しているフラグ列やwikiから取得した情報にはロックをかけて編集できないようにする（現在列ロックは手動）
↓
有志の方々に日本語訳を入力してもらう
↓
プログラム側からスプレッドシートの情報を取得し、CSV化
↓
作成したCSVを元にgulpでHTML(情報入力サイト)を出力
といった処理の流れでwikiのような仕組みを作った。
実際に有志の方に入力してもらう画面(一般ユーザーは閲覧のみが可能)
・翻訳スプレッドシート
・ローカルで動かすスプレッドシートを管理しているソースコード
複数人での文章編集作業が必要なコンテンツの作成に利用してみてはいかがでしょうか！
このプラグインにまつわる話は、他にも
GCPの無料枠でe-Sports配信をリッチにした話Google Cloud Platform Advent Calendar 2021
ゲームのステータス画面のスクショをデータ化して活用した話OpenCV Advent Calendar 2021
などでご紹介するつもりです！
以上、スプレッドシートをwikiのように活用した話でした！
なお、MMOポケモン、TemtemはSteam/PS5で好評販売中です。