いまからVTuberを目指す方へ『VTuberの教科書』

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

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

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

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

【OBS】コメント欄をかわいい吹き出しにするCSS配布中【YouTube・Twitch対応】

いま起こっている問題

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

ログイン画面が表示される
こんな感じの画面になる

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

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

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

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

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

試して欲しい対策

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

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

ソースを作り直す

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

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

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

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

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

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

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

  • ダッシュボードのコメント欄のリンク:https://dashboard.twitch.tv/popout/u/~~~
  • 配信ページのコメント欄のリンク:https://www.twitch.tv/popout/<user名>/chat?popout=

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

ダッシュボードのリンクを使った場合

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

ここから取得する

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

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

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

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

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

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

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

CSS
@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に関するご相談も受け付けています。お気軽にどうぞ。

【OBS】コメント欄をかわいい吹き出しにするCSS配布中【YouTube・Twitch対応】

5 COMMENTS

ご返信ありがとうございます!

教えていただいた方法を試そうと思って配信をつけてみた所、何故か直っていました…笑
次不具合が起きた時に試させていただきます!

返信する
すたいる

はじめまして
コメント失礼します。

Twitter検索 (OBS) でこの記事を見つけました。
情報提供になるのですが、一部のログアウトユーザー(非ログイン)にサインアップ フォームを表示させるテストがされていたようです。(下記ツイート参照)
https://twitter.com/zachbussey/status/1646195708951658497
現在はテストが終了しているようなのでサインアップ フォームが表示される症状は発生しなくなっていると思います。

またテストがされてた期間中にOBSではないですが、以下の手順でログイン画面が表示されるときと表示されないときがありました。

手順
1、シークレット モードでChromeを開きTwitchを開く
2、ログイン画面が表示されない場合は一度シークレット モードを終了
3、再度シークレット モードでChromeを開きTwitchを開く
※ログイン画面が表示されるまで繰り返す感じです。

返信する
運営

情報提供ありがとうございます!
テスト+OBSのキャッシュで複雑な状況になっていたんですかね…

もう終了したということは、いまログイン画面が表示される方もOBSのキャッシュさえクリアしてしまえば解決しそうです!
改めて検証して記事に追加しようと思います。助かります!!

返信する

素敵なデザインのCSSのご提供ありがとうございます!

以前はコメント欄が正しく表示されておりましたが、1~2週間程前からログイン画面が表示されるようになってしまいました。
(配信外で自分でOBSにコメントを打つときちんと反映されますが、配信をつけるとログイン画面になってしまいます。)

記事に書かれている方法を全て試しましたが、解決しませんでした…💦
非表示コードを使用してもログイン画面が表示されてしまいます。
使用しているのはOBS studio 29.0.2です。

返信する
運営

いつも使っていただきありがとうございます!

私も情報を集めていますが、完璧な解決策はまだわからない状態です…。
解決した人の中には、OBSstudio 29.0.2の方もいて先日もコメントを表示させながら配信ができていました。
その方はいろいろ試した後、改めてソースの作り直し→リンク再入力でなぜか成功し、本当に謎です。

私のほうで一つ試せていない方法があり、よろしければ試してもらえないでしょうか。
①ブラウザソースでコメントを表示する(ログイン画面が出ている状態)
②ブラウザソースを選択し画面中央の「対話(操作)」をクリック
→ここからブラウザソースを操作できるようになります。
③twitchにログインする

これでうまくいけばよいのですが…。

返信する

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です