作成日 : 2021-05-29
更新日 : 2021-11-03
41 min readPythonTkinter

Tkinterで使われるmenubuttonとは?コードや画像を用いて解説!?

今回はTkinterで使われるmenubuttonに関して、コードや画像を用いて解説いたします。menubuttonの使い方がわからない、コードを通して学びたい方へおすすめです。ぜひ最後までご確認ください。

そもそもTkinterで使われるmenubuttonとは?

Tkinterで使われるmenubuttonとは、Widgetの一種で、menubuttonを選択すると、様々なmenuを展開できる入れ物を意味します。

基本的にmenuを作成するための、tk.Menu()と併用して利用されます。

別名menubutton Widgetと呼ばれます。

わかりにくい言葉がいくつか出てきましたね。。以下の「Tkinterの構成要素」を確認しながら、情報を整理しましょう。

Tkinterの構成要素

Tkinterの構成要素として、Window, Frame, Widgetの概念が存在します。

前の章でTkinterで活用されるmenubuttonとは、Widgetの一種で、menubuttonを選択すると、様々なmenuを展開できる入れ物とお伝えしました。

「Tkinterの構成要素」の画像内では、紫色枠に該当するWidgetに対して、編集することになります。

Tkinterの構成要素を理解したところで、実際にmenubutonの活用方法を理解していきましょう。

基本的なmenubuttonの使い方【3ステップ】

基本的なmenubuttonの使い方として、

1. menubuttonを作成する
2. menuを作成する
3. menubutton内へmenuを入れる

の3ステップになります。実際に手順を踏まえて、コードを交えて確認していきましょう。

menubuttonを作成する

まずはmenuの入れ物 = menubuttonを作成します。menubuttonはtk.Menubutton()を活用すると、作成できます。

1import tkinter as tk
2
3class Application(tk.Frame):
4    def __init__(self, master=None):
5        # Windowの初期設定を行う。
6        super().__init__(master)
7
8        # Windowの画面サイズを設定する。
9        # geometryについて : https://kuroro.blog/python/rozH3S2CYE0a0nB3s2QL/
10        self.master.geometry("300x200")
11
12        # Windowを親要素として、frame Widget(Frame)を作成する。
13        # Frameについて : https://kuroro.blog/python/P20XOidA5nh583fYRvxf/
14        frame = tk.Frame(self.master)
15
16        # Windowを親要素とした場合に、frame Widget(Frame)をどのように配置するのか?
17        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
18        frame.pack()
19
20        # 1. menubuttonを作成する
21        # frame Widget(Frame)を親要素として、menubutton Widgetを作成する。
22        # text : テキスト情報
23        mb = tk.Menubutton(frame, text="Select alphabet")
24
25        # frame Widget(Frame)を親要素とした場合に、menubutton Widgetをどのように配置するのか?
26        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
27        mb.pack()
28
29# Tkinter初学者参考 : https://docs.python.org/ja/3/library/tkinter.html#a-simple-hello-world-program
30if __name__ == "__main__":
31    # Windowを生成する。
32    # Windowについて : https://kuroro.blog/python/116yLvTkzH2AUJj8FHLx/
33    root = tk.Tk()
34    app = Application(master=root)
35    # Windowをループさせて、継続的にWindow表示させる。
36    # mainloopについて : https://kuroro.blog/python/DmJdUb50oAhmBteRa4fi/
37    app.mainloop()

menuを作成する

menuの作成には、tk.Menu()を使用します。「menubuttonを作成する」で紹介したコード内のmb.pack()の下へ、以下のコードを貼り付けてください。

1# 2. menuを作成する
2# menubutton Widgetを親要素として、menu Widgetを作成する。
3# Menuについて : https://kuroro.blog/python/ZITZ7dM4nundAhMbChXs/
4menu = tk.Menu(mb)
5# menuへ選択肢を追加する。
6# label : 選択肢のテキスト。'A'とする。
7menu.add_command(label="A")
8# menuへ選択肢を追加する。
9# label : 選択肢のテキスト。'B'とする。
10menu.add_command(label="B")

menubutton内へmenuを入れる

