Zenn
🛠️

【discord.py】新しいコンポーネントの使い方【基礎編】

に公開
Python
Discord
discord.py
tech

1. まず新しいコンポーネント(Component v2)って何?

discordのbotでは以前からメッセージにボタンやセレクトボックスを付けて送信することが出来ましたが、embed(埋め込み)の中にボタンを入れたりすることはできず外側に配置する必要がありました。



そこで今回解説するComponent v2の出番です。
簡単に言うと、以下のようなよりレイアウトがカスタマイズ可能なメッセージを作成することができます

2. どうやって実装するの?

まず、この形式に対応するにはdiscord.pyを最新版(v2.6.0以降)にアップグレードする必要があります。

アップグレードするためのコマンド
pip install -U discord.py

それでは実際のコードを見てみましょう。

サンプル画像のメッセージを送信するコード
import discord

from discord import ui
from discord.ext import commands

# 変数botを作成する
bot = commands.Bot("!", intents=discord.Intents.all())

# on_readyはイベントということを伝える
@bot.event
async def on_ready():
    # botが開始された後にコマンドを同期する
    await bot.tree.sync()

# コマンドとして定義する
@bot.tree.command(name="component-v2-test")
async def modal_test(i: discord.Interaction):
    # メッセージを作成する
    container = ui.Container(accent_color=0x00dd00)
    
    sec1 = ui.Section(ui.TextDisplay("# Component v2"), accessory=ui.Thumbnail("画像のURL")) 
    sec1.add_item(ui.TextDisplay("テストメッセージです"))
    sec1.add_item(ui.TextDisplay("```装飾も付けれます```"))
    
    container.add_item(sec1)
    container.add_item(ui.Separator())
    
    actionrow1 = ui.ActionRow()
    actionrow1.add_item(ui.Button(label="テスト", style=discord.ButtonStyle.success))
    actionrow1.add_item(ui.Button(label="ホームページ", style=discord.ButtonStyle.url, url="https://example.com"))
    container.add_item(actionrow1)
    
    view = ui.LayoutView()
    view.add_item(container)

    # 送信する
    await i.response.send_message(view=view)

# botを開始する
bot.run("トークン")

上記のコードは実際に画像のメッセージを送信するコードです。

各部の解説

container = ui.Container(accent_color=0x00dd00)

ベースとなるContainerを作成します。
埋め込みのように表示するにはこれが必要です。
accent_colorでは左端の色を指定します

sec1 = ui.Section(ui.TextDisplay("# Component v2"), accessory=ui.Thumbnail("画像のURL")) 
sec1.add_item(ui.TextDisplay("テストメッセージです"))
sec1.add_item(ui.TextDisplay("```装飾も付けれます```"))

ここでは、Sectionを作成します。
Sectionにはテキストに加え、右端にサムネイル画像またはボタンを設置することができます。
sec1に新しくSectionを代入した後add_itemでテキストを追加しています。
文章中にも改行(\n)が使えるので実は複数入れる必要はなかったりします。

container.add_item(sec1)

ここではSectionを親であるContainerに追加します。
追加しないと表示されないので注意しましょう。

container.add_item(ui.Separator())

ここでは区切り線を追加しています。
区切り線のパラメータには以下のものが追加できます

プロパティ 値 説明
visible True/False
(bool)		 discord上で表示されるかを設定します。
見えない状態にすると単純にスペースが空きます
spacing 下記の表の値
(discord.SeparatorSpacing)		 スペースの大きさを指定します。

スペースについて

値 説明
discord.SeparatorSpacing.small
discord.SeparatorSpacing.large 
actionrow1 = ui.ActionRow()
actionrow1.add_item(ui.Button(label="テスト", style=discord.ButtonStyle.success))
actionrow1.add_item(ui.Button(label="ホームページ", style=discord.ButtonStyle.url, url="https://example.com"))

ここでは、ActionRowを作成します。
簡単に言うと、ボタンの集合です。

view = ui.LayoutView()
view.add_item(container)

この部分ではcomponent v2を使うためのView(LayoutView)に作成したContainerを挿入し、メッセージに添付できる形にします。
Container自体を直接メッセージとして送信はできませんので注意しましょう。

3. 詳しい仕様について

実は、Containerなどの親要素になるものは入れれるものが決まっています。
以下はその表です。

コンポーネントの種類 入れれるもの
Container ActionRow,TextDisplay,Section,MediaGallery,Separator,File
Section TextDisplay,Button(accessory),Thumbnail(accessory)
ActionRow Button,Select*(すべてのセレクトボックス)

また、以下の4つのコンポーネントは上記の親要素に入れず直接LayoutViewに入れて送信することができます。

  • TextDisplay
  • MediaGallery
  • Separator
  • File

4. 今回解説していないものについて

今回の記事ではComponent v2基礎編ということで一部の要素について解説していません。
後ほど応用編を出しますので、しばらくお待ちください。

5. 今後の期待

Component v2が実装されてかなりできることが増えましたね。
個人的にはリンクボタンに色設定ができる機能が欲しいところです。

6. あとがき

ミスがあったり、文章が拙かったりしますが、大目に見ていただけると嬉しいです()
より詳細な内容やプロパティはdiscord.py公式ドキュメントを見ることをお勧めします。
ありがとうございました。



記事を書く上で参考にさせていただいたサイト

Discussion