Among Usの録画をOBSで行い、Discordのメンバーと連動させてアイコンを表示させるカスタムCSSについて、以前こんな記事を書きました。
コンセプトとしては、ユーザー別にOBSのソースを持たずに、CSS１枚で済ませよう（画像も1枚で済ませたい）という主旨でした。仕組みを説明することを重点的にしたために、少し泥臭いCSSになっているので、今回はこれをもう少し使いやすくしていきます。
…前の記事を公開してからもう半年経っていることに驚きました…今さらの後編です！
（もう15人アップデート来ちゃったよ）
前回のDiscord Streamkit OverlayのカスタムCSSで設定が面倒だった点
前回の記事では、アイコン画像をスプライト化し、background-positionを調整することでカラーを変更していました。
対応表を覚えてしまえば早いのですが、数値を直接入力するのはあまり直感的ではありません。
しかも…
/* なつみ */
li.voice-state[data-reactid*="ユーザーID"] .user .name::before {
background-position: -40px 0;
}
/* すずき */
li.voice-state[data-reactid*="ユーザーID"] .user .name::before {
background-position: -280px 0;
}
/* やまだ */
li.voice-state[data-reactid*="ユーザーID"] .user .name::before {
background-position: -320px 0;
}
・
・
・
これだとDiscordサーバの人数が増えてきたら、めちゃくちゃ長くなります。
ユーザーIDで区別できないので誰の分なのか名前をコメント入れてるのも相まって、1件あたり4行消費しています。
当日の参加者だけを毎回設定しているわけではなく、よく一緒にプレイする人の分はこのリストにずっと入れてファイルを保存しているので、とにかく長いです。
この記事を下書きしている現在はまだ10人なのでなんとかなっていますが、Among Us自体が15人でプレイできるようになって、15人分用意すると、エディタでもスクロールしてユーザーを探さないといけなくなってきます。
みんながわちゃわちゃと色を変えているときに裏でユーザーを探しながらスクロールして調整するのは面倒です。
というわけで、もっとカラー指定が楽にできるようにコードを改修していきましょう。
CSS Custom Propaties（CSS変数）を使用してカラー名の指定を可能にする
CSS変数を使うと、自分で決めたワード（変数）を合言葉にして、あらかじめ決められた値を呼び出すことができます。
カラー名を合言葉にして、その名前を入れたら特定のbackground-positionを呼び出してそこに入れるということが可能になります。
つまり、設定したいカラー名をそのまま記述できるようになるということです。
IE11はカスタムプロパティ未対応でPolyfillを使用しないといけないようです。
OBSのソース「ブラウザ」でDiscord Streamkit Overlayが読み込まれる際には問題ありません。（たぶんChromiumベース）
CSS変数について知りたい方はこちらを参照してください。
今回の場合だと、
:root {
--banana: 0 0;
--black: -40px 0;
--blue: -80px 0;
--brown: -120px 0;
--coral: -160px 0;
--cyan: -200px 0;
--gray: -240px 0;
--green: -280px 0;
--lime: -320px 0;
--maroon: -360px 0;
--orange: -400px 0;
--pink: -440px 0;
--purple: -480px 0;
--red: -520px 0;
--rose: -560px 0;
--tan: -600px 0;
--white: -640px 0;
--yellow: -680px 0;
}
/* なつみ */
li.voice-state[data-reactid*="ユーザーID"] .user .name::before {
background-position: var(--purple);
}
/* すずき */
li.voice-state[data-reactid*="ユーザーID"] .user .name::before {
background-position: var(-lime);
}
/* やまだ */
li.voice-state[data-reactid*="ユーザーID"] .user .name::before {
background-position: var(--banana);
}
といった感じにすれば、数字を覚えていなくてもカラー名を記述するだけで直接background-positionの値を書き換えることができます。
「カラー名のスペリングが覚えられへんねん」という人もいるかもしれませんが、それは自分で覚えられる名前にしといてください。murasakiとかにしとけ。
しかし、上記のような感じだと、最初のコードとそこまで変わっていません。
スクロールしてユーザーを探すのが嫌だという当初の課題は解決していませんね。
そこでさらに手を加えていきます。
CSS変数の値にCSS変数を使用する
:root {
--banana: 0 0;
--black: -40px 0;
--blue: -80px 0;
--brown: -120px 0;
--coral: -160px 0;
--cyan: -200px 0;
--gray: -240px 0;
--green: -280px 0;
--lime: -320px 0;
--maroon: -360px 0;
--orange: -400px 0;
--pink: -440px 0;
--purple: -480px 0;
--red: -520px 0;
--rose: -560px 0;
--tan: -600px 0;
--white: -640px 0;
--yellow: -680px 0;
}
:root {
--natsumi: var(--purple);
--suzuki: var(--lime);
--yamada: var(--banana);
}
/* なつみ */
li.voice-state[data-reactid*="ユーザーID"] .user .name::before {
background-position: var(--natsumi);
}
/* すずき */
li.voice-state[data-reactid*="ユーザーID"] .user .name::before {
background-position: var(--suzuki);
}
/* やまだ */
li.voice-state[data-reactid*="ユーザーID"] .user .name::before {
background-position: var(--yamada);
}
いかがでしょうか？
:root {
--natsumi: var(--purple);
--suzuki: var(--lime);
--yamada: var(--banana);
}
この部分で、新たなユーザー名CSS変数を設定し、先に設定したカラー名CSS変数を呼び出しています。
CSS変数にCSS変数を使うことができるんですね！
でも、CSSをよく書く人にとっては、違和感がありませんか？
そうです、:rootセレクタを2回指定しているのが、なんだか無駄に感じます。
もしかして、カスタム変数をわけて設定しなくてもいけるんじゃないですか？
はい、いけます。
:root {
--banana: 0 0;
--black: -40px 0;
--blue: -80px 0;
--brown: -120px 0;
--coral: -160px 0;
--cyan: -200px 0;
--gray: -240px 0;
--green: -280px 0;
--lime: -320px 0;
--maroon: -360px 0;
--orange: -400px 0;
--pink: -440px 0;
--purple: -480px 0;
--red: -520px 0;
--rose: -560px 0;
--tan: -600px 0;
--white: -640px 0;
--yellow: -680px 0;
--natsumi: var(--purple);
--suzuki: var(--lime);
--yamada: var(--banana);
}
ひとつのセレクタ内で設定したCSS変数を、そのセレクタの中で呼び出して使用することが可能です。
まだだ…もっとやれる…もっと手を抜きたいんだ…！
ちなみに、CSS変数の呼び出しは記述順序が影響しないので、このようにユーザー名変数を一番上に持ってくることも可能です。
後に書かれているCSS変数を呼び出すことが可能なんですね。
:root {
--natsumi: var(--purple);
--suzuki: var(--lime);
--yamada: var(--banana);
--banana: 0 0;
--black: -40px 0;
--blue: -80px 0;
--brown: -120px 0;
--coral: -160px 0;
--cyan: -200px 0;
--gray: -240px 0;
--green: -280px 0;
--lime: -320px 0;
--maroon: -360px 0;
--orange: -400px 0;
--pink: -440px 0;
--purple: -480px 0;
--red: -520px 0;
--rose: -560px 0;
--tan: -600px 0;
--white: -640px 0;
--yellow: -680px 0;
}
これならDiscordサーバに新しく人が入ってきても、あらかじめ下の方にメンバーを追加しておき、プレイ当日にはコードの上のほうだけ見てカラーをサクサクっと設定することができます。
各ユーザーのカラー設定をコードの一番上にまとめて持ってくることが可能で、カラー名を直接記述できて、しあわせになりました。
基本的には後述の指定が優先されますが、セレクタ詳細度に差がある場合は詳細度が高い方で上書きされます。
そのほかにも変数が定義されていない場合の処理は意外なので覚えておくのがおすすめです。