最後にmenubutton内へmenuを入れます。「menuを作成する」で紹介したコード内のmenu.add_command(label="B")の下へ、以下のコードを貼り付けてください。

1# 3. menubutton内へmenuを入れる
2# menubutton Widgetのmenu optionへ、2. で作成したmenuを入れる。
3mb["menu"] = menu

実際に紹介したコードを、組み合わせて実行すると、「Tkinterの構成要素」の画像と同じように、以下の画像が表示されます。

完成コード

1import tkinter as tk
2
3class Application(tk.Frame):
4    def __init__(self, master=None):
5        # Windowの初期設定を行う。
6        super().__init__(master)
7
8        # Windowの画面サイズを設定する。
9        # geometryについて : https://kuroro.blog/python/rozH3S2CYE0a0nB3s2QL/
10        self.master.geometry("300x200")
11
12        # Windowを親要素として、frame Widget(Frame)を作成する。
13        # Frameについて : https://kuroro.blog/python/P20XOidA5nh583fYRvxf/
14        frame = tk.Frame(self.master)
15
16        # Windowを親要素とした場合に、frame Widget(Frame)をどのように配置するのか?
17        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
18        frame.pack()
19
20        # 1. menubuttonを作成する
21        # frame Widget(Frame)を親要素として、menubutton Widgetを作成する。
22        # text : テキスト情報
23        mb = tk.Menubutton(frame, text="Select alphabet")
24
25        # frame Widget(Frame)を親要素とした場合に、menubutton Widgetをどのように配置するのか?
26        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
27        mb.pack()
28
29        # 2. menuを作成する
30        # menubutton Widgetを親要素として、menu Widgetを作成する。
31        # Menuについて : https://kuroro.blog/python/ZITZ7dM4nundAhMbChXs/
32        menu = tk.Menu(mb)
33        # menuへ選択肢を追加する。
34        # label : 選択肢のテキスト。'A'とする。
35        menu.add_command(label="A")
36        # menuへ選択肢を追加する。
37        # label : 選択肢のテキスト。'B'とする。
38        menu.add_command(label="B")
39
40        # 3. menubutton内へmenuを入れる
41        # menubutton Widgetのmenu optionへ、2. で作成したmenuを入れる。
42        mb["menu"] = menu
43
44# Tkinter初学者参考 : https://docs.python.org/ja/3/library/tkinter.html#a-simple-hello-world-program
45if __name__ == "__main__":
46    # Windowを生成する。
47    # Windowについて : https://kuroro.blog/python/116yLvTkzH2AUJj8FHLx/
48    root = tk.Tk()
49    app = Application(master=root)
50    # Windowをループさせて、継続的にWindow表示させる。
51    # mainloopについて : https://kuroro.blog/python/DmJdUb50oAhmBteRa4fi/
52    app.mainloop()

Tkinterで活用されるmenubutton Widgetの定義

menubutton Widgetは、

1tk.Menubutton(option1, option2, ...) or tk.Menubutton('親要素', option1, option2, ...)

で定義されます。

menubutton Widgetで使われるoptionの種類としては

• menu
• activeforeground
• background, bg
• width, height
• anchor
• borderwidth, bd
• fg, foreground
• font
• bitmap
• cursor
• text
• padx, pady
• relief
• image
• compound
• wraplength
• justify
• state
• disabledforeground
• textvariable
• direction

があります。順番に見ていきましょう。

※ optionの種類一覧を調べたい場合は、以下のようにコードを記述してご確認ください。

1import tkinter as tk
2
3# menubuttonを生成する。
4menubutton = tk.Menubutton()
5# menubuttonに関するoptionの種類一覧を取得する。
6print(menubutton.keys())

menu

menubutton内へmenuを入れるために利用するoptionになります。詳しくは、「基本的なmenubuttonの使い方【3ステップ】」をご確認ください。

activeforeground

activeforeground optionを利用すると、menubutton Widgetを選択した時の文字列色を設定できます。

色に関しては、Tkinterの色の使い方とは?活用例から色の一覧をまとめて紹介!?で総括していますので、詳しく知りたい方は是非ご確認ください。

