配信画面に載せる文字等をOBS外で更新して即時反映させるシステムを作ってみた

ゲーム配信などで配信画面に現在の状況等を表示し、進行度によって更新したいことは割とよくあると思いますが、OBSのテキスト表示機能を使ってテキストを表示していると、内容を更新したい時に毎回OBSのテキストオプションを開いて手動入力して更新しなければならないので、頻繁に更新したい場合は非常に不便です。

また、デフォルトではプレーンテキストしか表示できないので、テキストに装飾を付けて表示したり、分量に応じてスクロール表示させるなどの簡易アニメーションを付けたくてもつけることが出来ません。

これらを解決するためのシステムを作ってみました。現時点では自分用にプログラミングしていて汎用性が無いのでそのまま完全コピーして使えるというものではないのですが、方法としては流用が効くものだと思いますので、具体例とコードをご紹介したいと思います。

やりたかったこと

風来のシレンシリーズでは装備品を合成して特殊効果を受け継ぐシステムがあるのですが、初めからずっと見ている人しか現在の装備品の能力がどうなっているのか分かりにくいので、リアルタイムに情報を更新して放送画面上に表示したいと思いました。しかしこの能力の更新は割と頻繁に行われる上に数があるので、毎回手動で入力するのは大変でテンポも悪くなってしまうので、ここをシステム化して極力少ない操作で更新できるようにしたいと思いました。

具体的に以下の放送で表示に成功しています。（画面右下）

【風来のシレン5＋】死線の回廊初見プレイ #1【生配信】

実際に動かした方法

このシステムは、HTML5とJavascriptを使用して非同期でxmlファイルの読み込みを繰り返し、そこに記述されたテキストを表示するという方法をとり、これをOBSのブラウザ機能で読み込むことでxmlの更新だけで画面上のテキストを書き換えることを実現しています。（技術的には有名なHTML5コメントジェネレーターと近いことをしています）

また、xmlの書き換えには専用のツールを作成し、チェック状態を変えることで自動的に狙いのxmlファイルが作成されるようにしました。これによって表示の更新をボタンを押すだけで出来るようになるので、手間をかけずに更新をすることが出来るようになりました。

更に、テキストの表示にはHTMLを用いているため、CSSによるスタイル変更やアニメーション機能がすべて使えるので、これだけでスクロール等の演出もすることが出来ました。

以下、具体的なコードについてご紹介します。（この辺りはあまり詳しくなかったので、調べながら動けばいいやというレベルでやっているので、もしかしたら専門的に見たら良くないことしてるかもしれないです）

本体

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>シレン印表示ツール</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
	
function loadXml()
{
	var weapon = "";
	var shield = "";
	
	var getxml = $.ajax({
		url: "output.xml",
		type: 'GET',
		dataType: 'xml',
		cache: false
		});
	
	getxml.done(function(xml){
		weapon = $(xml).find('weapons').text();
		shield = $(xml).find('shields').text();
		$('#weapon span').text(weapon);
		$('#shield span').text(shield);
		if(weapon.length > 28){
			$('#weapon span').addClass('scroll');
		} else {
			$('#weapon span').removeClass('scroll');
		}
		
		if(shield.length > 28){
			$('#shield span').addClass('scroll');
		} else {
			$('#shield span').removeClass('scroll');
		}
	});
	
	getxml.fail(function(error){
		alert("読み込み失敗");
	});
	
}

window.addEventListener('DOMContentLoaded', function() {
	var roopTimer = setInterval(loadXml, 500);
});


</script>
<link rel="stylesheet" href="style.css">
</head>

<body>
	<div id="weapon">
		<span></span>
	</div>
	<div id="shield">
		<span></span>
	</div>
</body>
</html>

xml

<?xml version="1.0" encoding="utf-8"?>
<Items>
	<weapons>ここに武器印の状態を入れる</weapons>
	<shields>ここに盾印の状態を入れる</shields>
</Items>

スタイルシート

@charset "utf-8";


#weapon span, #shield span {
	display: inline-block;
	font-size: 30px;
	font-weight: bold;
	color: white;
	font-family:"砧 iroha 23kaede StdN R";
	-webkit-text-stroke: 1px black;
}

.scroll {
	padding-left: 800px;
	white-space: nowrap;
	animation: scrollAnime 25s linear infinite;
}
@keyframes scrollAnime{
    0% { transform: translateX(0)}
  100% { transform: translateX(-1600px)}
}

やってる内容としては、ページ読み込み時にタイマーを設定し、500ミリ秒ごとにxml読み込み関数を実行して、bodyの対応するspanの中にテキストを入れるというだけです。また、更新時に文字数が28より多かったらスクロールするように設定しています。

スタイルシートではレイアウトの調整と、スクロール時の挙動を設定しています。

xml更新用ツール

こちらのコードは割愛しますが、C#で作成しました。チェックを付けて現在の状態に更新するボタンを押すとoutput.xmlの内容が更新されます。

注意点

今回のツール作成で一番沼った部分ですが、通常のブラウザでこのHTMLを読み込もうとしても、xmlの読み込み部分で必ずエラーになります。というのもセキュリティ上の問題から、普通はブラウザからローカルのファイルを直接操作することは出来ないように設定されているからです。

考えてみれば当たり前なのですが、これが出来るならば例えば適当なサイトにアクセスした時に、アクセスしただけで自分のPC上のファイルの中身を勝手にコピーしたり、削除したりということが出来るようになってしまうからです。

しかし、OBSのブラウザ機能からローカルのHTML等を呼び出した場合は、そこから別のローカルファイルに対するアクセスが許可されているらしく、期待した動作をさせることが出来ました。

なので、このようなシステムを作って試しに動かしてみる時は、Chromeなどのブラウザではなく直接OBSで表示させてみて実験してみるのが良いです。

さいごに

今回はかなり限定的なシステムの紹介になりましたが、中身を少し変えるだけで様々なシーンで利用することが出来ると思います。今後もっと汎用的なシステムとして作成するかどうかは今のところは考え中ですが、同じ方法でひとつ作ろうと思っているものがあるので、また進展したらご紹介しようと思います。

今回作ったシレン用のツール本体はマニアックすぎるのと環境に応じて調整しないと使えないので公開していませんが、もし欲しいという方やその他相談等あればTwitterやDiscord、放送などで気軽に聞いて下さい。

Twitter:@rit_nd