OBS Studioでの配信用レイアウト背景をHTMLで作ってjQueryで動的に変化させる（配信レイアウトをリアルタイムに変更してみる） #HTML

OBS Studioで配信をする際、リアルタイムに編集したテキスト等を表示させたい。
でもテキストエディタをそのままキャプチャするのは格好悪い。
そんな人向け。

配信画面レイアウトを作るだけなら、もっと簡単な方法やツールもあるのですが、

様々な分野で使われているので、応用が利く
やろうと思えばツールの限界など無くいくらでも作り込める
その為に参考になるドキュメントも豊富

等の理由から、この記事では HTML + CSS + jQuery で作っていきます。
環境はWindows 10を想定していますので、異なる場合は適当に読み替えてください。

サンプルの動かし方

実際に動くサンプルが手元にあると分かりやすいと思うので、まずは最短でそれを用意する手順だけを書いていきます。中身の説明はまた後で。

1.ファイルの置き場所になるフォルダを作る

デスクトップでもマイドキュメントでも、どこでもいいので触りやすい場所にフォルダを作りましょう。
フォルダ名は半角英数字で。

2.ファイルを入れる

以下の3つのファイルを先ほど作ったフォルダに入れます。文字コードはUTF-8にします。
Windows 10のメモ帳を使って保存する場合は、下記のコードをコピペして、保存するファイル名・場所を決めるダイアログの最下部に文字コードの選択ボックスがあるので、そこを変更してください。

sample.html

<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script>
    <script src="sample.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="screen">ゲーム画面などを表示する領域</div>
    <div id="menu">
      <p id="line_0">テキストを表示する部品 その1</p>
      <p id="line_1">テキストを表示する部品 その2</p>
    </div>
</body>
</html>

大元となるHTMLファイルです。

sample.js

$(document).on('ready', function() {
  setInterval(function () {TextLoad();}, 1000);
});

function TextLoad() {
  $.get("text.txt", function (data) {
    textArray = data.split(/\r\n|\r|\n/);
    $("#line_0").html(textArray[0]);
    $("#line_1").html(textArray[1]);
  });
}

ファイルを読み込んで表示するJavaScriptです。

style.css

* {
    margin: 0;
    padding: 0;
}
body {
    background: #000;
}
#screen {
    position: absolute;
    top: 0; left: 0;
    width: 960px;
    height: 720px;
    background-color: #ccccff;
}
#menu {
    position: absolute;
    top: 0; left: 960px;
    width: 320px;
    height: 720px;
    background-color: #ccff00;
}
#line_0 {
    position: absolute;
    top: 40px; left: 16px;
}
#line_1 {
    position: absolute;
    top: 100px; left: 16px;
}

HTML文書のデザイン装飾をする為のCSSです。

また、読み込むデータを保存するテキストファイル「text.txt」も同じ場所に、同じく文字コードUTF-8で作ってください。中身は何でもいいですが、今回のサンプルでは2行以上用意しておいてください。

text.txt

ああああああああ
いいいいい

3.HTTPサーバーを立てる

ここまでの手順を正しくできていれば、保存した「sample.html」をブラウザで開くと、このようなページが見られると思います。

ですがテキストファイルを読み込むスクリプトが動いていません。
これは、今時のブラウザでは、勝手にPC上のファイルを盗み見されないように、ローカルで開いたページからは他のファイルにアクセス出来ないように制限されている為です。
なので、それを回避する為にサーバーを立てます。
本格的なサーバーを立てるとなるととても大変ですが、今回はお手軽な下記のソフトを使います。

こちらはダウンロードしてきたファイルを解凍すればインストール無しで実行出来る、名前通り簡単なWEBサーバーです。

使い方は、
1. 適当なポート番号を入力する。（何でもいいですが、他のソフトが使用済みの番号だと失敗するので、念のためにデフォルトの80や被りやすい2桁は避け、4桁の適当な数字がいいかもしれません）
2. 追加ボタンから、サンプルのファイルを入れたフォルダを指定。
3. 開始ボタンを押す
だけです。初回の開始時にはファイアウォールの許可のダイアログが出ますので、許可してください。

4.完成

サーバーで公開したページをブラウザで開いてみましょう。
上記の簡単WEBサーバーを使った場合は、下記のようなURLになっています。

http://localhost:ポート番号/フォルダ名/sample.html