例えば「完成コード」で紹介したmb = tk.Menubutton(frame, text="Select alphabet")箇所を、以下のように変更すると、

1# 別解法 ##########################
2# mb = tk.Menubutton(frame)
3# mb.config(text="Select alphabet", activeforeground='red') or mb.configure(text="Select alphabet", activeforeground='red')
4##################################
5# 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
6mb = tk.Menubutton(frame, text="Select alphabet", activeforeground='red')

menubutton Widgetを選択した際に、以下の画像のように描画します。

background, bg

background option, bg optionを利用すると、menubutton Widgetの背景色を設定します。

backgroundとbg両方のoptionを用いて、値を設定した場合、後ろの引数に設定されるoptionが優先されます。

例えば「完成コード」で紹介したmb = tk.Menubutton(frame, text="Select alphabet")箇所を、以下のように変更すると、

1# 別解法 ##########################
2# mb = tk.Menubutton(frame)
3# mb.config(text="Select alphabet", bg='green') or mb.configure(text="Select alphabet", bg='green')
4##################################
5# 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
6mb = tk.Menubutton(frame, text="Select alphabet", bg='green')

以下の画像のようにmenubutton Widgetを描画します。

width, height

width option, height optionを利用すると、それぞれmenubutton Widgetの幅、高さを設定できます。

例えば「完成コード」で紹介したmb = tk.Menubutton(frame, text="Select alphabet")箇所を、以下のように変更すると、

1# 別解法 ##########################
2# mb = tk.Menubutton(frame)
3# mb.config(text="Select alphabet", bg='green', width=20, height=10) or mb.configure(text="Select alphabet", bg='green', width=20, height=10)
4##################################
5mb = tk.Menubutton(frame, text="Select alphabet", bg='green', width=20, height=10)

以下の画像のようにmenubutton Widgetを描画します。

anchor

anchor optionを利用すると、menubutton Widgetで表示する文字列を、どこに配置するかを決定できます。

指定方法として

• tk.W : Westの略。左の真ん中へmenubutton Widgetの文字列を配置する
• tk.N : Northの略。上の真ん中へmenubutton Widgetの文字列を配置する
• tk.S : Southの略。下の真ん中へmenubutton Widgetの文字列を配置する
• tk.E : Eastの略。右の真ん中へmenubutton Widgetの文字列を配置する
• tk.NE : North Eastの略。右上へmenubutton Widgetの文字列を配置する
• tk.NW : North Westの略。左上へmenubutton Widgetの文字列を配置する
• tk.SW : South Westの略。左下へmenubutton Widgetの文字列を配置する
• tk.SE : South Eastの略。右下へmenubutton Widgetの文字列を配置する
• tk.CENTER : 中心の略。中心へmenubutton Widgetの文字列を配置する

の9種類が存在します。デフォルトではtk.Wが設定されます。

anchorに関する値入力へ悩んだ方は、以下の画像を確認しながら、anchorの値を考えると良いでしょう。

例えば「完成コード」で紹介したmb = tk.Menubutton(frame, text="Select alphabet")箇所を、以下のように変更すると、

1# 別解法 ##########################
2# mb = tk.Menubutton(frame)
3# mb.config(text="Select alphabet", bg='green', width=20, height=10, anchor=tk.N) or mb.configure(text="Select alphabet", bg='green', width=20, height=10, anchor=tk.N)
4##################################
5mb = tk.Menubutton(frame, text="Select alphabet", bg='green', width=20, height=10, anchor=tk.N)

以下の画像のようにmenubutton Widgetを描画します。

borderwidth, bd

borderwidth option, bd optionを利用すると、menubutton Widgetの枠の大きさを設定します。

borderwidthとbd両方のoptionを用いて、値を設定した場合、後ろの引数に設定されるoptionが優先されます。

例えば「完成コード」で紹介したmb = tk.Menubutton(frame, text="Select alphabet")箇所を、以下のように変更すると、

1# 別解法 ##########################
2# mb = tk.Menubutton(frame)
3# mb.config(text="Select alphabet", bg='green', bd=20) or mb.configure(text="Select alphabet", bg='green', bd=20)
4##################################
5mb = tk.Menubutton(frame, text="Select alphabet", bg='green', bd=20)

