OBSに関する情報メモブログ

OBS Studioに関する事を主にメモしてます。

OBS の カスタムブラウザドック について

OBS Studioの「カスタムブラウザドック」に関しての記事。
記事投稿日 2022年02月08日、最終投稿更新日 2022年11月24日

カスタムブラウザドックとは?

OBS Studio 24.0 から実装されたOBSの本体画面にドッキング可能なドックを表示してその中にウェブページを開くことが出来る機能です。
github.com

カスタムブラウザドックの開き方

バージョン 27.2 以降

「ドック」→「カスタムブラウザドック」

バージョン 27.1.3 まで

「表示」→「ドック」→「カスタムブラウザドック」

カスタムブラウザドックの使い方

「カスタムブラウザドック」ウィンドウが開かれたら「ドック名」と「URL」を入力して「適用」を押す。
「適用」を押すと「URL」で指定したウェブページが表示されます。
開いたカスタムブラウザドックを削除したい場合は、URL右側にあるボタンを押すと削除することができます。

OBS本体画面にドッキングする方法

ドックが表示された後にOBS本体画面にドッキングする場合は表示されたドックをOBS本体画面にドラッグします。
※ドッキングされない場合は「UIをロック」にチェックが入ってないか確認してください。

動作風景 (画像クリックで拡大表示可)

※もしgifが見えにくい場合は動画版 (YouTube)をご覧ください。

こんな時は

ページが真っ白で表示されない場合

一度「カスタムブラウザドック」画面で右側にある「ゴミ箱アイコン」を押して一度ドックを閉じて再度追加をお試しください。
再度追加で駄目だった場合は、OBSを再起動してみてください。

ページの音声をミュートしたい場合

現在ベータ版でリリースされているバージョン 29.0から右クリックメニューにミュートが追加されました。

ページの検証をしたい場合

現在ベータ版でリリースされているバージョン 29.0から右クリックメニューに検証(Inspect)が追加されました。

活用術

注意点

指定したURLと違うページになってしまう場合
ログインが必要なページを使用した場合、ログイン後に別画面に飛ばされる事があります。
もし別画面になってしまった場合は一度「カスタムブラウザドック」画面で右側にある「ゴミ箱アイコン」を押して一度ドックを閉じて再度追加をお試しください。

Twitter

ツイート画面を表示したい場合
※ログインをする必要があります。

https://twitter.com/compose/tweet
https://mobile.twitter.com/compose/tweet
どちらかをお試しください。

TweetDeck

https://tweetdeck.twitter.com/

効果音ポン出し

soundeffect-lab.info

「ポン出しを使う」で開かれたページを使う。

Twitch

Twitchのダッシュボードを開きたい場合

アカウント連携(設定 → 配信でアカウント接続)を使わずストリームキーで配信をしていて開きたい場合に便利です。
カスタムブラウザドックで開くにはログインをする必要があります。
URLの「お使いのTwitch ID」と書いてる所をご自身のTwitchIDに変更してお使いください。

例 : Twitch IDが「style1925」の場合
https://dashboard.twitch.tv/popout/u/style1925/stream-manager/edit-stream-info

クイックアクション
https://dashboard.twitch.tv/popout/u/お使いのTwitch ID/stream-manager/quick-actions

配信情報の編集
https://dashboard.twitch.tv/popout/u/お使いのTwitch ID/stream-manager/edit-stream-info

アクティビティフィード
https://dashboard.twitch.tv/popout/u/お使いのTwitch ID/stream-manager/activity-feed

チャット欄
https://dashboard.twitch.tv/popout/u/お使いのTwitch ID/stream-manager/chat

ステータス (データ)
https://www.twitch.tv/popout/お使いのTwitch ID/dashboard/live/stats

StreamElements

アクティビティフィードを表示したい場合
※ログインをする必要があります。
https://yoink.streamelements.com/activity-feed?activitiesToolbar=false&popout=true&theme=dark&withSetupWizard=false

StreamElementsのアクティビティフィードを日本語化したい場合
1、下記URLを「カスタムブラウザドック」で開く
https://streamelements.com/dashboard
2、右上のアイコンをクリック
3、English から 日本語 に変更する
4、変更が終わったら追加したパネルは「カスタムブラウザドック」で「ゴミ箱アイコン」を押して閉じる
5、表示したアクティビティフィードページを右クリックして再読み込みする
※上手くいかない場合はOBSを再起動してみてください。

Streamlabs

Recent Events (最近のイベント) を表示したい場合
※ログインをする必要があります。
https://streamlabs.com/dashboard/recent-events

検索ワード : ブラウザドック / パネル /