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.さいごに

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

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

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

以上

【Minecraft】プレイヤースキンから村人スキンを生成する


環境

  • Minecraft(JE)バージョン1.14

詳細

掲題の通り、マインクラフトにおけるプレイヤースキンを村人(villager)スキンに変換するツールを作成しました。JE版1.14での動作を確認済みです。

プレイヤースキンはクラシック・スリム両方に対応しています。

  • アップロード …… ファイルを選択しアップロードします。
  • タイプ …… アップロードしたプレイヤースキンのタイプを選択します。
  • 帽子 …… 帽子パーツの表示方法を選択します。
  • 上着・ズボン …… 上着・ズボンパーツの表示方法を選択します。
  • 四肢ベース …… 村人スキンの四肢を左右どちらの手足パーツから生成するか選択します。

画像枠をクリックすることで村人スキンのダウンロードが完了します。
ツールは下記に掲載されているので気になった方は試してみてください。

リソースパックなどで「assets\minecraft\textures\entity\villager\villager.png」へ配置することで村人のスキンに適用できます。配置方法を理解できていれば、バイオームごとに村人スキンを変えることも可能です。
リソースパックの作成方法については別途、公開されている方が多数いますのでそれらを参考にしていただければと思います。需要というか、反響があればまとめようかなと思います。

ツール側にも掲載していますが、変換元のプレイヤースキンが元々配布物であった場合は改変などに当たる場合もあるので、提供元の利用規約を確認の上使用してください。

以上、よきマイクラライフを!