以下の画像のようにmenubutton Widgetを描画します。

fg, foreground

fg option, foreground optionを利用すると、文字列色を変更できます。

fgとforeground両方のoptionを用いて、値を設定した場合、後ろの引数に設定されるoptionが優先されます。

例えば「完成コード」で紹介したmb = tk.Menubutton(frame, text="Select alphabet")箇所を、以下のように変更すると、

1# 別解法 ##########################
2# mb = tk.Menubutton(frame)
3# mb.config(text="Select alphabet", foreground='red') or mb.configure(text="Select alphabet", foreground='red')
4##################################
5# 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
6mb = tk.Menubutton(frame, text="Select alphabet", foreground='red')

以下の画像のようにmenubutton Widgetを描画します。

font

font optionを利用すると、文字の形式や大きさを変更できます。

fontに関しては、Tkinterで使われるフォントって?2種類のフォントの設定方法を丁寧に解説でまとめておりますので、詳しく知りたい方は是非ご確認ください。

例えば「完成コード」で紹介したmb = tk.Menubutton(frame, text="Select alphabet")箇所を、以下のように変更すると、

1# 別解法 ##########################
2# mb = tk.Menubutton(frame)
3# mb.config(text="Select alphabet", font=("", 20, "underline")) or mb.configure(text="Select alphabet", font=("", 20, "underline"))
4##################################
5# fontについて : https://kuroro.blog/python/RZNjLl36upkumxwkTRWl/
6mb = tk.Menubutton(frame, text="Select alphabet", font=("", 20, "underline"))

以下の画像のようにmenubutton Widgetを描画します。

bitmap

bitmap optionを利用すると、XBM形式の２値画像(白と黒のみで表現される画像)を、設定できます。

Tkinterでは標準でいくつかのbitmap画像を備えていて、

• error
• gray75
• gray50
• gray25
• gray12
• hourglass
• info
• questhead
• question
• warning

が存在します。上でリストされるbitmap画像の詳細を知りたい場合は、こちらのリンクを確認ください。

例えば「完成コード」で紹介したmb = tk.Menubutton(frame, text="Select alphabet")箇所を、以下のように変更すると、

1# 別解法 ##########################
2# mb = tk.Menubutton(frame)
3# mb.config(text="Select alphabet", bitmap="error") or mb.configure(text="Select alphabet", bitmap="error")
4##################################
5mb = tk.Menubutton(frame, text="Select alphabet", bitmap="error")

以下の画像のようにmenubutton Widgetを描画します。

cursor

cursor optionを利用すると、menubutton Widget内へマウスカーソルを移動すると矢印の見た目を変化できます。

見た目のバリエーションについてはこちらのサイトにまとまっていますので、ご確認ください。

例えば「完成コード」で紹介したmb = tk.Menubutton(frame, text="Select alphabet")箇所を、以下のように変更して、

1# 別解法 ##########################
2# mb = tk.Menubutton(frame)
3# mb.config(text="Select alphabet", cursor="clock") or mb.configure(text="Select alphabet", cursor="clock")
4##################################
5mb = tk.Menubutton(frame, text="Select alphabet", cursor="clock")

menubutton Widget内へマウスカーソルを移動すると、矢印の見た目が変更します。

text

text optionを利用すると、menubutton Widgetで利用する文字列を設定できます。

例えば「完成コード」で紹介したmb = tk.Menubutton(frame, text="Select alphabet")箇所を、以下のように変更すると、

1# 別解法 ##########################
2# mb = tk.Menubutton(frame)
3# mb.config(text="test") or mb.configure(text="test")
4##################################
5mb = tk.Menubutton(frame, text="test")

以下の画像のようにmenubutton Widgetを描画します。

padx, pady

padx option, pady optionを利用すると、文字列の外側へ空白の幅を設定できます。

※ 2021年7月3日現在、筆者のMac OSではpadx option, pady optionを設定しても、menubuttonは変更されませんでした。

relief

relief optionを利用すると、menubutton Widgetの枠のデザインを設定できます。

指定方法としては、

