[初心者] discord.py UI作成備忘録：View / Button / SelectMenu

はじめに

この記事はPythonを使用してdiscordBotを作成するものです。
JavaScriptではないのでご注意ください。

discord.pyのUIコンポーネント（View / Button / SelectMenu） の使い方をまとめています。
Botの作成や環境設定（トークン取得、基本的な起動処理など）は
完了している前提で進めます。

開発環境

• Python 3.13.7
• discord.py 2.6.3

UI作成

サンプルコード

以下にView,Button,SelectMenuを使用した、サンプルコードを載せます。

ViewTest.py

import discord
from discord.ext import commands
from discord.ui import Button, Select, View

intents = discord.Intents.default()
intents.message_content = True
bot = commands.Bot(command_prefix="!", intents=intents)

class ViewTest(View):
    def __init__(self):
        super().__init__(timeout=20)

        
        btn = Button(label="ボタン2", style=discord.ButtonStyle.success, row=0)
        btn.callback = self.self_button_callback
        self.add_item(btn)


        sel = Select(
            placeholder="セレクトメニュー2",
            options=[
                discord.SelectOption(label="アイテム1"),
                discord.SelectOption(label="アイテム2"),
            ],
            row=2
        )
        sel.callback = self.self_select_callback
        self.add_item(sel)


    async def self_button_callback(self, interaction: discord.Interaction):
        await interaction.response.send_message("ボタン", ephemeral=True)


    async def self_select_callback(self, interaction: discord.Interaction):
        value = interaction.data["values"][0]
        await interaction.response.send_message(f"選択した内容: {value}", ephemeral=True)


    @discord.ui.button(label="ボタン1", style=discord.ButtonStyle.primary, row=0)
    async def button_callback(self, interaction: discord.Interaction, button: discord.ui.Button):
        await interaction.response.send_message("ボタン", ephemeral=True)

    @discord.ui.select(
        placeholder="セレクトメニュー1",
        options=[
            discord.SelectOption(label="アイテム1"),
            discord.SelectOption(label="アイテム2"),
        ],
        row=1
    )
    async def select_callback(self, interaction: discord.Interaction, select: discord.ui.Select):
        await interaction.response.send_message(f"選択した内容: {select.values[0]}", ephemeral=True)
    

    async def on_timeout(self):
        print("タイムアウト")


@bot.tree.command(name="test", description="UIテスト")
async def test_cmd(interaction: discord.Interaction):
    await interaction.response.send_message("TestView", view=ViewTest())


@bot.event
async def on_ready():
    await bot.tree.sync()
    print("Bot Ready!")


bot.run(YOUR_TOKEN)

実行結果

コードの解説

インポート

まずはdisord.pyのUIモジュールをインポートします。

from discord.ui import Button, View ,Select

discord.uiを指定することで、UI関連のクラスを利用できるようになります。
ここでインポートした View/Button/Select を使ってUIを構築していきます。

View

ViewはButtonやSelectMenuのUIを表示させる場所として使用します

クラス定義

class ViewTest(View):

Viewを継承したクラスを作成します。このクラスの中にButtonやSelectMenuのコードを書きます

初期設定

def __init__(self):
        super().__init__(timeout=20)

Viewの基本設定を行う、ここで引数の受取や変数、タイムアウト時間の設定を主に行う

View特有の機能

• row

@discord.ui.button(label="ボタン1", style=discord.ButtonStyle.primary, row=0)

rowを設定することでView上でのボタンの配置を変えることができます。
設定範囲は0-5まで、横幅の限界までなら何個でも同じ場所に置けます。

• on_timeout

async def on_timeout(self):
        print("タイムアウト")

初期設定で定義した時間経過したら中に書かれている動作を実行します。

• その他
  上記以外にも特有の動作はあります、以下の表でまとめて説明します。

動作コマンド	説明
interaction_check	Viewを表示する範囲を絞り込む
disable_all_items()	View上のアイテムを全て非表示
add_view(view_name)	Viewの動作を再起動しても保持
children	Viewの中にあるアイテムの取得

Button

Buttonはクリックすることで動作を起こします

• 変数を作成して実装
• 直接Viewに実装

本コードでは2パターンのやり方を記述しています
解説も両パターン用意していますので両方でもどちらか好きな方でも
お好きなように確認してください

変数で実装する方法

変数作成のプログラム一覧

btn = Button(label="ボタン2", style=discord.ButtonStyle.success, row=0)
        btn.callback = self.self_button_callback
        self.add_item(btn)

async def self_button_callback(self, interaction: discord.Interaction):
        await interaction.response.send_message("ボタン", ephemeral=True)

コード解説

