本件はサポート致しません。自己責任でお願いします。
カスタムCSSが動かなくなった際、ココフォリアさんに問い合せをしないでください。
もし配信等で利用される際は、概要欄にURLなど記載頂けると励みになります！
OBSでココフォリアを表示させる時のカスタムCSSについて | U7D05 BAR
https://ydk.vc/obs-ccfolia-css/ココフォリアの吹き出し、自動的に閉じてくれると便利だよね！ということで作りました。OBS側での設定が必要なのと、配信前に事前準備が必要なのが面倒くさいですが、配信画面がスッキリするので割と良いかも？（うちは使ってません……）
超重要事項
今回配布したJavaScriptは必ず紅坂柚月が作成したモノのみを使用することを心がけてください。
JavaScriptはセキュアな情報（ログイン情報など）を盗み取ることが出来てしまうため、悪意あるコードを利用するとアカウントの乗っ取りが発生します。そのため、必ず安全だと判断できるファイルのみを実行するよう気をつけてください。
うちのJavaScriptはGitHubにソースコードもアップロードされてますので、気になる方はそちらを閲覧してから利用してみてください。
事前準備
Windowsの場合
まずはデスクトップ上にOBS Studioのショートカットを作成してください。
ショートカットの作り方が分からない方へ
まずはWindows+Rキーを押し「ファイル名を指定して実行」を開きます。
続いてOBS Studioのインストール先を入力し、「OK」をクリックすることでOBS Studioのインストール先が開きます。
インストールしているOBS Studioのbit数によってパスが変わるので注意してください！
%ProgramFiles%\obs-studio\bin\64bit%ProgramFiles%\obs-studio\bin\32bitインストール先が開いたらobs64.exeまたはobs32.exeがあるはずです。そのファイルを右クリックして「送る」＞「デスクトップ（ショートカットを作成）」を選ぶことでデスクトップ上にOBS Studioのショートカットを作成できます。
OBS Studioのショートカットを作成したら、ショートカットを右クリックして「プロパティ」を選択します。
開いたプロパティの「リンク先」の末尾に「半角のスペース」を入れます。
そしてその末尾に下記の起動オプションを追加します。そして「OK」をクリックして保存してください。
--remote-debugging-port=9222 --remote-allow-origins=http://localhost:9222
起動オプションについて
今回、記載した起動オプションはChromiumで利用されている起動オプションです。
--remote-debugging-port=9222Chromiumをリモートデバッグモードで起動するオプション。9222番ポートを使って外部からDevToolsプロトコルで接続できるようになります。これを付けて起動すると http://localhost:9222 にアクセスすることでJSON形式のエンドポイント一覧（開いているタブやページ）が見られます。
今回はOBS Studio上でココフォリアをJavaScriptで操作するため、この起動オプションを追加してます。
--remote-allow-origins=http://localhost:9222CORS制約を緩和して特定のオリジン（ここではhttp://localhost:9222）からのリクエストをリモートデバッグAPIに対して許可するオプションです。最近のChromiumではデフォルトでリモートデバッグへのアクセスが厳しくなっており、ツールがうまく接続できない場合、このフラグを付けて許可します。
1つめの起動オプションではローカルホストに接続できないため、この起動オプションを追加してます。
保存を終えたらOBS Studioを一度、起動してください。起動したらブラウザにて http://localhost:9222 へアクセスしてください。以下のように Inspectable WebContents というページが開いたら準備完了です。
Macintoshの場合
Macの場合はAutomatorを用いてAPPを作成する方法になります。まずはAutomatorを起動してください。Command+SpaceキーでSpotlightを立ち上げて検索するのが早いかも？
すると保存先を聞かれるので、とりあえずデスクトップなど分かりやすい場所を指定して「新規書類」をクリック。
書類の種類を聞かれるので「アプリケーション」を選択し、「選択」ボタンをクリック。
左メニューの「ライブラリ」から「ユーティリティ」を探して、その中にある「シェルスクリプトを実行」を右側にドラッグ＆ドロップして有効化（追加）してください。
入力欄に下記の内容を記入して、右上の「実行」ボタンをクリック。OBSが立ち上がれば設定に問題はありません。
/Applications/OBS.app/Contents/MacOS/obs --remote-debugging-port=9222 --remote-allow-origins=http://localhost:9222
一旦OBSを終了させ、「ファイル」の「保存」を選択。
無事、APPを作成ができたかと思います。
保存を終えたらOBS Studioを一度、起動してください。起動したらブラウザにて http://localhost:9222 へアクセスしてください。以下のように Inspectable WebContents というページが開いたら準備完了です。
ちなみに
作成したAPPのアイコンを変更することも可能みたい。下記の記事を参考にしてみて！
Linuxの場合
サポート対象外です（多分できるかと思いますが、Raspberry Piぐらいしか環境が無く未確認です）。
配信前の設定
OBS Studioを起動したらブラウザにて http://localhost:9222 へアクセスします。
「CCFOLIA 1.**.** – TRPGオンラインセッションツール」というのがいっぱいあります。なので1つずつ開いて、頑張って吹き出しを表示しているココフォリアを探します（OBSで見えてるないようがそのまま描写されるので、吹き出しを出してないと判断付きにくいかも）。
簡単に見つける方法
まず吹き出しを表示している状態にします。
そして1つずつ開いて、吹き出しが見えるものを見つける。これが一番簡単ね。
吹き出しを見つけたら、下記サイトを開きます。
そしたらコピーボタン（Copy raw file）ボタンをクリックして、JS（JavaScript）をコピーします。
そして「Console」タブに貼り付けて、Enterキーで送信してください。
貼り付けられない！Warningって黄色の英語が出てくる！
Warning: Don’t paste code into the DevTools Console that you don’t understand or haven’t reviewed yourself. This could allow attackers to steal your identity or take control of your computer. Please type ‘allow pasting’ below and hit Enter to allow pasting.
これを翻訳すると以下になります。
警告：理解していないまたは自分で確認していないコードをDevToolsコンソールに貼り付けないでください。これにより、攻撃者があなたの身分を盗んだり、コンピュータを制御したりする可能性があります。貼り付けを許可するには、以下に「allow pasting」と入力し、Enterキーを押してください。
つまり、コピペする前にallow pastingと自分で入力し、Enterキーで送信する必要があります！
問題無く実行できると、OBS Studioのブラウザ内に「OBS Message Closer」というウィンドウが追加されてます。これで実行は完了です！
OBS Message Closer でできること
×ボタン
OBS Message Closer を閉じます。
配信するときは必ず閉じてね！じゃないと配信画面に OBS Message Closer が載っちゃうよ！！
秒数
吹き出しの描写が終わってからｎ秒後に閉じるよ、という設定。たとえ長い文字列を送信していても、描写が終わってから閉じるカウント開始なので、勝手に途中で閉じることはないよ。
デバッグ
とくに意味は無いよ。閉じるまで何秒経過してるかな？とか情報見れるぐらい。
FAQ
再度 OBS Message Closer を表示させるには？
再度、JavaScriptを送信することで OBS Message Closer が表示されます。
OBS Message Closer を停止するには？
OBS Studio で吹き出しのソースを右クリックして「プロパティ」をクリック。
そして「現在のページのキャッシュを削除」をクリックすることで無かったことにできるよ。
OBS Message Closer のソースコード
こっちでも動くよ。自分でカスタマイズして使いたいって人向け。
ただTSで書き直すかも？そうなったら注意だね。