• tk.RAISED
• tk.SUNKEN
• tk.FLAT
• tk.RIDGE
• tk.GROOVE
• tk.SOLID

の6種類があります。

※ 2021年7月3日現在、筆者のMac OSではrelief optionを設定しても、menubuttonは変更されませんでした。

image

image optionを利用すると、menubutton Widgetへ画像を貼り付ける設定を行います。

例えば「完成コード」を、以下のように変更すると、

1+    # 画像について : https://kuroro.blog/python/Z7k1LSyDyiDHtD5UCjmG/
2+    global image
3+    image = tk.PhotoImage(file="/{画像のパス}/{画像ファイル名}.{拡張子}")
4-    mb = tk.Menubutton(frame, text="Select alphabet")
5+    mb = tk.Menubutton(frame, text="Select alphabet", image=image)

以下の画像のようにmenubutton Widgetを描画します。

画像の取り扱いに関しては、【もう間違えない!?】PythonのTkinterを用いて画像を表示する方法でまとめましたので、うまく表示されない、サンプルコードを確認したい方はご確認ください。

compound

compound optionを利用すると、menubutton Widgetへ画像を貼り付ける場合に、文字列をどこに貼り付けるのか設定できます。

指定方法として

• tk.LEFT : 文字列の左側へ画像を配置する
• tk.RIGHT : 文字列の右側へ画像を配置する
• tk.BOTTOM : 文字列の下側へ画像を配置する
• tk.TOP : 文字列の上側へ画像を配置する
• tk.CENTER : 画像の真ん中へ文字列を配置する
• tk.NONE : 文字列を表示しない(デフォルト)

の6種類が存在します。

例えば「完成コード」を、以下のように変更すると、

1+    # 画像について : https://kuroro.blog/python/Z7k1LSyDyiDHtD5UCjmG/
2+    global image
3+    image = tk.PhotoImage(file="/{画像のパス}/{画像ファイル名}.{拡張子}")
4-    mb = tk.Menubutton(frame, text="Select alphabet")
5+    mb = tk.Menubutton(frame, text="Select alphabet", image=image, compound=tk.LEFT)

以下の画像のようにmenubutton Widgetを描画します。

wraplength

wraplength optionを利用すると、menubutton Widgetで利用する文字列の折り返し幅を設定できます。

例えば「完成コード」で紹介したmb = tk.Menubutton(frame, text="Select alphabet")箇所を、以下のように変更すると、

1# 別解法 ##########################
2# mb = tk.Menubutton(frame)
3# mb.config(text="Select alphabetSelect alphabetSe", wraplength=50) or mb.configure(text="Select alphabetSelect alphabetSe", wraplength=50)
4##################################
5mb = tk.Menubutton(frame, text="Select alphabetSelect alphabetSe", wraplength=50)

以下の画像のようにmenubutton Widgetを描画します。

justify

justify optionを利用すると、menubutton Widgetで利用する文字列をどちらに揃えるか設定できます。

指定方法としては、

• tk.LEFT : 左寄せ(デフォルト)
• tk.CENTER : 中央寄せ
• tk.RIGHT : 右寄せ

の3種類があります。

例えば「完成コード」で紹介したmb = tk.Menubutton(frame, text="Select alphabet")箇所を、以下のように変更すると、

1# 別解法 ##########################
2# mb = tk.Menubutton(frame)
3# mb.config(text="Select alphabetSelect alphabetSe", wraplength=50, justify=tk.RIGHT) or mb.configure(text="Select alphabetSelect alphabetSe", wraplength=50, justify=tk.RIGHT)
4##################################
5mb = tk.Menubutton(frame, text="Select alphabetSelect alphabetSe", wraplength=50, justify=tk.RIGHT)

以下の画像のようにmenubutton Widgetを描画します。

state

state optionを利用すると、menubutton Widgetの状態を設定できます。

指定できる値としては、

• normal : menubuttonへの選択を有効。マウスカーソルがmenubutton上に乗っていない状態を表す。デフォルト。
• disabled : menubuttonへの選択を無効。
• active : menubuttonへの選択を有効。マウスカーソルがmenubutton上に乗っている状態を表す。

があります。

