【Twitch】ブラウザソースでコメント欄を表示するとログイン画面が表示されてしまう【OBS】

OBSのブラウザソースでTwitchのコメント欄を表示すると、ログイン画面が表示されてしまう問題の対策をまとめていきます。

「今までコメントを表示できていたのに、なぜか急にできなくなった！」という報告を複数受けているので、この記事が役立ってくれれば嬉しいです。

このサイトでも、Twitchのコメント欄をカスタマイズできるCSSを配布しているので、もし解決したらぜひ使ってください。

2023年4月22日【OBS】コメント欄をかわいい吹き出しにするCSS配布中【YouTube･Twitch対応】

いま起こっている問題

Twitchのコメント欄をポップアップし、OBSのブラウザソースで表示すると、ログイン画面が表示されコメントが表示されないことがあります。

その場でログインしても時間が経てば、また再ログインを求められるとのこと。

今までなんともなかったのに急に表示されるようになった、という相談が当サイトにも多数届いています。

困るのが、全員に起こっている問題というわけではなく条件は不明です。

私の場合は、OBS studioのバージョン28.0、29.0.2で確認できず、Streamlabs OBSでは確認できました。

私と同じバージョンのOBS studioで発生している方もいたので、キャッシュのせいなのか、プラグインのせいか・・・不明です。全員に同じ問題が発生するならば、単なる仕様変更として受け入れるしかないのですが、同じバージョンを使っていても、人によって発生の有無は異なるので、どうにか解決したいところです。

試して欲しい対策

正直なところ、完璧な解決策は分かりません。

判明し次第紹介しますが、これで解決した人もいたよという方法を一通りまとめます。

ソースを作り直す

うまくいかなかったら、URLを作り直したりCSSを入れ直したりして、いろいろ試行錯誤されるかと思います。

その際は、ブラウザソースを一度削除して作り直すようにしてみてください。

どうやら以前のデータがキャッシュ(一時保存)されることがあるようで、作り直したらあっさり解決ということもよくあります。

チャンネルページのURLを使う

Twtichのコメント欄のURLには、2種類のリンクがあります。

「ダッシュボードのコメント欄」と「配信ページのコメント欄」です。

OBSのブラウザソースでリンクを使いたいときは「配信ページのコメント欄」を使いましょう。

▼ダッシュボードのリンクを使うとこんな画面になったりします。

▼必ず配信ページのほうからリンクを取得しましょう。

ログイン画面を消すcssを使う

私もStreamlabs版のOBSを使うと、ログイン画面が表示されてしまいます。

そこでログイン画面部分を非表示にするCSSを追記したところ、解決することができました。

カスタムCSSに下記のコードを追記してください。

.chat-signup-gate-overlay{
    display:none;
}

これでログイン部分を非表示にできます。

ちなみに当サイトが運営している「はいしんツールキット」で生成したコードと組み合わせた際の全文はこちらです。

@import url("https://ruri.info/tool/css/tw-fukidashiComment.css");
.chat-line__no-background{
color:#000000!important;
font-family: "Zen Kaku Gothic Antique", sans-serif;
}
.chat-signup-gate-overlay{
display:none;
}

原因や解決策がほかにもあれば教えてください

当サイトにも、相談は多数届いていますが完璧な解決策を提示できていない状態です。

なにぶん、不具合の再現ができない状態なので困っています。

私も何か気づきがあり次第追記しますが、何か情報を持っている方がいましたらぜひコメントをよろしくお願いします。

▼その他CSSに関するご相談も受け付けています。お気軽にどうぞ。

2023年4月22日【OBS】コメント欄をかわいい吹き出しにするCSS配布中【YouTube･Twitch対応】