DISCORDで喋ってる人を分かり易くするカスタムCSS(2023年最新)


1.はじめに

2022年12月頃、Discordのアイコンをストリームソフトへ表示するStreamKitのDOMが変更され、元々作っていた当サイトのツールが稼働しなくなりました。ツール側は既に修正済みであり、本記事はその修正版になります。

2.変更内容

旧版記事で紹介していた際のCSSは以下になります。公式StreamKit側で<li>、<img>周りの構造が変更されており、<li>のクラス、他属性を指定するセレクタが利かなくなってしまいました。

li.voice-state:not([data-reactid*="⑥で控えたID"]) { display:none; }
.avatar {
  content:url(⑤で控えた画像URL);
  height:auto !important;
  width:auto !important;
  border-radius:0% !important;
}

.speaking {
  border-color:rgba(0,0,0,0) !important;
  position:relative;
  animation-name: speak-now;
  animation-duration: 1s;
  animation-fill-mode:forwards;
}

@keyframes speak-now {
  0% { bottom:0px;  }
  15% { bottom:10px;  }
  30% { bottom:0px;  }
}

li.voice-state{ position: static; }
div.user{ position: absolute; left:40%; bottom:5%; }

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

本当は:has()を使ってまとめて処理をしたい個所があったのですが、コードに不備があるのかOBSのブラウザでは上手く動かないのか動作せず、回りくどい書き方になってしまったかもしれません。

2-1.指定のユーザ以外のアイコン・ネームタグを非表示にする

前回と同様、<li>に画像を差し込みたかったのですが、ユーザIDが<img>のsrc属性でしか指定出来なかったため画像を差し替える形になっています。

/* 選択したユーザ以外の画像を非表示にする */
img:not([src*="ユーザID"]){ display:none; }
img:not([src*="ユーザID"])+div{ display:none; }
li{ position:fixed;top:15px;left:0;right:0; }

/* アイコンを立ち絵画像に差し替える */
img[class*="Voice_avatar_"]{
  content:url("画像URL");
  height:auto !important;
  width:95% !important;
  border-radius:0 !important;
}

2-2.発話時のアニメーション

元々「.speaking」クラスの指定で何とかなっていた個所ですが、2023年1月現在は「.Voice_avatarSpeaking__lE+4m」というクラス名になっています。おそらく変わることのないであろう「.Voice_avatarSpeaking」の部分で部分一致するようセレクタを変更しています。

/* 発話状態の設定 */
img[class*="Voice_avatarSpeaking"]{
  border-color:rgba(0,0,0,0) !important;
  position:relative;
}

3.新機能

元々、最上位の<li>に跳ねる・明滅するなどのアニメーションを設定していたところ、今回の更新で<li>内の<img>に発話時のアニメーションを指定するという形になりました。

(当時の筆者のCSS習熟度の都合もあり)変更前の構造の時に出来たのかはもうわかりませんが、今回から<li>にもアニメーションを指定することで非発話時でも再生される待機モーションという要素を追加しました。

第一弾として「浮遊アニメーション」を実装しています。これは差し替えた画像が常にふわふわと上下にゆっくり動き続けるというものです。多くの場合立ち絵に差し替えられるので、喋っている時以外静止しているよりは動きのある配信画面が出来るのではと思われます。

複数アニメーションは普通にできるらしい(「,」区切りで指定)ので当時の僕は勉強不足でしたね……。

4.さいごに

まず最初に、今回の仕様変更から修正までの間にツールを使えない状態に陥ってしまった方々、申しわけありませんでした。そしていつも使ってくださりありがとうございます。修正するまでの間、多くの方が代替案の作成や情報の拡散を行ってくださりとても助かりました。

また、以前作ったものと比較して「この書き方変だな」というところも見えてきましたので、機能に影響が出ない程度にスリムでカッコいいコードになるようサイレント修正入るかもしれません。バグなど出ないよう注意します。

引き続き本ツールをより良いものに出来るよう努めていきますので、今後も何卒宜しくお願いします。

以上

一枚の画像からパラパラ漫画を生成する



今回作ったものは以下。ブックマークするならこちらをどうぞ。
CSSパラパラ漫画メーカー


はじめに

世の中には頭のいい人がたくさんいるもので、先日「CSSスプライト」と呼ばれる技術を知りました。

Webページ上でたくさんの画像を参照する処理を減らすべく、事前に必要な画像を一枚にまとめて、ブラウザ上では「その一枚の画像の特定の領域のみCSSで制御して表示させる」というもの。
確かに画像を読み込む回数が減る……なるほどって感じ。

今回はこの技術を用いて以下のような「複数のコマを横につなげた画像」からパラパラ漫画を作るツールを作ってみました。透過画像も利用可能。画像の種別はWebページに利用可能なものであれば行けるはず。
(※GIF画像作ってるわけじゃないよ)

何が起きるか説明するより見た方が早いので デモページ を見て。
……まぁ上記画像が一枚ずつコマ送りにされるだけです。

ツールの実態はPHPで作られたページでして、画像やらアニメーションの情報はURLから変数で渡してあげます。僕一人が使うだけならこのままでもいいのですが、利便性向上と他の人に使ってもらいたいなぁって時の為に必要な情報からURLを生成するフォームを作りました。

利用場面は正直分かんないですが、生成されたURLをOBSのブラウザソースに渡してあげれば配信画面なんかでも表示できたりするので、画面のにぎやかしくらいにはなるかもです。(元となる画像の用意は手間ですが……)

ではツールの簡単な説明だけ。

使い方

フォームは以下のような具合です。