btn = Button(label="ボタン2", style=discord.ButtonStyle.success, row=0)

btn変数にボタンの設定を入れますlabelはボタンに表示される文字を
styleはボタンの色を設定しています。

btn.callback = self.self_button_callback

btn.callbackでボタンが押されたときに呼び出される動作を指定します。
これは同じクラス内のself_button_callbackを設定しています。

self.add_item(btn)

add_itemを使用することで作成したボタンを追加することができます。

async def self_button_callback(self, interaction: discord.Interaction):
        await interaction.response.send_message("ボタン", ephemeral=True)

ボタンを押したときはこの関数が呼び出されて動作します。

直接Viewに実装する方法

直接記述のプログラム一覧

@discord.ui.button(label="ボタン1", style=discord.ButtonStyle.primary, row=0)
async def button_callback(self, interaction: discord.Interaction, button: discord.ui.Button):
        await interaction.response.send_message("ボタン", ephemeral=True)

コード解説

@discord.ui.button(label="ボタン1", style=discord.ButtonStyle.primary, row=0)

ボタンの設定を行いますlabelはボタンに表示される文字を
styleはボタンの色を設定しています。

async def button_callback(self, interaction: discord.Interaction, button: discord.ui.Button):
    await interaction.response.send_message("ボタン", ephemeral=True)

ボタンを押された時の動作を設定します。関数となっていますが関数の名前などに意味はなく、ボタン設定の下にあることが重要となっています。
ボタンを押したときはこの関数が呼び出されて動作します。

SelectMenu

複数の選択肢から1つを選ぶものです。

• 変数を作成して実装
• 直接Viewに実装

本コードでは2パターンのやり方を記述しています
解説も両パターン用意していますので両方でもどちらか好きな方でも
お好きなように確認してください

変数で実装する方法

変数作成のプログラム一覧

    sel = Select(
        placeholder="セレクトメニュー2",
        options=[
            discord.SelectOption(label="アイテム1"),
            discord.SelectOption(label="アイテム2"),
        ],
        row=2
        )
    sel.callback = self.select_callback
    self.add_item(sel)

async def select_callback(self, interaction: discord.Interaction):
    value = interaction.data["values"][0]
    await interaction.response.send_message(f"選択した内容: {value}", ephemeral=True)

コード解説

sel = Select(
        placeholder="セレクトメニュー2",
        options=[
            discord.SelectOption(label="アイテム1"),
            discord.SelectOption(label="アイテム2"),
        ],
        row=2
        )

cel変数にセレクトメニューの設定を入れますplaceholderは何も選択していないときに表示される文字をoptionsはセレクトメニューの中身を設定しています。

sel.callback = self.select_callback

sel.callbackで内容が選択されたときに呼び出される動作を指定します。
これは同じクラス内のself_select_callbackを設定しています。

self.add_item(sel)

add_itemを使用することで作成したセレクトメニューを追加することができます。

async def select_callback(self, interaction: discord.Interaction):
    value = interaction.data["values"][0]
    await interaction.response.send_message(f"選択した内容: {value}", ephemeral=True)

内容を選択したときはこの関数が呼び出されて選択した値を返します。

直接Viewに実装する方法

直接記述のプログラム一覧

@discord.ui.select(
        placeholder="セレクトメニュー1",
        options=[
            discord.SelectOption(label="アイテム1"),
            discord.SelectOption(label="アイテム2"),
        ],
        row=1
    )
async def select_callback(self, interaction: discord.Interaction, select: discord.ui.Select):
        await interaction.response.send_message(f"選択した内容: {select.values[0]}", ephemeral=True)

コード解説

@discord.ui.select(
        placeholder="セレクトメニュー1",
        options=[
            discord.SelectOption(label="アイテム1"),
            discord.SelectOption(label="アイテム2"),
        ],
        row=1
    )

セレクトメニューの設定を行いますplaceholderは何も選択していないときに表示される文字をoptionsはセレクトメニューの中身を設定しています。

async def select_callback(self, interaction: discord.Interaction, select: discord.ui.Select):
        await interaction.response.send_message(f"選択した内容: {select.values[0]}", ephemeral=True)

セレクトメニューを選択された時の動作を設定します。関数となっていますが関数の名前などに意味はなく、セレクトメニュー設定の下にあることが重要となっています。
内容を選択したときはこの関数が呼び出されて選択した値を返します。

まとめ

この記事では discord.py の UI コンポーネント（View / Button /SelectMenu） を使って
実際に動く UI を作る方法を解説しました。

初めての投稿で説明が不十分な部分もあったと思いますが、ここまで読んでくださり本当にありがとうございます！

参考リンク

• discord.py公式ドキュメント
• Discord.py APIリファレンス