ココフォリアの画面をOBSで録画する時の設定とか。

1.シーンコレクションを作成

OBSを起動したときに開かれてるものを弄りたくないなら、メニュー_シーンコレクションから新規でも複製でも良いから弄って良い画面を作る。
メニュー_ファイル⇒設定⇒映像で基本解像度と出力解像度は1920x1080(16：9)。でもたぶん好きなサイズにして良い。

2.画面を整えていく

◇　盤面　：[<https://ydk.vc/obs-ccfolia-css-board/>](<https://ydk.vc/obs-ccfolia-css-board/>)
お部屋だけを映すやつ。
ドック_ソースにブラウザを作成し、プロパティからカスタムCSSにそのままコピペ。
URLにココフォリアの部屋URLを入れる。サイズは解像度と同じで良い。
表示範囲はプレビュー下の「対話(操作)」から好きな部分にずらしたりズームしたりする。
Altを押しながら縁をドラッグでトリミングができる。

◇　吹き出し　：[<https://ydk.vc/obs-ccfolia-css-balloon-2/>](<https://ydk.vc/obs-ccfolia-css-balloon-2/>)
メインか情報タブで発言すると顔アイコン付きで出てくるアレ。
ドック_ソースにブラウザを作成し、プロパティのカスタムCSSに「メインのコード」をコピペ。
URLにココフォリアの部屋URLを入れる。サイズは解像度と同じで良い。
表示範囲はいじらなくて良い。
オプションの「アイコンを『ココフォリアのデフォルト』に戻す」を入れる。他にも入れたければ下に続けてコピペしていくんだと思う。
@import url～～
:root {
  --image～～
:root {～～
って感じ。

◇　ルームチャット　：[<https://ydk.vc/obs-ccfolia-css-chat/>](<https://ydk.vc/obs-ccfolia-css-chat/>)
私はチャットログとしてメインタブの最新3件くらいが表示されるようにしている。
ドック_ソースにブラウザを作成し、プロパティのカスタムCSSに「メインのコード」をコピペ。
URLにココフォリアの部屋URLを入れる。
サイズは幅は解像度と同じ、高さは必要に応じて高めに設定する。1500くらいで良い。
何件かチャットを送ってサイズを確認しつつ、表示される範囲の幅だけをトリミングする。

最新1件は吹き出しに表示されるため、cssは一部下記のように変更している。
.MuiList-root>div:nth-child(1)>div>div:nth-last-child(n+2):nth-last-child(-n+4)>div {
    display: flex !important;
}
上記は3件表示される。(-n+4)の部分を増やすと表示数が増える。

「チャットログを下付けにするオプション機能」を「メインのコード」の上に入れる。上に入れないと動かなかった。
メイン以外のチャットを表示させたい場合は「対話(操作)」からチャットタブを変更する。この場合上記CSSは変更前のものを使用する。

◇　discordオーバーレイ　:[<https://streamkit.discord.com/overlay>](<https://streamkit.discord.com/overlay>)
まずdiscordを起動する。
上記URLから「OBS用にインストール」をクリックし、「音声ウィジェット」タブを選択。
録音するサーバーとボイスチャンネルを選択する。**選択した瞬間、勝手にボイスチャンネルに入室させられる**ため、必要であれば事前にメンバーに知らせておくと良いかもしれない。
画面右側にURLが作成されるため、これをコピー。
OBSのドック_ソースにブラウザを作成し、URLにペースト。サイズは後でカスタムするので雑で良い。いつでも弄れる。
カスタムしないなら、トリミングしたり拡大縮小したりして好きな位置に配置して終わりで良い。

◇　OBSのDiscordアイコン外観変更ジェネレーター　：[<https://obs-discord-icon.alfebelow.com/>](<https://obs-discord-icon.alfebelow.com/>)
上記オーバーレイを良い感じの表示にするカスタムCSSを作ってくれる。
「２．プレビューを確認」を見ながら「１．見た目の設定」で好きに設定していく。
プレビューの１番目のアイコンはクリックすることで発言中と無言中の表示を切り替えられる。
設定し終わったら「３．CSSをコピー」の中身を全部コピーして、上記オーバーレイのプロパティからカスタムCSSにペーストする。
見切れたり変な表示になっていたらサイズをいじったりトリミングしたり。良い感じにして好きな位置に配置して終わり。

3.音声まわりの設定

・メニュー_ファイル⇒設定⇒音声で、グローバル音声デバイスがすべて「無効」になっていることを確認する。
・ドック_ソースに「アプリケーション音声キャプチャ(ベータ版)」を2つ作成。
discordを起動しておく。ココフォリアの部屋もブラウザで開いておく。
ソースの設定を開いて、ウィンドウからdiscordのボイスチャンネルとココフォリアをそれぞれ選ぶ。
ボイスチャンネルは通話中でないと表示されないかもしれない。
・ドック_ソースに「音声入力キャプチャ」を作成。プロパティで使用しているマイクを選択する。

◇　音声ミキサー
たぶん「マイク」と「アプリケーション音声キャプチャ」2つの計3つが表示されてる。
もし画面整えで「OBSで音声を制御する」にチェック入れていた場合はそれも表示されてる。邪魔なのでミュートにしてプルダウンからHideにする。

◇マイク
トグル⇒フィルターを開く。
左下の「＋」から順に、「ノイズ抑制」「ゲイン」「コンプレッサー」を入れる。
・ノイズ抑制：RNNoise
・ゲイン：7.00dB(でかめに入れとく)
・コンプレッサー(大変声が小さい人間)
比率＿3.00:1
しきい値＿-24.00dB
アタックタイム＿6ms
リリースタイム＿120ms
出力ゲイン＿3.00dB
喋ってみて音声ミキサー上で-24～-18dBくらいになる程度に調整する。

◇アプリケーション音声キャプチャ（ココフォリア音声_調整中）
マイク同様フィルターに「コンプレッサー」「リミッター」を順に入れる。
コンプレッサー：比率＿5.00:1、しきい値＿-30dBで様子見。
リミッター：しきい値＿-15Bで様子見。要らないかも。
音声ミキサー上で-36~-30dBくらいだと良いかもしれない。

◇アプリケーション音声キャプチャ（discord音声）
マイク同様「ノイズ抑制」「ゲイン」「コンプレッサー」を入れる。
・ノイズ抑制：RNNoise
・ゲイン：0.00dB(discord側で音量200%にしても小さければ上げる)
・コンプレッサー
比率＿4.00:1
しきい値＿-24.00dB
アタックタイム＿6ms
リリースタイム＿120ms
出力ゲイン＿0.00dB
喋ってもらった時に音声ミキサー上で-24～-18dBくらいになる程度にdiscord側で調整する。

適宜録画を試して音量バランスを確認する。

4.メモ

◇　OBSの音声フィルター順
上から順にかかるっぽい。ノイズ抑制を始めに入れなさい。

◇　コンプレッサーについて
比率：しきい値を超えた音量をどれくらい強く抑えるか。値が大きいほど平坦になるらしい
　　　迷ったら4：1で良い
しきい値：設定した値を超えた音量を比率の分だけ抑える。

◇　しゃべってるときにBGMが自動で小さくなってほしい／小さくならないでほしい
PC本体とOBSどちらでも設定できる。
・PC
コントロールパネルからハードウェアとサウンド⇒サウンド
出てきたウィンドウの通信タブで、好きなのにチェック入れる。
・OBS
音量ミキサーでBGMに使用しているソースのフィルターを開く
コンプレッサー内のゲインの下に「ダッキングソース」があるので、そこでマイクを設定すると自分がしゃべってる間はBGM音量が下がる。

◇　画面の構成について
ソースに画像で背景を置いて、盤面CSSでココフォリアの背景パネル部分だけトリミングして、立ち絵入れたり吹き出し入れたりそれ以外の要素を並べていくのも良い。
一番ココフォリアの部屋に縛られないと思う。

◇CSSを使わずにチャットログを表示したい
ソースにブラウザを新規作成、ココフォリアのURL末尾に/chatを加えて記入。
サイズは幅500高さ700くらいでお好み。トリミングで入力欄やスクロールバーとかの上下右の不要部分を切る。
対話(操作)でチャットタブを切り替えて好きな場所に好きな大きさで置く。
上記サイズだと短文が5件くらい表示されると思う。