各項目の解説は以下の通り。(そこまで説明することない)

  • 画像URL:利用する画像のURL
  • 1コマの横幅:画像全体ではなく、1コマあたりの横幅。(画像全体の横幅をコマ数で割った長さ)
  • 縦幅:画像の縦幅。めっちゃ長くしても元画像の縦幅以上にはならない
  • コマ数:何コマ分再生するかの指定
  • 1周/秒:全コマ分再生し終えるまでの時間
  • ループしない:これをチェックすると最後のコマで停止する。デフォルトはループする

「生成」ボタンを押したらURLが出てきます。
後はこのURLを好きに使ってくださいまし。

さいごに

今回参考にさせて頂いたのは以下のサイト。欲しい情報がピンポイントで見つかった。嬉しい。(粉蜜柑)

本記事はツールの紹介が出来ればそれでいいので、PHPやstyle要素の解説はせんでおきます。前述の通り作った本人でさえ使い道はよくわかりません故、ちょっとしたオモチャだと思ってくださいまし。

それでは、以上。

Discordで喋ってる人を分かり易くするカスタムCSS



(2019/09/01追記)本記事の内容はこちらにてツール化してます。画像URL・DiscordのユーザID取得、配信ツールへの設定方法が理解できた方はツールの方をブックマークした方が楽になるかもしれません。

(2023/01/28追記)StreamKit側の仕様変更に伴い、最新版に合わせた仕様に変更しています。変更内容については下記記事に掲載していますので、改変などされる場合はこちら参考にしてみてください。


Discordのストリームキットで配信ツール上に表示される発言者を分かり易くするという手法はメジャーなものかと思いますが、それをさらにカスタムCSSで「アイコン」から「立ち絵」に改造できたのでご紹介。

以下の右側(発言毎に跳ねる魔理沙ちゃん)のような動きをするカスタムCSSを例に設定手順を掲載します。

目次

  1. ボイスウィジェット取得
  2. 立ち絵・ユーザ情報取得
  3. カスタムCSS作成
  4. 配信ツールへ取り込み(OBSの場合)

ボイスウィジェット取得

① [Discord Streamkit Overlay]へアクセス。

② お使いの環境に合わせて[OBS]か[XSplit]を選択

③ [VOICE WIDGET]>[該当のサーバ]>[該当のボイスチャンネル]選択してウィジェットのURL取得(URL控え)

立ち絵・ユーザ情報取得

④ ディスコードのチャットに、使用したい立ち絵画像をD&Dでアップロード
※URL参照できる場所であればディスコード外でも可

⑤ 「」でアップロードした画像を右クリックして[リンクをコピー]選択(URL控え)

⑥ ディスコードサーバーのメンバーから立ち絵を適用するユーザを右クリックして[IDをコピー]選択(ID控え)


(2019/11/11追記)IDのコピーはDiscordで「開発者モード」を有効にしていないと実行できません。開発者モードは[ユーザー設定]>[アプリの設定]>[テーマ]で有効にできます。
教えてくれた鎌足さん( @kamatari_san )、ありがとうございます!


カスタムCSS作成

⑦ 以下のソースを編集([⑥で控えたID]、[⑤で控えた画像URL]の二か所修正)

li.voice-state:not([data-reactid*="⑥で控えたID"]) { display:none; }
.avatar {
  content:url(⑤で控えた画像URL);
  height:auto !important;
  width:auto !important;
  border-radius:0% !important;
}

.speaking {
  border-color:rgba(0,0,0,0) !important;
  position:relative;
  animation-name: speak-now;
  animation-duration: 1s;
  animation-fill-mode:forwards;
}

@keyframes speak-now {
  0% { bottom:0px;  }
  15% { bottom:10px;  }
  30% { bottom:0px;  }
}

li.voice-state{ position: static; }
div.user{ position: absolute; left:40%; bottom:5%; }

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

配信ツールへ取り込み(OBSの場合)

⑧ ソースから[ブラウザソース]選択(ソース名は任意)

⑨ URLに「」で控えたURLを指定

⑩ カスタムCSSに「」で編集したソースを貼り付け


手順は以上。

対象のユーザがDiscord通話に参加していれば動く立ち絵が表示されるはずです。
ちょっと手間ですがコラボなんかの際は上記手順を人数分実施します。

因みに最初に紹介した動画の左側(発言毎に明るくなる霊夢ちゃん)のような挙動をさせる場合は⑦で編集するCSSを以下に差し替えればできます。

li.voice-state:not([data-reactid*="⑥で控えたID"]) { display:none; }
.avatar {
  content:url(⑤で控えた画像URL);
  height:auto !important;
  width:auto !important;
  border-radius:0% !important;
  filter: brightness(50%);
}

.speaking {
  border-color:rgba(0,0,0,0) !important;
  filter: brightness(100%);
}

li.voice-state{ position: static; }
div.user{ position: absolute; left:40%; bottom:5%; }

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

明るさ変わる方が分かり易そうだけど、雑音とか拾って発話状態繰り返したら画面チカチカしないか心配。。。


なんとなく想像つくかもしれませんが、「.avatar」が通常時の立ち絵に関する設定で「.speaking」がしゃべってる最中の表示に関する設定です。

細かい解説は本記事では省きますが、弄る場所さえ分かっていればあとは使えるCSSを増やすだけ。
もっと上手な書き方ある気がしますが、取り合えずこれで動作するのでヨシとします。

演出のバリエーションが増えたら使いやすい形で配布とか生成ツールの作成をしたいと考えてます故、気長にお待ちくださいまし。

是非お試しいただき、配信活動にお役立てください。

それでは、以上。