Chat v2.0 Style Generator 日本語版 Original: https://chatv2.septapus.com/

YouTubeLive + OBSでチャットを映しながら配信する時に使われる" Chat v2.0 Style Generator"の日本語版です。(最終更新日:2024/08/22)
連絡先: x.com

更新情報
  • 2024年8月22日

    ツイートの画像をユーザーIDつきで保存するPC用ツールを公開しました (CSSとは関係ないです)
    「Xに投稿されたファンアートを前に保存したけど、描いた人が誰かわからない…!」にならないよう、あらかじめユーザーIDとポストIDをファイル名として保存するようなツール(ブックマークレット)を作成しました。
    使い方のイメージや詳細はXのポストをご覧ください。
  • 2024年8月16日 (更新:8月20日)

    OBSのアップデートで発生する(らしい)問題と対処法の簡易まとめ

    どのCSSを使っても背景が透過されない問題が7月終盤~8月上旬から発生していますが、8月16日にリリースされたOBS Studio バージョン30.2.3で問題が解消されています
    ただし、OBSのアップデートに伴う仕様や動作の変更があるため、アップデートによって別の問題が発生する可能性があります。特に半年以上OBSをアップデートしていなかった方は要注意です。

    ※個人的には、トラブルを確実に回避したい場合(配信直前などトラブルが起こった場合に対処する時間がない場合)はOBS本体のアップデートをせずに解決する方法を選ぶのもアリだと思います。 詳細な手順等は2024年8月3日の記事 を参考にしてください。

    アップデートを実施する前にはシーンやプロファイルのバックアップを強く推奨します。(参考:【いざという時に備えよう】OBSの設定をバックアップする方法)
    また、Windowsをお使いの場合はいきなりOBSを最新版にアップデートするのではなく、OBSの公式サイトからZIP版をダウンロードし、問題がなさそうなことを確認してからOBSのアップデートを行うのもいいかもしれません。

    OBSのアップデートで発生するトラブルの例(すべての環境で発生するわけではありません)

    • NVIDIA製のグラフィックボードを使用している場合、ドライバーの更新が必要 というOBS公式のアナウンスがあります。(Windowsの場合は531.61以上が必須)
    • アップデートしたのにCSSの問題が解決しない場合はOBS内蔵ブラウザのキャッシュ削除で直る場合があります。
      以下はWindows向けのOBS公式の手順です。Mac/Linux向けの手順はこちら(英語)
      1. OBSを終了する
      2. Windowsキー(田みたいなやつ)を押しながらRキーを押す。
      3. ファイル名を指定して実行の画面が表示されたら
        %appdata%\obs-studio\plugin_config\obs-browser
        をコピペしてEnter
      4. obs_profile_cookiesフォルダを削除する。
      5. OBSを再起動→設定→配信→配信→アカウントを切断を実施後に、アカウント接続をやり直す。
    • YouTube…枠立てや配信開始などが失敗する, 『Precondition check failed』が出る
      • 枠立てに失敗しているように見えるけど実際には成功していて、 YouTube Studio上で枠を確認できるという症状があるようです。
        • OBS上でサムネイルを設定せずに枠立てをし、後からサムネイルを差し替えるとうまくいく…という話があるようです。
        • OBSとYouTubeの連携を解除し、ストリームキーを使用して配信することで、 とりあえず配信ができるようになることもあるようです。(参考サイト)
      • もしかすると、上記「アップデートしたのにCSSの問題が解決しない場合…」にあるOBS内蔵ブラウザのキャッシュ削除で改善かもしれません(未確認)
        また、
      • 通信エラー全般, YouTube以外
        • ネットワーク設定を「規定」に変更してからOBSを再起動することで直ることもあるようです (参考画像)
      • OBSが起動しなくなった/セーフモードでしか起動できない
        • 同様の症状が発生している人は結構いるようです。(Xのポスト検索)
        • OBSのバージョン30.1.2(CSS問題が解決していないバージョン)に下げると起動することもあるようです。
          ダウンロードページ下部のAssetsからお使いのOSに対応するものをダウンロード・インストールしてください。
          CSSが反映されない問題の回避方法は、2024年8月3日の記事を参考にしてください。
      • 映像や音声がちゃんと載らないトラブル
        • そういうトラブルが起こっているらしいですが詳細は不明です。
        • 上記「OBSが起動しなくなった」のようにOBSのバージョンを下げたり、「通信エラーが発生して配信を開始できない」のように設定画面で該当の箇所を「既定」に変えたり、逆に別の項目に変えたりすることで直ることもあるようです。

  • 2024年8月17日

    透過動画素材を圧縮して軽量化するツールのテスト版 (Windows用)

    透過動画素材を圧縮して軽量化するツールのテスト版 (Windows用)Xで公開しました
    ファイルが大きすぎてOBSに負荷がかかっているような場合に役立つかもしれません。

  • 2024年8月3日 (更新:8月20日)

    CSSで背景が透過されない問題をOBSをアップデートせずに解決する方法

    YouTubeの仕様変更(セキュリティアップデート)により「どのCSSを使っても背景が透過されない」という問題が発生しています。
    8月16日朝のOBS本体のアップデート(バージョン30.2.3)で問題は解消されていますが、アップデートによって別の問題が発生するケースも少なくないようです。(特に久しぶりにOBSをアップデートした場合
    ここではOBSのアップデートをせずに解決する方法を紹介します。

    対応/対策:
    時間がかからない順に紹介しています。それぞれメリットデメリットがあるので、一番良いと感じる方法をお選びください。

    1. (所要時間:1分)
      チャット欄の不要な部分をトリミングする方法です。
      CSSの適用を諦める一時しのぎな方法ですが、一番手軽でとにかく早いです。
      ALTキーを押しながらチャット欄のサイズを変更するとトリミングができるので、チャット欄に表示されている「トップチャット」と「下の部分」をトリミングすると良いと思います。
    2. (所要時間:3~5分)
      Chronecoさんが公開されているSigmanuts(修正版)というアプリを使用する方法です。
      外部アプリの導入が必要ですが、今のCSSをそのまま使用できます
      ただし、「YouTubeが仕様を戻したり、OBSが対応するまでの一時的な手段としてお使いください」とのことですので、その点にご注意ください。
      詳細は@Chronecoさんのポストをご覧ください。
    3. (所要時間:5~15分ぐらい)
      CSSを使わないアプリ・サイトを導入する方法です。
      アプリのダウンロードやサイトへの登録などの初期設定が必要ですが、今後似たようなトラブルが起こったときの備えにもなるので、オススメの方法の1つです。
    4. (所要時間:5分ぐらい)
      OBS本体はそのままで、内蔵ブラウザだけを修正版に差し替える方法です。
      今のCSSがそのまま使用可能で、新しいアプリの導入も不要ですが、 Windows 64bit版のOBS(そこそこ新しいバージョンに限る)のみに対応した方法で、OBS公式ではない場所から修正版をダウンロードする方法であることに注意してください。
      OBS内蔵ブラウザの修正コードを作成したのも、修正版を独自に公開しているのもこのサイトの管理者ではありますが、自己責任でお願いします
      • こちらからZIPファイルをダウンロード→中身をすべて取り出す→差し替えプログラムを実行…の3ステップです。
      • OBSが標準フォルダ以外にインストールされている場合は、手動でファイルを差し替える必要があります。
      • 動作確認はしているつもりですが、すべての環境で改善するかどうかは未確認です。
    5. (所要時間:10~15分ぐらい)
      今後のために一応残していますが、効果が薄すぎるので強く非推奨です。
      OBSの「ブラウザ」の"対話"でYouTubeのアカウントを切り替えると直るかもしれません。
      アカウントによって症状が出たり出なかったりするのでGoogleアカウントガチャになりますし、今(10日現在)は全アカウントで試してもダメな可能性が高いです。
      メンバーシップ限定配信のチャットを表示する方法の手順を参考に、
      • とりあえずログインしてみる
      • ログインしているならログアウトしてみる
      • 別のアカウントでログインしなおしてみる
      と、直る可能性があります。
      ※OBS内蔵ブラウザを差し替える方法と違ってOBSの公式の機能を使うためセキュリティ的には安全な方法ではありますが、根本的な解決策ではなく確実な方法でもなく別アカウントの情報が配信に載らないように気をつける必要があることにご注意ください。

    原因:

    • この問題はCSSのコードが原因ではなく、YouTubeのセキュリティアップデートによるものだと思われます。
    • このYouTube側の仕様変更により、OBSによるCSSの上書き処理が、ページの不正な改竄としてブロックされています。(OBSの更新で修正予定)
    • 仕様変更が全ユーザーで同時ではなかったため症状が出るまでに時差がありましたが、8月2週目ぐらいから急速に症状が出た人が増えたようです。

  • 2023年8月6日
  • 2023年7月31日
    • スーパースティッカーの金額表示のフォントサイズを修正しました。
      ※CSSの再生成が必要です
  • 2023年7月29日
    • Windowsが対応していない一部の絵文字を正常に表示できるようにしました。
      ※CSSの再生成が必要です
    • 🇯🇵いろいろな旗
    • 🩵水色のハート
    • 🪼くらげ
    • など
  • 2023年7月25日
設定のバックアップ・復元
かんたん設定:
 
 


フォント(共通設定):
色の設定:
本文の色(通常のチャット):
名前(チャンネル名)の色:
マイルストーンチャット(メンバースパチャ)のメッセージ部分:
 
背景色:
スライダーを… 左:透明 / 右:塗りつぶし
チャット本文の設定:
アイコンの設定:
名前(チャンネル名)の設定:
時刻の設定:
スーパーチャット関係:
スーパースティッカー:
フェードイン/アウト(古いコメントを消す):
実験中:
※OBSブラウザの「対話」でトップチャットから
チャットの切り替えをしたい場合にチェックを入れてください
※実験中の機能は正常に動かない可能性があります。
不具合を見つけた場合は X(旧Twitter) までご連絡いただけると嬉しいです。
プレビュー: 背景を暗くする
$5.00
$500.00
12:00 AMチャンネル管理者チャンネル管理者のコメントです
12:00 AMモデレーターモデレーターのコメントです
12:00 AMメンバーさんメンバーシップに登録している人のコメントです
12:00 AM視聴者さん123123ABCabcABCabcひらがなカタカナ漢字!?
これはスーパーチャット本文のサンプルです
メンバーマイルストーンチャットの本文!
スーパーチャットの本文その2。
CSS: