Zenn
💬

Discord StreamKit OverlayからオンラインユーザーのユーザーIDをまとめて取得する

2021/10/19に公開
Discord
tech
  • 環境
    • Chrome
    • Windows10

はじめに

TRPGやゲームの配信などで、Discord StreamKit Overlayを使って、Discordサーバー参加メンバーのアイコンを配信ソフトの画面上にオーバーレイ表示することがあります。

アイコン画像をCSSで変更したい場合に、Discord上でユーザーを右クリックして「ユーザーID」をコピーします。参加メンバーが数名の場合で問題ありませんが、メンバー数が多い場合に1名ずつ「ユーザーID」をコピーするのは面倒だよねと思い、なにか方法がないか調べてみました。

DiscordのBotを作ればいろいろ出来ると思いますが、Bot用にWebサーバーを立ち上げなくてなならいのが辛いです。そこでDiscord StreamKit OverlayのWebサイト情報から「ユーザーID」をコピー出来ましたのでその方法をご紹介いたします。

手順

  1. Chromeで、Discord StreamKit Overlayにアクセスします。
  2. 「VOICE WIDGET」タブを選択します。
  3. 「Server」を選択します。
  4. 「Voice Channel」を選択します。
  5. Discordを起動し、上記ボイスチャンネルに参加します。
  6. Chromeで「F12」キーを押下し開発ツール（検証ツール）を開きます。
  7. 「Console」タブを選択します。
  8. 「Console」タブで右クリックし、「Clear console」をクリックし、不要なログを消します。
  9. 「Console」タブに以下のコードを貼り付けて、「Enter」を押下します。
Chrome > Console
// Discord streamkit over から、全メンバーの Discord ユーザー ID を一気に抜き出すスクリプト
let voiceStates = document.getElementsByClassName('voice-state');
// HTMLCollection は、forEach を利用できないため、配列に変換する
voiceStates = Array.from(voiceStates);
// ユーザー ID を抜き出す
console.log('全メンバーのユーザー ID リスト（表示順: ）');
voiceStates.forEach(function(element){
 let userId = element.getAttribute('data-reactid').substr(-18);
 console.log(userId);
});
  1. 成功するとコードの下に、以下の形式で「ユーザーID」のリストが取得できます。
Chrome > Console
全メンバーのユーザー ID リスト（表示順: ）
console.js:35 <ユーザーID>
・
・
・
undefined

補足

試しておりませんが応用すればテキストチャンネルからも「ユーザーID」を取得できると思います。

Discussion