kamitool > 読みもの > OBSのブラウザソースにURLを入れる手順と、幅・高さの決め方
OBSのブラウザソースにURLを入れる手順と、幅・高さの決め方
配信の画面に、カウンターやタイマーを重ねたいとき、OBSでは「ブラウザ」というソースを使います。難しい操作ではありませんが、幅と高さの決め方でつまずく人が多いので、手順と考え方を、順番にまとめます。OBSのバージョンによって、項目の表示名や位置が少し違うことがあります。
ブラウザソースとは
OBSの「ソース」には、画面の映像、ゲームの映像、画像、文字など、いろいろな種類があります。その中の「ブラウザ」は、Webページを、そのまま映像の1枚として、配信の画面に載せる種類です。ページの背景を透明にしておけば、ゲーム画面の上に、文字や数字だけを重ねられます。このサイトのツールは、すべて、この使い方に合わせて作ってあります。
ブラウザソースの中身は、OBSの内部で動く、小さなブラウザです。ふだん使っているブラウザ（ChromeやEdgeなど）とは、別のものとして動きます。この点は、あとの「保存」の話にも関わります。
入れる手順
- OBSの「シーン」を選び、その下の「ソース」の欄にある＋を押す
- 一覧から「ブラウザ」を選ぶ
- ソースの名前を付ける（「カウンター」「待機画面」など、あとで見分けがつく名前にします）
- 「URL」の欄に、ツールのURLを貼る
- 「幅」と「高さ」を決める（次の節）
- OKを押す
貼るURLは、各ツールのページの、「OBSのブラウザソースに入れるURL」と書かれた枠に、載っています。たとえば、マルチカウンターなら、「https://kamitool.com/tools/counter/app.html」の形です。URLの途中や、最後に、不要な文字を足さないでください。設定を変えたURLを使うときは、設定パネルの「この設定のURLをコピー」ボタンで、そのまま取り出せます。
幅と高さは、キャンバスに合わせる
ブラウザソースの「幅」と「高さ」は、そのソースが占める画面の大きさです。OBSの初めの値は、幅800、高さ600です。この値のままだと、横長の配信画面の、一部しか、ツールが使えません。ツールは、この「枠」の中に、位置を決めて、文字や数字を置くからです。たとえば、「左下」に置くツールなら、枠の左下に、数字が出ます。
基本の目安は、配信の画面（キャンバス）と、同じ大きさにすることです。キャンバスの大きさは、OBSの設定の「映像」にある、「基本（キャンバス）解像度」で確かめられます。多くの配信では、幅1920、高さ1080（フルHD）です。このサイトのツールも、この大きさを想定しています。
| キャンバスの大きさ | ブラウザソースの幅×高さ | 結果 |
|---|---|---|
| 1920×1080 | 1920×1080 | ツールの位置が、設計どおりに出る |
| 1920×1080 | 800×600（初めの値） | 枠が小さく、左上に寄って映る。ツールが、画面の端に、届かない |
| 1280×720 | 1920×1080 | 枠がキャンバスより大きく、はみ出す。縮小が必要になる |
| 1280×720 | 1280×720 | 位置は合う。文字は、1920のときより、大きく見える |
大きさがずれたとき
幅と高さを、キャンバスと同じにしても、ソースが、小さく映ることがあります。その場合は、OBSの画面で、ソースの枠が、キャンバスいっぱいになっているかを見ます。ソースを選んで、右クリックから「変換」にある「画面に合わせる」を選ぶと、ソースが、キャンバスいっぱいに広がります（ショートカットは、Ctrl+Fです）。
文字の大きさは、ツールの設定パネルにもあります。ソースを無理に拡大すると、文字が、ぼやけることがあるため、枠の大きさはキャンバスに合わせたまま、文字の大きさは、ツールの設定で変える方法を、おすすめします。
ブラウザソースの、ほかの設定
ブラウザソースの設定画面には、ほかにも、いくつか項目があります。このサイトのツールでは、ほとんど変えなくて済みますが、意味を知っておくと、困ったときに役立ちます。
- カスタムCSS：ページの見た目を、上書きするための欄です。初めは、背景を透明にして、余白をなくす内容が入っています。このサイトのツールは、自分で背景を透明にしているので、触る必要はありません。
- ソースが非表示のときにシャットダウン：オンにすると、そのソースが映っていない間は、中のページを止めます。映るたびに、ページが読み込み直されるため、分数で数えるカウントダウンは、そのたびに、最初から数え直しになります。
- シーンがアクティブになったときにブラウザを更新：オンにすると、その場面に切り替えるたびに、ページを読み込み直します。数が保存されないツールは、更新のたびに、最初の状態に戻ります。
- 現在のページのキャッシュを更新：ページを読み込み直すボタンです。URLを変えたのに、見た目が変わらないときに、押します。
表示の順番と、見え方の確認
OBSのソースの一覧では、上にあるソースが、手前に映ります。ツールを、ゲームの映像の上に重ねたいときは、ツールのソースを、ゲームの映像より、上に置きます。順番は、ドラッグして入れ替えられます。映したくないときは、ソースの横の、目のマークを、オフにします。
入れ終わったら、OBSの画面で、ツールが映っているかを確かめます。映っていないときは、「画面が映らない・小さいときの確認手順」の記事の順に、見直してください。
まとめ
ブラウザソースに入れるときに、決めることは、少しです。ツールのURLを貼ること、幅と高さを、キャンバスに合わせること、ソースの順番を、映像の上に置くことの3つです。この3つが合っていれば、ほとんどの場合、1回で映ります。
初めて入れる人が、つまずきやすい点
ブラウザソースは、見た目の設定が少ないので、操作そのものは、簡単です。つまずきやすいのは、「入れたのに、映らない」「小さく映る」「設定パネルが映っている」の3つです。映らないときは、まず、ふだんのブラウザで、同じURLが開くかを、確かめます。開くなら、URLは、正しいということです。次に、OBSの側の、目のマーク、幅と高さ、ソースの順番を、見ます。小さく映るときは、幅と高さが、キャンバスと、違っています。設定パネルが映るときは、URLの末尾に「#edit」が、付いています。
ソースを増やしすぎると、OBSの動きが、重くなることがあります。使っていないブラウザソースは、目のマークを、オフにするか、削除すると、軽くなります。同じツールを、場面ごとに、別のソースにしたいときは、「ソースの複製」で、増やして、URLだけ、変える方法が、手早いです。
ブラウザソースは、ふだんのブラウザと、同じものですか？
同じではありません。OBSの内部に組み込まれた、別のブラウザで動いています。そのため、ふだんのブラウザで保存した内容は、OBSの中では、見えません。保存の話は、「ツールの数字や設定が保存される場所」の記事に、まとめています。
幅と高さを、フルHDではなく、小さくしてもいいですか？
キャンバスが、1280×720のように、小さい場合は、同じ大きさにします。ツールは、枠の大きさに合わせて、位置を決めるので、キャンバスより大きい枠にすると、はみ出し、小さい枠にすると、画面の隅に、寄ります。
ソースの名前に、決まりはありますか？
ありません。「カウンター」「待機画面（配信前）」のように、あとで、見分けがつく名前を付けると、場面が増えたときに、探しやすくなります。
URLを、あとから変えられますか？
ソースを、右クリックして「プロパティ」を開くと、URLの欄を、書き換えられます。書き換えたあと、ページが読み込み直されます。保存されていた数字は、保存先が同じなら、そのまま残ります。
同じURLを、2つのソースに入れても、いいですか？
入れられます。ただし、数字を保存するツールでは、2つのソースが、同じ保存領域を、使います。片方で数えても、もう片方は、更新されるまで、古い数字のままに、見えることがあります。
ソースの名前と、整理のしかた
ソースの数が増えてきたら、名前の付け方を、ルールにしておくと、探しやすくなります。たとえば、「ツールの種類＋場面」の形で、「待機画面（配信前）」「待機画面（休憩）」と付けます。同じ種類のソースが、並ぶので、見分けやすくなります。使わなくなったソースは、すぐに削除せず、目のマークを、オフにして、残しておく方法も、あります。次の配信で、また使うかもしれないからです。