Discord Streamkit Overlayを利用した人狼役職表示ツールを制作してみた【JRS】

Amoung us以上にニッチな記事となりそうです。
Jinro Stream【JRS】と呼称していきます。

昨今YouTube等で人狼ゲームの配信をされてる方が多数いらっしゃいますが、
使用ツールとしてはZoomとDiscordが多いかと思います。

Zoomの方が画面の動きはありますが
通話ツールとしてはDiscordの方が使いやすく、こちらを使用している方も多い印象です。
今回はDiscordを前提としたCSS、
さらに言えばDiscordでは「Discord Streamkit Overlay」というサービスを利用してOBSに横並びなどでプレイヤーの通話画面を表示している方が大多数かと思います。
そんな「Discord Streamkit Overlay」の使用を前提にしたサポートツールという位置づけになります。

前提の必須ツール（サービス）は「OBS Studio」と「Discord Streamkit Overlay」の2つです。

初期設定だけ少し面倒ですが、初回のみなのでなんとか頑張ってください。

使い方

初期設定（初回のみ）

STEP.1

OBSのショートカットを編集

OBSのショートカットのプロパティを開き、「リンク先」の末尾に半角スペースをあけ、

–remote-debugging-port=1234 –remote-allow-origins=*

と追記してください。
これでOBSの検証ツールが使用可能になります。
※分かる人はポート番号を好きにしてください

STEP.2

OBSにブラウザソースを追加

「Discord Streamkit Overlay」から設定済みのURLを引っ張ってきてください。
その際1点注意がありまして、「Hide Names（名前非表示）」の項目はONにしないでください。
名前の下にメニューが表示される設定のため、名前の表示は仕様上必須になります。
カスタムCSSは当記事のものをご使用ください。（わかる方は自由にしてもらってOK）

STEP.3

検証ツールを開く

http://localhost:1234/
を開く。検証ツールが開くので、「Discord Streamkit Overlay」を選択。
複数ある場合は該当のものを選択してください。
どれだかわからない場合は1個1個開いてチェック。

STEP.4

検証ツールにてプログラムをコピペ

検証ツール内、右上の「console」タブをクリック。
下部に「>」マークがあり、その右に好きにテキストが書けるようになっているので、その部分に当記事のプログラムをコピペする。

初回のみ、ペーストの許可が必要なので指示通り「allow pasting 」と手打ちする。

STEP.5

好きに使う

プレイヤーのアイコンや名前をクリックするとメニューが出るので好きに使う。

主な機能

アイコンか名前をクリックするとメニューが出るので、
メニューから表示したいものを選択します。

「役職CO、出された色、生死状況、GM」をそれぞれ表示できます。
同じカテゴリのものは上書き、違うカテゴリのものはそれぞれ別で表示されます。全く同じものを選択した場合は消去されます。

「リセット」ボタンはそのプレイヤーの表示を全てオフに。
「全リセット」ボタンはちょっと特殊なので個別に紹介します。

全メニュー

全リセットボタンについて

その名の通り全てのプレイヤーの情報をリセットします。
ただ、こちらのボタンはミスクリック等の防止のため二度選択してもらう仕様となっております。

1度目の選択をした後、再度メニューを開くと全リセットボタンが赤くなります。
そのままもう一度選択してもらうと全プレイヤーの情報が削除されます。

ミスクリック等の場合はなにもしなければ3秒後に元のボタンに戻ります。

フォントなどの設定

/*GMタブの背景色*/
--gm-bg-color: #555;
/*GMタブのフォントカラー*/
--gm-font-color: #fff;
/*役職CO、色、GM表記などのフォント*/
--gm-font-family: "";
/*プレイヤー名のフォント*/
--base-font: "";
/*発言時の枠の幅*/
--user-border-size: 8px;
/*  発言時の枠の色*/
--user-border-color: #8ed1fc;

デフォルトの値として上記を設定していますが、変更したい箇所をそれぞれ変えてください。

CSSとプログラム

CSS

https://github.com/aquacastle/jinrostream/blob/master/jinrostream.css

JavaScript（プログラム）

https://github.com/aquacastle/jinrostream/blob/master/user_status_manager.js

注意点

「Discord Streamkit Overlay」はCSSの外部読み込みが禁止されているようで、@importは使えません。カスタムCSSに直接記載をお願いします。
そのためフォントの読み込みもCSSでWebフォント経由での読み込みができません。ダウンロードしインストールしてからご使用ください。

動きゃいいんだよ精神で作ってるので色々汚いかも。