【改訂版】Discord Streamkit Overlayテスト用HTML&カスタムCSSを作りました

やっぱりタイトルが長い!!!

2022年3月に更新しました!
この記事ではDiscord Streamkit Overlayのテスト用HTMLの使い方、およびカスタムCSSについてのご案内を掲載しています。
テストがしやすくなった&カスタムCSSがもっと簡単に使えるようになった(はず)です!

続きをどうぞ!

[Ad]

目次 [目次を閉じる]

はじめに

実況配信などではお馴染み、Discordの通話状態を表示してくれるDiscord Streamkit Overlay
サンプルcssとかAmong Usのクルーがぴょこぴょこするジェネレータとかが既にあるわけですが、元Web系SEアカツキユウ、cssは自分でカスタムしたいわけですよ。

しかしボイスチャットに入ってテストして…とやろうとしても、自分ひとりしかいないから分からない…なんてこともよくある話。
という経緯でテスト用HTMLを作ったわけですが、以前作ったものを更新して、もっと使いやすくしました。
このテスト用HTMLを使用する際に分かったことのメモや、カスタムCSSについてのご案内なども書いています。

皆様の参考に、あるいはお役に立てますように!

テスト用HTMLの使い方

以前はファイルをダウンロードしてローカルで確認する形式を取っていたのですが、今回の更新からGithubのURLを指定することでテストHTMLを呼び出せるようにしました。
また、URLにユーザー数を指定してやることで表示する人数を変えられるように変更しました。

それでは、以下使い方です。
操作画面のスクショはStreamlabs Desktop(以下、SLOBS)ですので、OBSをお使いの方は読み替えてください。

デフォルトの表示イメージ

SLOBS内に読み込んだイメージです。
左が初期状態(10人)、右はユーザー人数指定で15人分表示したものです。
ユーザー人数の指定の仕方は後述します。

配信画面へ取り込んで確認する

  • ソースを追加(+ボタン)から、「ブラウザソース」を選択
  • 新しいソースを追加」を選択し、適当な名前を付ける
  • ブラウザソースの設定」画面は以下のようにする。
    • 「URL」にこれをコピペ⇒https://akatsuki-yu.github.io/discordso-tester/
    • 幅と高さは、配信画面のサイズや使用したいcssに応じて。基本的に幅1920、高さ1080でいいと思います。
    • 「カスタムcss」欄に、テストしたいcssをコピペする。

ブラウザで表示して確認する

https://akatsuki-yu.github.io/discorddso-tester/にアクセスすれば表示出来ます。

ローカルに保存したい場合、データはGithubのプロジェクトページからダウンロード出来ます。

保存はファイル一覧が表示されている箇所の右上、緑色の「Code」ボタンを押し、「Download ZIP」をクリックすると、プロジェクト内のデータがまとめてダウンロード出来ます。
自作cssを読み込んで使う場合は、index.html内に読み込みタグを追加してください。
例)index.htmlと同階層にcustom.cssを置いた場合
<link rel="stylesheet" href="./custom.css">

表示確認はGoogle Chromeをおすすめします。
SLOBSでの表示が概ね一致しました。
特にpx単位で調整する場合などは、FireFoxだとズレがあるようでした。

表示する人数を変更する

配信画面へ取り込む場合もブラウザで表示する場合も共通です。
URLの後ろに?u=(数字)を追加すると、人数が変わります。
例)15人表示したい場合
https://akatsuki-yu.github.io/discorddso-tester/?u=15

デフォルトでは10人表示するようになっています。
最小は1、最大は20です。それ以外の数値や数値以外を入力すると、10人で表示されるようになっています。
表示が遅くなるおそれがあるので人数制限をかけています。
(コラボ配信でも20人分あれば足りると思ったので)

現在判明している不具合

HTMLもcssも同じはずなのに、何故かアイコンの表示開始位置が本家と異なっているようです。
margin:16px分上に表示されている? 原因が不明だがとりあえずそのまま。

過去Verのダウンロード

GitHubのプロジェクトページのHTMLは、JavaScriptで動的にユーザーを増やしています。
このままだとソースが読みにくい、という場合は以下のリンクから過去Verをダウンロードして読んでみてください。
ソースの構造はGithub版で表示するものと全く一緒です。(ユーザー名などが異なるのみ)
テストHTMLのダウンロード