例えば「完成コード」で紹介したmb = tk.Menubutton(frame, text="Select alphabet")箇所を、以下のように変更すると、

1# 別解法 ##########################
2# mb = tk.Menubutton(frame)
3# mb.config(text="Select alphabet", state='disabled') or mb.configure(text="Select alphabet", state='disabled')
4##################################
5mb = tk.Menubutton(frame, text="Select alphabet", state='disabled')

以下の画像のようにmenubutton Widgetを選択できなくなります。

disabledforeground

disabledforeground optionを利用すると、menubutton Widgetの状態(state)がdisabledの時の、文字列色を設定できます。

例えば「完成コード」で紹介したmb = tk.Menubutton(frame, text="Select alphabet")箇所を、以下のように変更すると、

1# 別解法 ##########################
2# mb = tk.Menubutton(frame)
3# mb.config(text="Select alphabet", state='disabled', disabledforeground='red') or mb.configure(text="Select alphabet", state='disabled', disabledforeground='red')
4##################################
5# 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
6mb = tk.Menubutton(frame, text="Select alphabet", state='disabled', disabledforeground='red')

以下の画像のようにmenubutton Widgetを描画します。

textvariable

textvariable optionを利用すると、menubutton Widgetで利用する文字列を、可変に扱うことが可能になります。

例えば「完成コード」を、以下のように変更すると、

1 def __init__(self, master=None):
2    ...
3    frame.pack()
4
5+   # self.textvariable : 文字列情報を保存する変数
6+   # 文字列情報を保存する変数をstring型の変数とする。
7+   # StringVarについて : https://kuroro.blog/python/K53voPjJuKFfYrjmP8FP/
8+   self.textvariable = tk.StringVar()
9+   # self.textvariable変数の値を初期化する。
10+   # .set(値) : 値を設定する。
11+   self.textvariable.set('選択してください')
12-   mb = tk.Menubutton(frame, text="Select alphabet")
13+   # textvariable : menubutton Widgetへ文字列を表示する。値を可変なself.textvariableとする。
14+   mb = tk.Menubutton(frame, textvariable=self.textvariable)
15
16    ...
17    menu = tk.Menu(mb)
18
19-   menu.add_command(label="A")
20+   # command : Aのメニューを選択した場合に、実行する関数を設定。self.changeTextとする。
21+   menu.add_command(label="A", command=self.changeText)
22
23+ def changeText(self):
24+   # menubutton Widgetの文字列情報を更新する。
25+   # .set(値) : 値を設定する。
26+   self.textvariable.set("Aのメニューが選択されました。")

始めに、以下の画像のようにmenubutton Widgetを描画して、

Aのメニューを選択すると、以下の画像のようにmenubutton Widgetを描画します。

StringVar()に関しては、Tkinterで使うWidgetの変数とは?StringVarを中心に解説!?でまとめていますので、詳しく知りたい方は是非ご確認ください。

direction

direction optionを利用すると、menubutton Widget内で利用するmenuの表示位置を設定できます。

指定方法としては、

• tk.LEFT : 左側
• tk.RIGHT : 右側
• 'above' : 上側
• 'below' : 下側(デフォルト)

の4種類あります。

例えば「完成コード」で紹介したmb = tk.Menubutton(frame, text="Select alphabet")箇所を、以下のように変更すると、

1# 別解法 ##########################
2# mb = tk.Menubutton(frame)
3# mb.config(text="Select alphabet", direction='above') or mb.configure(text="Select alphabet", direction='above')
4##################################
5mb = tk.Menubutton(frame, text="Select alphabet", direction='above')

以下の画像のようにmenubutton Widgetを描画します。

まとめ

• Tkinterは、Window, Frame, Widgetで構成される。
• Tkinterで使われるmenubuttonとは、Widgetの一種で、menubuttonを選択すると、様々なmenuを展開できる入れ物を意味します。
• 別名menubutton Widgetと呼ばれます。

参考文献

• Tkinterのmenubuttonに関するサンプルコード
• menuとは?
• XBMとは?
• bitmap画像の詳細
• マウスカーソルとは?
• カーソルに関する見た目のバリエーション
• 文字列の折り返しとは?