わんコメでメタ情報をOBSに表示するテンプレート

hyk · 2022 年 9 月 10 日午前 11:14

最小バージョン：わんコメ 3.0.0-beta.0以上（多分＆未検証）
推奨バージョン：最新版
配布ページURL：わんコメでメタ情報をOBSに表示するテンプレート - hiyokoのblog
ライセンス：改変OK, 再配布OK
制限：改変しない再配布の場合はクレジットして欲しい。一般利用時は不要（してくれると嬉しい）。
説明：ダウンロードリンクは配布ページにあります

概要

これは何？

デフォルト状態のテンプレートのスクリーンショット
わんコメで視聴者数などの情報を表示することができるテンプレートです。利用にはPRO版が必要です。PRO版の詳細についてはわんコメ公開ドキュメントのPRO版についてのページを御覧ください。

既知の問題点(0.2.0時点)

配信枠自体のプラットフォームでの絞り込みができない（未実装）

利用上の注意

本テンプレートは現在α版ですマイナーアップデートで破壊的変更を行う可能性があります。

使い方

とりあえず使えれば良い場合

ダウンロードします。
ZIP圧縮版の場合は展開(解凍)してください。
手に入れたindex.htmlファイルをOBS Studioにドラッグアンドドロップしてください。

わんコメにテンプレートとして追加する場合

ダウンロードします。
ZIP圧縮版の場合は展開(解凍)してください。
わんコメを起動し、右上メニューからフォルダを選ぶを選択してください。
(4.0以降の場合) templatesフォルダへ進んでください。
(PRO版テンプレートは__proフォルダに置きたい場合) __proフォルダへ進んでください。
このテンプレートの名前を考え、その名前のフォルダを作ります。
手順１又は２で手に入れたindex.htmlファイルを手順６で作ったフォルダにコピーまたは移動します。もし何らかの理由でファイル名がindex.htmlでない場合、ここでindex.htmlにリネームしてください。
わんコメからテンプレートとして認識されます。

表示する内容

何もカスタマイズしないで出ている項目（情報ではない）が、このテンプレートが表示する全ての項目です。
標準では書き出しがONになっている放送についてのみ表示します。
CSSを利用することで、より柔軟に放送、項目ごとの制御が可能です。

右上メニューからフォルダを開くスクリーンショット

カスタマイズ

インスペクタが使える人はそれ見てポチポチしてたほうが多分早い（断言）。もし難しい場合は気軽に聞いてください。物によっては配布ページのCSSの例に追加するかもしれません。

idとclass

各放送毎に<metaInfo>という要素を作成し、XXXX-XXXXXXXX……の形式でidを振っています。わんコメで振られている枠ごとのidと同じものです。
項目では、項目名、その情報が取れるサイト、インデックスと値などがclassで付与されています。配信サイト名はわんコメと同じものです。

項目名と値（？）

項目名
- indexとkeyの２つのクラスが振ってある。
- 下記画像の左側部分（囲ってある部分）。
値・データ
- valueというクラスが振ってある。
- 良い名称が思い浮かばなかった。
- 下記画像の右側部分（囲ってある部分）。

少し特殊なclass

全ての項目についている
- eachMetaInfo
書き出しがOFFになっている枠のmetaInfo要素についている
- notWrite
- デフォルトでは非表示になっているため、表示したい場合はdisplay: block !important;が必要。

配信ごとの制御

わんコメにより振られているIDをそのままidに利用しています。
#dbc833f0-4a7f-474c-8aaf-4f367e5220f1のように指定します。

/*特定の枠を非表示にする*/
metaInfo #dbc833f0-4a7f-474c-8aaf-4f367e5220f1{
	display: none;
}

/* 特定の枠のみ表示する（特定の枠以外を非表示にする）*/
metaInfo:not(#dbc833f0-4a7f-474c-8aaf-4f367e5220f1){
	display: none;
}

配信プラットフォームごとの制御

わんコメで使われている名前で、対応している項目にclassを付与しています。たとえばyoutubeはname、title、viewer、upVoteについています。

配信サイト名対応表