カスタムcssについて

配布しているカスタムcssを使いたい

数自体が増えて来たことや、説明が大幅に増えたため、Assets/streamに移動しました。
過去に掲載していたCSSは、改良を加えた上でアップしなおします(取説を書くのに時間がかかってます)
第一弾として、縦並びCSSを公開していますので、ご利用ください!

以降の追加はTwitterでお知らせします(@akatsuki_yu または @albalunaworks

カスタムcssを自作したい

Githubのプロジェクトデータ内にあるcss/custom_base.cssをコピーしてお使い下さい。
このファイルには、デフォルトcssの内容に加えて、html部分にベタ入力されているstyleの内容もメモしてあります。
不要なソースは削除してください。

HTMLが読んでいるcssについて

HTMLが読み込んでいるcssはプロジェクトデータ内のoverlay/df54f6f003d712eb9bf4.cssです。
このデータはDiscord Streamkit Overlayが読み込んでいるcssファイルをダウンロードしたものです。
Discord Streamkitのサーバーから直接読み込むことも試みましたが、読み込むファイル名が変わることがある(もとのファイル名は削除される)ようなので、確実にcssを適用するためにダウンロードしたものを使用しています。

カスタムcssおぼえがき

自分がやってみたこととかを備忘録も兼ねて。

ユーザーひとり分のHTMLソース

以下のソースがひとり分のソースです。
このカタマリを人数分作ると、複数人並んでいるように作れるということです。
ソース内の数字の羅列のうち、18ケタの数字部分はDiscordのユーザーIDです。
このIDを利用して、特定のユーザーに固有のcssを適用することが出来ます。
ユーザーIDの取得方法
参考:Discord StreamKit Overlay Sample

<li class="voice-state" data-reactid=".0.0.0.$000000000000000000/=1$000000000000000000">
	<img class="avatar" src="./ico/player0.png" data-reactid=".0.0.0.$000000000000000000/=1$000000000000000000.$=10">
	<div class="user" data-reactid=".0.0.0.$000000000000000000/=1$000000000000000000.$/=11">
		<span class=" name" style="color:#ffffff;font-size:14px;background-color:rgba(30, 33, 36, 0.95);" data-reactid=".0.0.0.$000000000000000000/=1$000000000000000000.$/=11.0">ぷれいやー0</span>
	</div>
</li>

Copy

アイコンのサイズ

デフォルトcss上では50pxになっているのですが、画像ファイル自体は128pxのようです。(Chromeのデベロッパーツールで調べた)
なので、テスト用HTMLで表示しているアイコン画像も128pxのものを読み込ませています。
Discordくん、500px×500px以上を推奨してなかったっけ…。
まぁ500pxとかで表示されてもデカすぎるからこれでいいと思う(適当)

フォントの変更

Google Fontsを@importして使えることを確認しました。
最近Google Fontsは日本語フォントが増えて来てカワイイフォントとかも使えますよ~!
見本は「Delta Gothic One」です。

画像について

サーバーのテキストチャンネルに投下した画像のリンクURLから貼れるのを確認しました。
テキストチャンネルがプライベート状態でも読み込めました
リンクURLは、貼った画像の上で右クリックして、「リンクをコピー」を選べば取得出来ます。

日本語で名前の差し替えをしたい場合

Discord StreamKit Overlay Sample の特定のユーザーのアイコンや名前を変更する」などのやり方で名前を変更したい場合の話です。
ここでcontent:に日本語を書くと文字化けします。アルファベットなど、半角の文字列はおそらくそのまま入力しても出ます。
日本語を使う場合はユニコード番号で指定してやる必要があります。
たとえば、「ユウ」なら「30E630A6」という具合です。

変換サイトを使いましょう。私はここ使った。
beforeやafter疑似要素のcontentプロパティで日本語の文字化けを回避する方法

ID指定でユーザーをまるごと非表示

何らかの理由でユーザーを非表示にする必要がある場合、cssで非表示に出来ます。
一応、:nth-child()指定でも同様のことは出来るのですが、メンバーが入れ替わって表示順が変わった時にいちいち書き換えなければいけないので、ユーザーID指定の方が良いと思います。
ユーザーIDは下のソースのUSERIDに記述します。

.voice-container .voice-states .voice-state[data-reactid*="USERID"] {
    display:none;
}

Copy

名前のフォントサイズ指定

@importで読み込んだcss内に記述しても上手く動作せず、カスタムcssにベタ書きすると動作しました。
名前の部分のフォントサイズは(cssに既定のサイズが指定されているにもかかわらず)HTMLにベタ書きされており、@importしたcssよりもカスタムcssに記述したcssの方が優先順位が高くなるためと思われます。
しかしそれでもHTMLにベタ書きされているcssが一番優先順位が高いので、!importantの指定が必須になります。

フォントサイズの最小値はおそらく10px(Chromeの最小値)なので、これより更に小さくする場合はtransform:scale();で小さくしてやる必要があります。
しかし、名前の背景が途中で切れてしまったりする場合があることや、10px以下にすると全然読めないのであまりおすすめしません。10pxでも十分小さいです(画面サイズの100分の1なので…)

imgタグ

これはただのcssの仕様に対する嘆きですが
imgタグには:beforeと:after使えない(置換要素には使えないそうで)
使いたかったんや…

ユーザーIDの取得方法

説明が長いので大項目にしてあります。

ユーザーごとに設定するような項目がある場合、ユーザーIDを取得する必要があります。
下で紹介しているユーザーを個別に非表示する時や、AmongUs用のcssを使いたい時などに使います。
下の説明はDiscordクライアント版の画面ですが、ブラウザ版でも同じ手順で出来ると思います。

開発者モードにする

1度開発者モードにすれば、元に戻すまでそのままなので、この手順は1回でいいです。

①画像の矢印のところにある歯車アイコンをクリックする。
設定画面が開きます。

②詳細設定メニューをクリックして開く。

③「開発者モード」のスイッチをONに。(画像はONの状態)

ユーザーの上で右クリック

あとは、DMやサーバーのチャットなどのところで、アイコンの上で右クリックすると1番下に「IDをコピー」という項目が出ますので、それをクリックすればIDをコピー出来ます。
自分も、他の人でも、フレンドになっているかどうかやサーバーに参加しているか等は関係なくコピー出来ると思います。
このIDを使ってカスタムするものは色々あるので、コピーの仕方は覚えておくと便利です。

おわりに

わたくし10年くらい前にゲーム実況してたことがあるんですが、当時と今とでは環境がガラッと変わってて浦島太郎状態でした。
いい環境になったなぁ…すげぇなぁ…と思いながらcssをぽちぽち書き換え作業してました。
このサイトはcssを自分で書いてるので、そういうの活かせて良かったなって思いました。

なお、css書いてると時間が溶けます。(迫真)

お読みいただき有難うございました!
テスト用データ、是非活用してください!

よろしければ

今後もまとめ記事を書いたり、色々なものを制作したりする活動を継続するために、皆様からの応援メッセージ・ご支援をいただけると嬉しいです。
送っていただけると励みになります! よろしくお願いします!

  • card.user

謝辞

以下、使用素材や参考にさせていただいた記事など。
一部cssでお借りしているデータについては、cssの取説ページに記載し、このページでは省略しています。

Discord Streamkit Overlay

index.htmlとoverlayフォルダ内css、css/custom_base.cssはDiscord Streamkit Overlayのボイスチャット用URLで生成されるHTML、およびその中で読み込まれているcssを抜き出し・整形したものです。
Discord Streamkit Overlay

ユーザーアイコン

商用利用無料、再配布可能なフリーアイコン「Default Icon」を色変更して使用しています。
ライセンスはCC3.0です。
http://www.defaulticon.com/

参考記事

cssカスタムなどにあたり、大変参考にさせていただきました。

更新履歴

  • 2022.03.05:HTMLをバージョンアップ、Githubに移動。cssはAssets/streamへ移動。メモを少し追加
  • 2021.11.20:「Among Us横並び用(サイズ自動調節)」を追加(zipにも追加)
  • 2021.07.17:ユーザーID取得について追記
  • 2021.07.13
    • ブラウザソースの設定値についての記述を追加
    • カスタムcssおぼえがきにユーザーを非表示にする方法を追加
    • 「Among Us用」を「Among Us10人用(縦並び)」に変更。cssを更新。カスタムについての記述を追加
    • じゃんたま用にセンタリングカスタムの記述を追加
  • 2021.06.23:初版