チャット欄が正常に表示されなくなったときの対処法 (仮)

{{date}}

2024年7月下旬から発生している不具合について

(2024/08/03 追記)

「CSSが適用されなくなって、元のまま表示される」という不具合は、YouTubeの仕様変更によるものです。概要をトップページに記載しているのでそちらをご覧ください。

新情報(2023年4月末)

(2023/05/07 追記)

4月末頃からチャット欄が正常に表示されない（すぐに消える）といった現象が発生しているようです。（このページの「要約」より下の部分とはまた別の現象のようです）

Chat v2.0 Style Generator 日本語版を使っている場合

ひとまずCSSを再生成し、CSS上部に書かれているバージョンが「2023.04.29」になっていることを確認の上、OBSにコピペしてみてください。

それでもダメな場合は「フェードイン・フェードアウトのチェック」を外してみてください。

新情報(2023年4月末)

(2023/05/07 追記)

4月末頃からチャット欄が正常に表示されない（すぐに消える）といった現象が発生しているようです。（このページの「要約」より下の部分とはまた別の現象のようです）

Chat v2.0 Style Generator 日本語版を使っている場合

ひとまずCSSを再生成し、CSS上部に書かれているバージョンが「2023.04.29」になっていることを確認の上、OBSにコピペしてみてください。

それでもダメな場合は「フェードイン・フェードアウトのチェック」を外してみてください。

その他のCSSをお使いの場合

別のサイトで販売・配布されているCSSを使用している場合、こちらの手順で動作するようになるかもしれません。※自己責任でお願いします

  1. 現在使用中のCSSを「メモ帳」などにコピペする
    ※元のCSSはバックアップしておくことをオススメします
  2. animで検索する
  3. animとなっている箇所をmyanimに書き換える
    • 具体的には以下2箇所(CSSによってはそれ以上あるかも)です
    • @keyframes animを@keyframes myanimに書き換える
    • animation: ... anim ...;をanimation: ... myanim ...;に書き換える
      ※...の部分はCSSによって異なるのでいい感じに読み替えてください
      ※animation:をmyanimation:に書き換えてしまうと動かなくなります
  4. 書き換え後のCSSをOBSにコピペする

※画像をクリックすると別画面で表示します

要約

この記事はどういう人向けの記事ですか？

OBSでチャット欄を表示しようとすると、以下のような症状が出てしまい困っている人向けの記事です。

どうすれば直りますか？

2023年2月4日現在実質2つの対処方法があるようです。ここでは各手順のメリット・デメリットのみを載せているため、実際の手順はこのページのもう少し後ろの方をご覧ください。

※他の方法をご存知の場合など、なにかございましたら@vvto33までリプライ・DMでご連絡ください

  1. おすすめ度:★☆☆☆☆
    ※手順A～Cがズレるので残していますが、この方法は止めておいた方ががいいです
    OBSの「ブラウザ」でYouTubeからログアウトする or ログインするアカウントを変更する
    メリット
    • これで直るならば一番楽
    デメリット
    • 直るかどうかがわからない
    • メン限配信・年齢制限配信のチャット欄が表示できなくなる
    • 問題の先延ばしにしかならない可能性が高い
  2. おすすめ度:★★★☆☆
    今のCSSに手を加える
    メリット
    • 今のCSSにほんの少し手を加えるだけで使えるようになる
      • 「Chat v2.0 Style Generator 日本語版」のCSSをそのまま使っている場合は再作成するだけでOK
    • メン限配信・年齢制限配信のチャット欄でも表示できる
    デメリット
    • CSSの書き換え作業が必要な場合はややめんどくさいかも
      • 「Chat v2.0 Style Generator」のCSSに追記・改造している場合
      • BOOTHや個人サイトなどで配布・販売されているCSSを使っている場合
    • YouTubeのさらなる仕様変更があるとこの方法でもダメな可能性がある
  3. おすすめ度:★★★★★
    OBSのブラウザ + CSS の方法で表示するのをやめて別のアプリを使う
    （ここではわんコメを想定しています）
    メリット
    • OBSだけでは実現できないレイアウトや動き（チャット演出）も実現できる
    • 今後似たようなことがあってもアプリのアップデートがあれば使える
    • メン限配信・年齢制限配信のチャット欄でも表示できる
    • YouTubeだけでなく複数の配信サイトに対応している
    デメリット
    • 今のCSSをそのまま使い回せない（再設定が必要）

もう少し詳しい説明はありますか？

