SHOWROOMのテロップ機能を拡張する

「事前に設定したい内容を考えておき、配信直後に設定するようにしましょう。」とSHOWROOMの虎の巻に書いてあるけど、配信中に文字入力なんてめんどくさいので登録したメニューからポチれるようにした。

操作（マウスのみ）

お知らせボックスの「OK」をおすと…
画面の下に「myexp」というボタンが追加されるので、「テロップボックス」が表示されるのを待ってこれを押します。
すると「テロップボックス」の「送信ボタン」の下にプルダウンメニューが追加されるのでそこからテロップの文言を選ぶことができます。

※サンプル動画ではなぜかプルダウンメニューの下の部分が切れてしまいました。

プログラムコード

以下のjavascriptプログラムコードをSHOWROOMの配信画面に放り込むことができればOK。
放り込むのはScriptAutoRunnerを使えばかんたん。

// SHOWROOM配信画面でのみ稼働する
var url = location.href;
if (url == 'https://www.showroom-live.com/1086e5553434') {
    alert('showroom拡張');//拡張機能生存宣言
    // フッタブロックにテロップメニュー追加ボタンを設置する
    $('.footer-menu').append('<div><input type="button" name="mybutton" value="myexp" onClick="addTelopMenu();" /></div>');
}

// テロッププルダウンメニュー追加
// テロップブロックが画面に表示されたことを確認してから押すこと
function addTelopMenu() {
	$('#telop-form').append(getTelopMenu());
}

// テロップメニューコード取得
function getTelopMenu() {
	// 必要に応じてメニュー文言をここに追加する
	var telopText = [
		'選択してください',
		'休憩中',
		'離席中',
		'演奏再開',
		'プログラミング'
		];
	// テロップメニューコード構築
	var telopMenu = '<select name="mytelop" id="mytelop">';
	$.each(telopText, function(index,value){
		telopMenu = telopMenu + '<option value="' + value +'">' + value + '</option>';
	});
	telopMenu = telopMenu+'</select>';
	// メニュー選択で発火するイベントを登録
	// 選択テキストをテロップに書き込んで
	// 書き込んだことをSHOWROOMに知らせる
	$(document).on('change', '#mytelop', function(){
		selected = $('#mytelop option:selected').text();
		$('#telop-form-input').val(selected);
		$('#telop-form-input').trigger('change');
	});
	return telopMenu;
}

// SHOWROOM配信画面でのみ稼働する

var url = location.href;

if (url == 'https://www.showroom-live.com/1086e5553434') {

alert('showroom拡張');//拡張機能生存宣言

// フッタブロックにテロップメニュー追加ボタンを設置する

$('.footer-menu').append('<div><input type="button" name="mybutton" value="myexp" onClick="addTelopMenu();" /></div>');

}

// テロッププルダウンメニュー追加

// テロップブロックが画面に表示されたことを確認してから押すこと

function addTelopMenu() {

$('#telop-form').append(getTelopMenu());

}

// テロップメニューコード取得

function getTelopMenu() {

// 必要に応じてメニュー文言をここに追加する

var telopText = [

'選択してください',

'休憩中',

'離席中',

'演奏再開',

'プログラミング'

];

// テロップメニューコード構築

var telopMenu = '<select name="mytelop" id="mytelop">';

$.each(telopText, function(index,value){

telopMenu = telopMenu + '<option value="' + value +'">' + value + '</option>';

});

telopMenu = telopMenu+'</select>';

// メニュー選択で発火するイベントを登録

// 選択テキストをテロップに書き込んで

// 書き込んだことをSHOWROOMに知らせる

$(document).on('change', '#mytelop', function(){

selected = $('#mytelop option:selected').text();

$('#telop-form-input').val(selected);

$('#telop-form-input').trigger('change');

});

return telopMenu;

}