プラットフォーム名	クラス名
YouTube	youtube
Twitch	twitch
TwitCasting	twicas
MixChannel	mixch
SHOWROOM	showroom
bilibili	bilibili
Mirrativ	mirrativ
Twitter	twitter
NicoNico Live	niconama

これ以外のプラットフォームから取得できた場合には、次の項目ごとの制御により制御してください。

項目ごとの制御

配信毎に下記のようなものが出現します。

これらの項目は、以下のclassが振られています。

項目ークラス対応表

項目名	クラス名
枠名	name
配信タイトル	title
現時点での閲覧人数	viewer
累計の視聴者数	total
高評価数	upVote
フォロワー数	follower
ギフトポイント	point gift 両方ついている
広告ポイント	point ad 両方ついている

以下のようなことができます

/*配信タイトルを表示しない*/
div.title{display: none;}

また、すべての項目についているeachMetaInfoというclassを用いることで、

/*高評価数以外を表示しない*/
div.eachMetaInfo:not(.upVote)

などができます。

配信プラットフォームと存在する項目

key	youtube	twitch	twicas	mixch	showroom	bilibili	mirrativ	twitter	niconama
title
viewer
total
upVote
follower
points[gift]
points[ad]

その他カスタマイズ例

id(#xxxxxxxx-xxxx……の部分)や配信サイトは適宜置き換えてください

書き出しをオンにしていない放送も表示する

.notWrite{display: block !important;}

任意の配信サイトで共通の情報のみ表示する

/*YouTubeとTwitCastingに共通して存在する項目のみ表示*/
.eachMetaInfo:not(.youtube), .eachMetaInfo:not(.twicas){display:none;}

/*YouTubeに存在する項目のみ表示*/
.eachMetaInfo:not(.youtube){display:none;}

特定の配信サイトで対応していない項目を非表示にする

/*TwitCastingに無い項目を非表示に*/
eachMetaInfo:not(.twicas){display:none;}

特定の枠の配信タイトルだけ表示する

div.eachMetaInfo:not(.title), metaInfo:not(#dbc833f0-4a7f-474c-8aaf-4f367e5220f1){display: none;}
metaInfo{border: 0 !important;}
.key{display:none;}

視聴者数を100倍＋αにして表示する

/* α == 3 とする*/
.viewer span.value:after{content:"03";}

INDEX表示を消す

span.index{display: none;}

/*一応、値だけ消すこともできる。意味は多分無い*/
span.value{display: none;}

INDEXの後のコロン等を変更する

初期状態では：（全角コロン単体）です。

/* ': '（半角コロン＋半角スペース）にする*/
span.key:after{content: ": " !important;}

/* isにする（必要に応じてピリオドは各自で！）*/
span.key:after{content: " is " !important;}

/*「〇〇は△△だよ」の形にする*/
span.key:after{content: "\306F" !important;}
span.value:before{content: "\300C";}
span.value:after{content: "\300D\3060\3088";}

いい感じに背景を白っぽくする

metaInfo{background-color: rgba(255,255,255,0.3);}

nagiRuma · 2024 年 2 月 23 日午後 4:35

個人的に、また勝手にですが、同接数だけを表示するものに改変してみました。
こんな感じです。赤丸は点滅します。

とりあえず、画像の状態となる設定を記載します。

<style>内の調整

/* フォントサイズとフォントの変更(任意)（注釈※1） */
#app {
	font-size: 42px;
	font-family: 'Roboto', sans-serif; /* <追加> */
	font-weight:bold; /* <追加>太文字にする */
}

/* ソースに対して枠を右寄せにしたい場合、これに変更(任意)（注釈※2） */
#app {
	justify-content: flex-end;
}

/* 枠の形の調整 */
metaInfo{
	background-color: rgba(255,255,255,1); /* <追加>背景色の設定（色はお好み） */
	/* min-width: 15rem;
	   max-width: 100vw; この3行は不要なので削除する
	   min-height: 3.5rem; */
	padding: 4px 26px 3px 45px; /* サイズ調整（好みで変えていいです）（注釈※3） */
	margin: 0; /* サイズ調整 */
	border-radius: 10px; /* 形の調整(任意)（注釈※1） */
}

