デレステ実況の配信オーバーレイ

:::note info
著作権情報　THE IDOLM@STER™& ©Bandai Namco Entertainment Inc.
:::

# こんな感じのものを作ってみました

<iframe width="560" height="315" src="https://www.youtube.com/embed/oPRRXVvME3g?si=rnnmQUdBD1IeGLfo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

# アイドルマスターシンデレラガールズとは  
https://cinderella.idolmaster.jp/sl-stage/  

AndroidとiOS対応の音ゲームです。  

# 配信オーバレイとは

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423236/f75b4cd9-7b6c-c2a4-138d-0c167c3e7781.png)

OBSにはブラウザソースというものを配信画面に追加できる機能があります。
今回はこちらのブラウザソースをローカルホストのReactページを指定することで動的なコンテンツ表示をすることを目指します。

# システムの構想

・ふとスコアの履歴をレコードとして保存して推移を見たくなった
・けれどもスコア画面のスクショを一々、手作業でとるのはめんどくさいので自動的に検知してOCRかけてほしい
・なんかモダンでかっちょいい画面で表示させたい

これなんかアイデアとしてあんだけど、でぎねーがな？とAIちゃんに相談。
AI「面白いアイデアですね」
俺「なんかかっちょいいモダンな画面で出したいんだよ」
AI「んじゃ、バックエンドにPython、フロントエンドにReactっていうの使えばいいと思うよ、笑えばいいと思うよ」
俺「（引きっつった笑い）」

https://www.python.org/

https://ja.react.dev/

# AIちゃんとのお話は続く...

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423236/fe2d8a1d-3ca4-54e5-90eb-9a8f6525365d.png)

俺「こんな理解でいいのかな？」
AI「ええと思うで」
俺「それじゃまずフレームを解析してReactにデータを渡すところを作らないとね」
AI「んだの、そいだばまずシーン検出するごどがら始めるべ」

# デレステのシーン遷移
今回の解析には必要のない画面
* タイトル画面、ホーム画面、ルーム、営業、ガチャ、メニュー、アイドル、コミュ

今回の解析に必要な画面
* LIVE
* 暗転(なんか１コマ漫画とか表示される)
* モーダル表記(画面が若干暗くなる)

俺「こんな感じで画面が移るんだよ」
AI「テンプレートマッチング使える？」
俺「ﾅﾆｿﾚｲﾐﾜｶﾝﾅｲ」
AI「これみれ」

https://speakerdeck.com/cygames/gemukai-fa-niokerudebatuguzuo-ye-falsezi-dong-hua-opencvfalse-yan-dezhuo-e-pythonfalse-noy-gasi-kao-si-appiumfalse-zhi-dedong-kasu

俺「試したけど、なんか微妙だったわ、安いHDMIキャプチャーなんか買うんじゃなかった」
AI「んじゃ必要じゃない画面と、必要な画面の画像データを取ろうか」
俺「とったよー」
AI「じゃモデル組んで」
俺「ﾅﾆｿﾚｲﾐﾜｶﾝﾅｲ」
AI「じゃあ、代わりに俺がやっとくわ」

...XX年後、世界は核の炎に包まれた！海は枯れ、地は裂け、全ての生物が死滅したかのように見えた...

俺「なんか終わったっぽい」
AI「なんでモヒカンと肩パッドつけてるのかはあえて触れないけど、んじゃ分類できてるか試してみようか」
俺「できてる!すごいよAIちゃん」
AI「やったねたえちゃん!」

# OCR
俺「じゃあスコア画面が出たらスコアを数字にするにはどうすればいいの？」
AI「とりま既存のOCRエンジン使えばいいんじゃね？」
俺「使ってみたけど精度と速度が駄目だわ。明らかに3なのに8とか出してるしめっちゃ遅い」
AI「んじゃ、モデル組んで」
俺「いやスコア画面って一日頑張ったとして10回ぐらいしか出せないよ」
AI「それだとデータ拡張っていう手法がとれるよ」
俺「ﾅﾆｿﾚｲﾐﾜｶﾝﾅｲ」
AI「じゃあ、代わりに俺がやっとくわ」
俺「水平反転、垂直反転、ランダム角度は除外しろ、代わりに左右どちらかをランダムに選択し別の数字画像を切れ端として入れ込め」
AI「...（なんやこいつ）」

Google「ちわー、１日に使える上限超えたので課金してちょんまげ」
俺「課金?...課金だと...!!デレステにも課金したことないのに!!!」
(チャリーン「セミが鳴く音」)

俺「なんか終わったっぽい」
AI「んじゃ分類できてるか試してみようか」
俺「できてる!すごいよAIちゃん」
AI「やったねたえちゃん!」

# 画面を作る
俺「なんかよくわからないけどAdobeCCっていうの持ってるからAdobe XD？ふぃぐま？っていうの使えばかっこいいデザイン作れるの」
AI「コンバートは有料プラグインいるよ」
俺「VisualStudioのGUIデザインみたいにコンポーネントをGUI的にペタって貼ったりできないの？」
AI「書け...」
俺「なんか、いろいろ探してみたけど基本的に有償なものばかりだね」
AI「書くんだ...」
俺「今の時代htmlをコーディングするの？めんどくさいんだけど」
AI「書くんだ！」
俺「わかったよ、書くよ...」

俺「書いたのはいいんだけど、これって実際に画面でどう表示されるのか、テストデータとか入れて試してみたいんだけど」
AI「これ入れろ」

https://storybook.js.org/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423236/b9410230-b0a8-68d9-fbc0-b34723283fad.png)

俺「これすごく便利だね、いろんなケースで画面を切り替えられたり、内容を書き換えられたりできる」
AI「せやろ」
俺「今の時代htmlコーディングかよと思ったけどReactって用意されてるコンポーネントを組み立てる感じで作れてすごい面白いよ。C#でいうWPF的な感じかな？」
AI「ここでそんな適当なこと言うとツッコミ受けると思うよ」
俺「でもそんなコメントが来てもAIちゃんが対応してくれるよね」
AI「You exceeded your current quota, please check your plan and billing details」

# これから追加したい機能
* プレイ解析(どこでミスやPERFECT以外の判定になっているのかを画面解析レコードに残す)
マリカみたいな過去のプレイの解析履歴を横かどっかに表示
同じ場所で複数回ミスっていれば色を濃くするor円をでかくするとかで強調
* プレイ楽曲履歴表示画面
* 本日の結果一覧画面