「OBSで使えますか」と聞かれて、抽選盤を配信用に作った日

kamitool 運営者・個人開発の記録

忘年会の景品抽選のために置いていたルーレットに、ある日「配信のOBSで動かせますか」という声が届いた。ブラウザでは何の問題もなく動くはずのものが、配信の裏側では素直に動かなかった理由と、そこから作り直した話を書く。

同じ画面のはずなのに、配信では動かせなかった

kamitoolのルーレットは、もともと忘年会や新年会の景品抽選のために置いたものだった。名前を入れて回すだけで、効果音も紙吹雪もブラウザの中だけで完結する。届いた声は「配信の企画で当選者を決めるのに、これをOBSに映せませんか」というものだった。

OBSには「ブラウザソース」という、Webページをそのまま配信の1レイヤーとして読み込める機能がある。URLを入れるだけだから簡単そうに見えたが、実際にkamitoolのページのURLをそのまま貼ってみると、配信のテスト画面で一瞬読み込みが止まる瞬間があった。原因はすぐに分かった。あのページには、アクセス解析タグと広告の読み込みタグが入っている。普段ブラウザで開く分には気にならない数百ミリ秒でも、配信という「止まってはいけない画面」の中では話が別だった。

削ったのは機能ではなく、画面を成り立たせている外側だった

最初は「重い部分を軽くすればいい」くらいに考えていたが、手を付けてみると軽い重いの話ではなかった。配信のレイヤーに置く以上、外部の誰かのサーバーに一切問い合わせない状態にする必要があった。解析タグも広告タグも、フォントの読み込みも、全部外した。ドラムロールとファンファーレの効果音、当選時の紙吹雪——これらはもともと音声ファイルではなくブラウザの中で音を生成する仕組みで動いていたので、ここは変える必要がなかった。変わったのは、画面を包んでいたサイトとしての外側の部分だけだった。

結果として、HTMLが1つあるだけで完結する形になった。ファイルをダブルクリックすれば普通のブラウザでも開けるし、OBSに読み込ませればそのまま配信の一部になる。インストールも、会員登録も、インターネット接続すらいらない。

OBSへの入れ方

配信で使う場合の手順は次のとおり。

1. OBSの「ソース」の＋から「ブラウザ」を選ぶ。
2. 「ローカルファイル」にチェックを入れ、参照からobs-roulette.htmlを選ぶ。
3. 幅1920・高さ1080に設定する。配信画面いっぱいに映す前提の比率にしてある。
4. 設定を変えたいときは、ファイルを直接ダブルクリックしてブラウザで開き、アドレスの末尾に「#edit」を付ける。見た目や色、参加人数の上限といった設定パネルが出てくる。

無料版と、有料版で残した違い

配信で軽く使ってみたいだけの人のために、参加人数に上限を付けた無料版も別に置いている。有料版（500円）では上限をなくし、当選したら外す・外さないの切り替え、回る時間の調整（1〜6秒）、見た目3種類、色・大きさ・置き場所の組み合わせ9通り、当選履歴の表示、タイトルの変更ができる。機能を出し惜しみして無料版を作ったのではなく、「まず自分の配信画面に合うか試したい」という段階と、「本番でずっと使う」段階を分けただけのつもりでいる。

会場用と配信用は、同じ仕組みでも求められるものが違う

会場のスクリーンに映すルーレットは、その場にいる人が「ちゃんと動いているか」を目で見て確認できる。多少の遅れがあっても、司会が間を持たせれば気にならない。配信のレイヤーはそうはいかない。画面の向こうにいる人には、止まった理由も、読み込み中だという事情も伝わらない。ただ「動かない画面」として映るだけだ。同じ抽選の仕組みでも、置かれる場所によって許される余白の大きさがまるで違う、ということをこの作り直しで実感した。

使うときに気をつけていること

参加者の名前や当選記録は、配信している自分のパソコンの中にだけ残り、外部には一切送られない。配信や動画への使用にクレジット表記は求めていないが、ファイルそのものの再配布や販売はできない形にしている。企画の途中で参加者を追加・削除したいときは、#editの設定パネルからではなく、本体のテキスト欄を直接書き換える方が早い。

よくある質問

関連する読みもの