ライブ配信者向けレイアウト構築システム「StreamControl」の使い方

14647 ワード
HTML CSS XML HTML テキストリンク

StreamControlの概要

何が出来るの


（画像は第2回SplashGo!より）
ゲーム大会などでよく見るこういう画面レイアウトを作れるようになります。

強み

一般の配信ソフトでテキストを直書きすると……

  • テキストを書き換えるまでに時間がかかる
  • 入力ミスが起こりやすい
  • 入力内容を用意した別資料を見ながら入力しなければならない

StreamControlを使えば……

  • 瞬時にテキストを切り替えることが可能
    • 上記画像だと、チーム名+選手名4人という合計5要素を瞬時に切り替えることが可能です。
    • 切替可能な要素数は設定により可変です。例えば、各選手のツイッターアカウントも出したいといった要件も可能です。
  • 切り替え対象のIDを選ぶだけなので入力ミスが起こりづらい
    • 上記画像だと、それぞれのチームIDを選ぶだけで切り替えが可能というイメージです。
  • 入力内容は事前に用意したものを参照するので、別資料が必要ない

また、後述するようにhtml&css&javascriptによって構築されています。
従ってこれらの技術で実現可能なことなら、何でも自由にレイアウトを組むことが出来るという点も強みかと思います。

仕組み

配信画面はhtmlでできている


こんな感じで、配信レイアウトにしたい画面をhtmlで構成します。
最低限チーム名の部分などをdivで指定するだけでできます。


チーム名などのテキスト部分はjavascriptを動かして取得・表示します。
htmlとは別のxmlファイルに書かれている内容を取得しています。


xmlファイルの中身はシンプルにこんな感じです。
となると、チーム名などを切り替えるためにはxmlファイルの中身を書き換えればいいということになります。
ここでようやくStreamControlが登場します。

StreamControlと連携させる


StreamControl側の画面はこうなっています。
ここで保存ボタンをクリックすると、StreamControlに入力している内容を元に先述のxmlファイルが上書きされるという仕組みです。


チームIDは前方一致で候補を出してくれるので選びやすくなっています。

実際に選んでいる様子を動画で確認してみて下さい。

動画だと候補が出ている部分が映りませんでしたが、ラクに切り替え出来ているのが分かるかと思います。


データソースはこのようなcsvファイルになっています。
1列目のIDを指定することで、その行に対応した各列の値をセットするイメージです。

配信ソフトでhtmlを読み込む

ここまで出来れば、あとは各種配信ソフトでhtmlファイルを読み込むだけです。
レイアウト上の情報を更新したくなったら、StreamControlを操作して保存ボタンを押すだけです。
配信ソフト側は何もいじる必要はありません。更新されたhtmlを自動で読み込み直してくれます。

実際に作ってみよう

ダウンロード

配布元はこちらです。
http://farpnut.net/streamcontrol/

ですが、有志の方が公開している、既に組み上がっているレイアウトを手直しするのも良いでしょう。
各種レイアウトは日本 StreamControl 学会で公開されています。
その他、StreamControlでググることでも各種レイアウトを探すことが出来るでしょう。

2020/4/1追記
2020/4/5URL修正
レイアウト公開の許可を頂いたので、本記事で使用しているものをGitHubに公開しました。
https://github.com/anaakikutushita/64GB_Streaming_Layout

設定

StreamControlのレイアウト

StreamControlの画面上にテキストボックスやボタンを置いていきましょう。

設定画面を開き、Layout Fileでxmlファイルを指定します。
このxmlファイルに書かれた内容の通りにテキストボックスなどが配置されます。


xmlファイル側にはこのように記述します。

  • layoutタグで全体を囲む
  • 必要な数だけtabタグを作る
  • tabタグの中にlabelやlineEdit（テキストボックス）を配置する
    • lineEditのid属性と、html側のidを揃えると良さげです
  • dataSet属性にcsvファイルを指定する
  • あとはいい感じにdataField属性やmaster属性を設定

仕様はドキュメントで確認できます。
http://farpnut.net/streamcontrol/layout-documentation/

いい感じに出来たらcsvを作って動作確認してみてください。
出力するxmlファイルはstreamcontrol.xmlとなります。

javascriptの設定

html及びcssはいい感じに作ってください。

xmlから要素を取得してhtml内に反映させるところを解説します。
基本的な構造は次のようになります。

  • init()の中にやりたいことを全部書く
    • xmlファイルの変更を検知するため、setIntervalで定期的に読みに行く
  • bodyタグのonload属性にinit()を指定する

全部載せると煩雑になるので、主要な部分を載せます。

var xmlDoc;
var xhr = new XMLHttpRequest();
var doUpdate = false;

function init() {

    xhr.overrideMimeType('text/xml');

    var timeout = this.window.setInterval(function() {
        pollHandler();
    }, 250);

    $('#round').html('');
    ...
    //その他初期化

    $.play();
}

function pollHandler()
{
    loadData();
    // htmlの中身を更新すべきかどうか、loadDataしたときのtimestampを使って判断します
    if (timestamp != timestampOld) {
        doUpdate = true;
    }
    if (doUpdate) {
        updateBoard();
    }
}

function loadData() {
    xhr.open('GET', 'streamcontrol.xml');
    xhr.send();
    xhr.onreadystatechange = function(){
        xmlDoc = xhr.responseXML;

        round = getValueFromTag(xmlDoc,'round')
        // その他、タグを指定してxmlから値を取得

        timestampOld = timestamp;
        timestamp = getValueFromTag(xmlDoc,'timestamp');
    }
}

function getValueFromTag (xmlDoc,tag) {
    if (xmlDoc.getElementsByTagName(tag).length != 0 ) {
        if (xmlDoc.getElementsByTagName(tag)[0].childNodes.length == 0) {
                return '';
            } else {
                return xmlDoc.getElementsByTagName(tag)[0].childNodes[0].nodeValue;
        }
    } else {
        return '';
    }
}

function updateBoard() {
    // xmlから取得した値でhtmlの各要素を上書き
    $('#round').html(round)
    ...

    $.play();

    doUpdate = false;
}

<body onload="init()">
  ...
</body>

javascriptが動けば、StreamControlが出力するxmlと連携してレイアウトの更新が出来るようになると思います。
フロントエンドメッチャデキル人が何かスゴいレイアウトを作ってくれたらいいと思います。

まとめ

システム模式図


StreamControlのシステム全体を模式図にするとこんな感じになるかと思います。
用意するものが少し多くて大変ですが、使いこなせれば配信する上で非常に便利です。
お読み頂きありがとうございました。

分からないところなどあればコメント頂けると幸いです。この記事は随時更新してより良いものに仕上げていきたく思います。

参考にしたのとか

先駆者の方々のお力添えによって少しでもStreamControlを使えるようになりました。ありがとうございます。

StreamControl テンプレート 2019年版 配布
http://shigaming.com/2018/11/30/streamcontroltemplate2019/

OBSでのStream Control テンプレートの使い方（SHIG 仕様2019版）
https://pick-up-space.com/streamcontrol01/

ソフトの存在および基本的な使い方はがまのあぶらさんに教わりました。
https://twitter.com/gamanoabura_nsb

ちなみに：上記SHIGのレイアウトでは国旗を表示させることも出来ます。
こちらはhtmlに表示したいテキストをxmlに出力したのと同様に、表示したい国旗画像ファイルのファイル名をxmlに出力してあげてjavascript側でimgタグのsrc属性を書き換えてあげればできます。
国旗画像のアセットはネット上を検索すれば見つけられます。