Discord.js v13でbuttonを使ってみる。

#TODO 画像のリンク切れを修正する

buttonとは？

└ ボタンである。https://media.discordapp.net/attachments/798463524799774745/866509234425692160/image0.png

どういう仕組みなの？

Embedのように const button_1 = new Discord.MessageButton()のように扱うことが可能である。

上記の画像のbuttonのコードは以下の通りである。

messageCreateイベントって古いv13では発火しなくない？気のせい？ysr9029(Nich87).icon

└ v13の正式版がリリースされたので問題なさそう。

code:index.js

client.on('messageCreate', async message => {

if (message.content.startsWith("?bt")) {

const tic1 = new Discord.MessageButton()

.setCustomId("contact") //buttonにIDを割り当てる *必須

.setStyle("PRIMARY") 　//buttonのstyleを設定する *必須

.setLabel("🎫問い合わせ🎫")

await message.channel.send({

content: "お問い合わせはこちらから",

components: new Discord.MessageActionRow().addComponents(tic1)

});

}

});

また設定できるstyleは以下のようなものがある

https://media.discordapp.net/attachments/391394853268750337/858299996104294431/7bb017ce52cfd6575e21c058feb3883b.png

※setstyle:Link時はsetCustomId => setURLにしなければならない。

※.setEmojiを設定するとEmoji buttonが使えるようになる。

実際の処理を書いてみる

buttonをクリックするとインタラクション(簡単に言えば反応)が発行される。

これを受け取るイベント*1があるので使用する。

*1 client.on('interactionCreate', async interaction => {})

code:interaction.js

client.on('interactionCreate', async (interaction) => {

if (interaction.customId === "contact") {

await interaction.reply({

content: "ボタンが押されました。",

ephemeral: true

});

}

});

これはボタンが押された時に返信するサンプルです。

if (interaction.customId === "contact")では上記のindex.jsで設定した.customIdを参照出来ます。

contentには文字以外も添付可能です。(サンプルがないので後で追記します。)

ephemeral : boolean は返信したメッセージを押した本人のみに見えるかを設定できる。

┗ ephemeral ? 表示 : 非表示

https://media.discordapp.net/attachments/798463524799774745/866522849976123423/Screenshot_2021-07-19-12-32-16-15_572064f74bd5f9fa804b05334aa4f912.jpg

interactionは大体3秒以内に返さないと⚠️インタラクションに失敗しましたとされてしまうので

interaction.replyやinteraction.update、もしくはawait interaction.deferReply();やawait interaction.deferUpdate()で待機(最大15分?)して後で処理を返す必要がある。

こちらもみてください

ボタンを使ってみよう　

customIdの信頼性に起因するセキュリティ上の問題について

customId ( と value )になるべく長いバイト列を入れたい

Discord.js v13の新機能

Gateway Intents