（:や/といった記号は消さずに残して、ポート番号＆フォルダ名を各自書き換えてください。
フォルダ名はパスを含まない名前のみです。）

例：ポート番号8088 & デスクトップ上のsample_folder(C:\Users\****\Desktop\sample_folder)
⇒ http://localhost:8088/sample_folder/sample.html

全てが正常であれば、先ほどとは違って、「text.txt」の内容が読み込まれ、指定された箇所に表示されているはずです。

このブラウザ画面を表示したまま、「text.txt」の内容をメモ帳などで編集し保存すると、リアルタイムでページに反映されていれば成功です。

あとは、これをOBS Studioで映像ソースの追加を選び、種類は「ブラウザ」、URLはlocalhostな簡単WEBサーバーの物を指定すれば完成です。

中身の説明

各ファイルの中身を見ていってみましょう

sample.html

<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script>
    <script src="sample.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="screen">ゲーム画面などを表示する領域</div>
    <div id="menu">
      <p id="line_0">テキストを表示する部品 その1</p>
      <p id="line_1">テキストを表示する部品 その2</p>
    </div>
</body>
</html>

の中の3行はそれぞれ

デザイン用のstyle.cssを読み込む
jQueryを読み込む
sample.jsを読み込む

となっています。

の中には実際に表示する部品が配置されています。各部品にはIDが割り振られていて、デザインの適用やjQueryによる変更をする際、対象としてこのIDを指定していきます。

style.css抜粋

#menu {
    position: absolute;
    top: 0; left: 960px;
    width: 320px;
    height: 720px;
    background-color: #ccff00;
}

style.cssは、デザイン装飾や部品の配置方法を記述しています。
例えばこの部分は、ID=menuの部品の見た目について書かれていて、「画面の上から0・左から960ピクセルの場所に配置して、幅は320ピクセル高さは720ピクセル、背景色は#ccff00」といった具合です。

sample.js

$(document).on('ready', function() {
  setInterval(function () {TextLoad();}, 1000);
});

function TextLoad() {
  $.get("text.txt", function (data) {
    textArray = data.split(/\r\n|\r|\n/);
    $("#line_0").html(textArray[0]);
    $("#line_1").html(textArray[1]);
  });
}

今回のキモである動的表示の機能を作っている部分です。
馴染みの無い人にはよくわからん英数字が一杯ある、みたいに思うかもしれません。
これを各行に対応するように翻訳？するとこんな感じです。

(ページの読み込みが完了したらカッコ内の処理をしていくよ {
  「TextLoad()」という機能を1000ミリ秒＝1秒毎に実行するように登録
});

「TextLoad()」という機能について {
  ("text.txt"というファイルを読み込んで、その内容にdataという名前を付けたら、カッコ内の処理をしていくよ {
    dataを改行で区切って、それをtextArrayという配列に入れるよ
    → textArrayの0番（=dataを行ごとにバラした1個目）を、ID「line_0」のHTML部品に表示
    → textArrayの1番（=dataを行ごとにバラした2個目）を、ID「line_1」のHTML部品に表示
  });
}

どうでしょうか？
書き方のルールもわからずいきなり書けというのはハードル高いですが、なんとなく読めませんかね？
文法が分かってしまえば、そんなに難しい事は書いてなかったりします。

最後に（勉強の仕方とか作り込みの方向とか）

このサンプルは、とりあえず機能が動くという程度で、とてもそのまま使えるモノではありません。
見た目をもっとカッコよく、というのならHTML + CSS （+ jQueryスクリプト）を作り込んでいく必要があります。それについての解説はWEB上にいっぱいありますし、他の人の配信レイアウトだけでなく世に無数にあるWEBサイト自体も作り方の参考になるはずです。

また、このサンプルでは、読み込んだ内容を改行で区切って表示する、という簡単な処理しかしていませんが、例えば読み込んだ内容を使って計算し、それに応じた内容を表示するみたいに処理を積み上げていけば、点数や勝敗表みたいな物も作れます。データの編集に関しても、今回はメモ帳を使いましたが、これもHTML等々を使って高機能な管理画面を作ることだって出来ます。
ファイルの読み込み＆表示以外にも、タイマー表示とかアニメーションとかアイデア次第で（技術的には）何だって可能です。

カッコよくて高機能な配信画面を作るのは大変ですが、そこへ至る一歩目は案外簡単かもしれませんよ？というお話でした。