はじめに

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

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

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

※Chromeの開発者ツール、Javascriptを利用します。

この記事でご紹介している方法では、Discordサーバーのボイスチャンネルに現在オンラインのユーザーの「ユーザーID」をまとめてコピーできます。

Discord StreamKit Overlayからオンラインユーザーのユーザー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」を押下します。

// 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);
});

10. 成功するとコードの下に、以下の形式で「ユーザーID」のリストが取得できます。

全メンバーのユーザー ID リスト（表示順: ）
console.js:35 <ユーザーID>
・
・
・
undefined

制限事項

この方法では、ボイスチャンネルにオンラインのメンバーの「ユーザーID」のみ取得できます。オフラインメンバーの「ユーザーID」は取得できませんのでご注意ください。

補足

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