ページの下の方に置いてますが、下記の手順だけ読めば解決するようになってます。興味がある人向けです。

手順A

記録として一応残していますが手順Bの方がオススメです。

OBS内のブラウザでYouTubeにログイン（ログアウト）する手順はメンバーシップ限定配信のチャット欄をOBSに表示する方法① を参考にしてください。

（ログアウトの場合は「対話」の画面で右上のチャンネルアイコンをクリック→「ログアウト」）

うまくいかない場合は、ページの再読み込みをしたり、チャット欄（チャット欄）の表示に使っている「ブラウザ」を削除し、もう一度チャット欄の「ブラウザ」を追加／CSSの設定してください。

注意

※OBSのバージョンが比較的新しい（バージョン27以上）でなければこの方法は使えません

※OBSがバージョン26以下の場合はOBSを更新してください

手順B

簡単な説明

Chat v2.0 Style Generator 日本語版 で作ったCSSをそのまま使っている場合、CSSを再度作成しなおせばOKです。

Chat v2.0 Style Generator 日本語版のページを再読込し、ページの上の方にある最終更新日が2023/02/03かそれより新しい日付になったことを確認してください。

補足

別のサイトで販売・配布されているCSSを使用している場合、こちらの手順で動作するようになるかもしれません。※自己責任でお願いします

  1. 現在使用中のCSSをメモ帳などにコピペする
  2. yt-live-chat-rendererで検索する
  3. {と}の中からbackground-color: transparent;またはbackground-color: transparent important;を探す
  4. background-color: transparent;またはbackground-color: transparent important;を消す
    ※yt-live-chat-renderer { ... }の中にあるやつだけを消してください
  5. }の後ろに↓のコードをコピペする
    /* Transparent background - 背景透過 2023年ver */
yt-live-chat-renderer {
    visibility: hidden !important;
}
yt-live-chat-renderer * {
    visibility: initial !important;
}
  6. 書き換え後のCSSをOBSにコピペする

※以下の例では金子開発様の【無料配布】なにか見覚えのあるUIのチャット枠とCSSをお借りしています。

手順C

わんコメは今回のトラブルと関係なく動作するようです。

※わんコメおよび開発者のアスティ様はこのサイトとは無関係です

詳しく知りたい人向けの補足

今回のバグ(?)の原因はなんですか？

基本的には2022年秋以降のYouTubeの仕様変更により、CSSの背景透過のコードが動かなくなったのが原因っぽいです。名前に色がついてたりついてなかったりするのと関係してるっぽいです。

もう少し知りたい人向け：

  1. 背景を透過していると新規チャット取得処理中にエラーが発生する
  2. エラーが発生したことで何も取得できない
  3. 「無」を取得した扱いになる
  4. 「無」がチャットに追加される
  5. 結果として何も見えない
ということが起こっているようです

症状が出ている人と出ていない人がいるのはなぜですか？

基本的に症状が出るのは「YouTubeの仕様変更が適用されたアカウントでログイン中 かつ CSSで背景透過を行っている人」のようです。そのため、これに当てはまらない人、具体的には以下のような人は症状が出ていないようです。

補足

YouTubeの仕様変更は全アカウント（ユーザー）に一斉に適用されるわけではなく、少しずつ適用範囲が広がっていきます。「アカウントAではバグるのにアカウントBでは正常に表示される」はこれが理由のようです。（@***** のYouTubeハンドルが使えるタイミングがバラバラだったことをイメージするとピンと来るかもしれません）

仕様変更を解除する方法はありますか？

ないと思います。

OBSを削除して1から設定しなおすと直りますか？

直る可能性はゼロではありませんが、確実に直るとは限りません。むしろ、確率的には直らない可能性の方が高いと思われます。

さらに詳しい説明

OBSをまっさらにするとログイン状態が解除されるため「一時的に直ったように見える」ということはあります。ですが、メン限コメントを映すためにYouTubeにログインすると元に戻ってしまうため、「OBSの削除によって解決する」という可能性は低いと思われます。

もしOBSを削除して1から設定しなおす場合 、念のためにOBSのデータをバックアップしておくことをオススメします。

参考: 【OBS】もうグチャグチャだよ！設定を初期化する方法と、保存して備える方法 (新・VIPで初心者がゲーム実況するには 様)
https://vip-jikkyo.net/reset-obs-to-default-settings

スペシャルサンクス

さけこ。様

宣伝

チャット欄のURLを自動で更新する方法