/* <追加>「視聴者数」の文字を消す（ついでに「：」も消えます） */
#app span.index{
	display: none;
}

/* <追加>赤丸（点滅）の設定 */
#app span.value{
	position: relative;
}
#app span.value:before{
	animation: tikatika 1s step-end infinite;
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	background-color: red;
	border-radius: 50%;
	margin-top: 15px;
	position: absolute;
	left: -25px;
	top: 0;
}
@keyframes tikatika {
	0% { opacity: 1; }
	50% { opacity: 0; }
}

<script>内の調整
視聴者数以外不要なので削除する。

//枠の色
case "onecommeStreamColor":
	document.getElementById(onecommeStreamUUID).style.borderLeft = "0.8em solid "+main.data[onecommeStreamUUID][dataKey]
	break;

//枠の名は
case "onecommeStreamScreenName":
	main.writeToTemplate(onecommeStreamUUID,"eachMetaInfo youtube twitch twicas mixch showroom bilibili mirrativ twitter niconama name","枠名",main.data[onecommeStreamUUID][dataKey]);
	break;
//配信タイトル
case "title":
	main.writeToTemplate(onecommeStreamUUID,"eachMetaInfo youtube twitch twicas mixch showroom bilibili mirrativ twitter niconama title","配信タイトル",main.data[onecommeStreamUUID][dataKey]);
	break;

/* （注釈※4） */
//総視聴者数
case "total":
	main.writeToTemplate(onecommeStreamUUID,"eachMetaInfo twicas mixch mirrativ niconama total","総視聴者数",main.data[onecommeStreamUUID][dataKey].toString(10));
	break;
//高評価（YouTubeのみ）
case "upVote":
	main.writeToTemplate(onecommeStreamUUID,"eachMetaInfo youtube upVote","高評価",main.data[onecommeStreamUUID][dataKey]);
	break;
//follower（Twitch Showroomのみ）
case "follower":
	main.writeToTemplate(onecommeStreamUUID,"eachMetaInfo twitch mixch showroom follower","フォロワー",main.data[onecommeStreamUUID][dataKey]);
	break;
//ポインツ（ニコニコ生放送のみ）
case "points":
	main.writeToTemplate(onecommeStreamUUID,"eachMetaInfo mixch niconama points gift","ギフト",main.data[onecommeStreamUUID][dataKey].gift.toString(10));
	main.writeToTemplate(onecommeStreamUUID,"eachMetaInfo niconama points ad","広告",main.data[onecommeStreamUUID][dataKey].ad.toString(10));
	break;

注釈

BOOTHで配布されているこちらと併用したため、見た目を寄せるための設定になっています。
【無料】配信者向け OBS用デジタル時計 - mooncape - BOOTH
視聴者数の桁数が増えると横に伸びますが、初期設定の場合右に伸びていきます。
右側を基準にして、左側に伸びて欲しい時に設定してください。
数字横の赤丸が不要であれば/* <追加>赤丸（点滅）の設定 */は丸々無視してください。
ただし、赤丸ありきで枠の形を調整しているので、気になるようであれば「padding」を以下のようにしてください。

/* 枠の形の調整 */
metaInfo{
	padding: 4px 26px 3px 26px;
}

逆に使いたいものだけ残し、以下を消すことで、「視聴者数」以外にも流用できると思います。

//（現）視聴者数
case "viewer":
	main.writeToTemplate(onecommeStreamUUID,"eachMetaInfo youtube twitch twicas showroom bilibili mirrativ viewer","視聴者数",main.data[onecommeStreamUUID][dataKey].toString(10));
	break;

トピック		返信	表示
テンプレエディタページのサンプルが一部表示されない質問	3	270	2023 年 8 月 4 日
いにしえの掲示板風テンプレートテンプレート配布	0	4139	2022 年 12 月 27 日
わんコメを軽くしてOBSに反映する時に問題ないようにしたい質問	10	1586	2024 年 1 月 5 日
テンプレートを斜めに表示したい（全体を傾けて表示したい）質問	7	2269	2022 年 10 月 26 日
起動後、画面下のタブは表示されるのに画面には表示がない不具合確認待ち	3	36	2025 年 4 月 20 日