GUI(Graphical User Interface)アプリケーションの開発において、ユーザーフレンドリーで効果的なインターフェースを構築するために、Tkinterライブラリを活用することは非常に重要です。TkinterはPythonの標準GUIライブラリであり、多くのPython開発者にとって最初の選択肢です。そして、その中でもボタンは、ユーザーとの対話を実現するために不可欠な要素です。
しかし、Tkinterボタンの使い方やカスタマイズについての情報は、初学者から経験豊富な開発者まで、幅広いスキルレベルのプログラマーにとって、しばしば混乱のもととなります。そこで、このブログではTkinterボタンに焦点を当て、その基本から高度なテクニックまでを網羅的に取り上げます。
Tkinterボタンの正しい使い方やデザイン、イベントハンドリング、フォーカスの制御、そしてユーザー体験の向上に向けたヒントとコツを提供します。また、特定の文字に下線を引いたり、フォーカスの振る舞いを調整したりする方法についても詳しく説明します。
このブログでは、Tkinterボタンを使ったGUIアプリケーションの開発において、成功への道を拓くための情報を提供します。さあ、一緒にTkinterボタンの世界へ深く探検し、優れたユーザーエクスペリエンスを実現しましょう。
Buttonのオプション
Buttonで使えるスタンダートオプションは以下の通りです。(ABC順)
activebackground, activeforeground, anchor,background, bitmap, borderwidth, cursor,disabledforeground, font, foreground,highlightbackground, highlightcolor,highlightthickness, image, justify,padx, pady, relief, repeatdelay,repeatinterval, takefocus, text,textvariable, underline, wraplength
Buttonで使える固有オプションは以下の通りです。(ABC順)
command, compound, default, height,overrelief, state, width
Buttonの固有メソッド
Buttonは固有メソッドとしてflashとinvokeを持っています。
Buttonの作成
クリックすると「クリックしました」と出力するシンプルなボタンを作成して配置するコード例です。
例1:オブジェクト指向型
import tkinter as tk
class MyApplication:
def __init__(self, root):
self.root = root
self.create_widgets()
def create_widgets(self):
self.button_a = tk.Button(self.root, text="ボタン", command=self.button_click)
self.button_a.pack()
def button_click(self):
print("クリックしました")
if __name__ == "__main__":
root = tk.Tk()
app = MyApplication(root)
root.mainloop()
例2:手続き型
import tkinter as tk
def button_click():
print("クリックしました")
root = tk.Tk()
button_a = tk.Button(root, text="ボタン", command=button_click)
button_a.pack()
root.mainloop()
オプションの設定方法
Tkinterでオプションを設定する方法は下記の3パターンが用意されています。
パターン1:引数にキーワード指定する
button_a = tk.Button(root, text="ボタン", foreground="red")
パターン2:オプションを辞書インデックスとして指定
button_a = tk.Button(root, text="ボタン")
button_a["foreground"] = "red"
パターン3:config()メソッドを使用する(configure()でも可)
button_a = tk.Button(root, text="ボタン")
button_a.config(foreground="red")
config()メソッドは主にオプションを後から変更したい時に使用されます。
import tkinter as tk
# クリックすると文字が青くなる関数
def button_click():
button_a.config(foreground="blue")
root = tk.Tk()
# 赤い文字のボタンを作成
button_a = tk.Button(root, text="ボタン", foreground="red", command=button_click)
button_a.pack()
root.mainloop()
また、オプションの元の値を取得する時にはcget()メソッドが使えます。
下記のコードはクリックする度にボタンが縦に伸びていくサンプルコードです。
import tkinter as tk
# クリックすると高を倍にする
def button_click():
height = button_a.cget("height")
button_a.config(height=height*2)
root = tk.Tk()
# 高さが2のボタンを作成
button_a = tk.Button(root, text="ボタン", height=2, command=button_click)
button_a.pack()
root.mainloop()
クリック前
3回クリック後
オプション固有のデフォルトの値を変更する
各オプションには予めデフォルトの値が割り振られています。
option_add()メソッドを使用する事でデフォルトの値を変更できます。
下記コードはボタンの背景色を変更するサンプルコードです。
import tkinter as tk
root = tk.Tk()
root.option_add('*Button.background', '#afafb0')
button_a = tk.Button(root, text="ボタン",)
button_a.pack()
root.mainloop()
Buttonの各オプションの詳細
Bunttonクラスの各オプションをコードを用いて解説していきます。
なお、個人的に優先度の高いオプションから紹介しています。
主要オプション
command
commandはButtonクラスで最も重要なオプションです。
commandは押したときに実行される関数を指定する事が出来ます。
import tkinter as tk
def button_click():
print("クリックしました")
root = tk.Tk()
button_a = tk.Button(root, text="ボタン", command=button_click)
button_a.pack()
root.mainloop()
上記のコードではcommand=button_clickと書かれています。
これでbutton_aがクリックされた時にbutton_click関数が実行されます。
commandで関数を指定する際には()を付けない点に注意して下さい。
()を付けるとスクリプト実行時に関数が実行されてしまうので、ボタンを押しても何も反応しません。
引数を渡したい場合はlambda式を使用すると簡単に記述する事が出来ます。
import tkinter as tk
def button_click(kw):
print(f"{kw}")
root = tk.Tk()
button_a = tk.Button(root, text="ボタン", command=lambda : button_click("テスト"))
button_a.pack()
root.mainloop()
上記のサンプルコードでボタンをクリックすると引数として渡した「テスト」の文字列が出力されます。
text
textはボタンに表示させる文字を指定するオプションです。
複数行のボタンを作成する方法は三連引用符を用いるか改行コードを使用します。
例1:三連引用符
import tkinter as tk
root = tk.Tk()
button_a = tk.Button(
root,
text="""1行目
2行目"""
)
button_a.pack()
root.mainloop()
例2:改行コード
import tkinter as tk
root = tk.Tk()
button_a = tk.Button(root, text="1行目\n2行目")
button_a.pack()
root.mainloop()
textvariable
textvariableはテキストに表示する文字を指定するオプションです。
textvariableはテキスト用のヴィジェット変数となっており、textオプションより優先されます。
各ヴィジェット変数(Variable、BooleanVar、DoubleVar、IntVar、StringVar)をインスタンス化した後set()メソッドを使ってオブジェクトにテキストをセットする事が出来ます。
import tkinter as tk
def button_click():
button_text.set("クリックされました")
root = tk.Tk()
button_text = tk.StringVar(root)
button_text.set("クリックして下さい")
button_a = tk.Button(root, textvariable=button_text, command=button_click)
button_a.pack()
root.mainloop()
font
fontの設定方法はコチラの記事でまとめておりますので、コチラを参考にして下さい。
Tkinter fontの設定方法
画像関係
コチラのサイトから画像をお借りしています。
→http://sozai.akuseru-design.com/category/sozai/button/
使用画像
image
ボタンに画像を指定する際はimageオプションを使用します。
imageオプションを使用する為にはtkinterのPhotoImageクラスを使って画像をインスタンス変数に代入する必要があります。
import tkinter as tk
root = tk.Tk()
root.geometry("500x300")
img = tk.PhotoImage(file=r"C:tkinter\img\btn.png")
button = tk.Button(root, image=img)
button.pack()
root.mainloop()
bitmap
あまり使われることはありませんがbitmapも扱うことが出来ます。
bitmapを使うと組み込み画像を使用できます。
左から'error'
, 'gray75'
, 'gray50'
, 'gray25'
, 'gray12'
, 'hourglass'
, 'info'
, 'questhead'
, 'question'
, 'warning'
サンプルスクリプト
import tkinter as tk
root = tk.Tk()
root.geometry("500x300")
button = tk.Button(root, bitmap='warning')
button.pack()
root.mainloop()
compound
compoundを使うとtextと画像を組み合わせてボタンを作ることが出来ます。
これはテキストをcenter(中央)に配置した例です。サンプルコード
import tkinter as tk
root = tk.Tk()
root.geometry("500x300")
img = tk.PhotoImage(file=r"C:teitter_tkinter\img\btn.png")
button = tk.Button(root, text="ボタン", image=img, compound="center")
button.pack()
root.mainloop()
また、各値は画像を元に命名付けされています。
top | 画像をテキストの上に配置 |
bottom | 画像をテキストの下に配置 |
right | 画像をテキストの右に配置 |
left | 画像をテキストの左に配置 |
center | 画像とテキストを中央に配置 テキストが画像の上に表示される |
none | 画像のみ表示(デフォルト値) |
サイズ
height
ボタンの高さを指定するオプションです。
テキストのみのボタンの時は文字数を元に指定します。
つまりhright=10とすると10文字分の高さを持ったボタンが作成されます。
import tkinter as tk
root = tk.Tk()
root.geometry("500x300")
button = tk.Button(root, text="ボタン", height=10)
button.pack()
root.mainloop()
ボタンに画像が使用されている場合、pxを指定できます。
width
ボタンの幅を指定します。使い方はheightと同様です。
anchor
ボタンの中にテキストを配置する位置を東西南北で指定できます。
‘nw’ | ‘n’ | ‘ne’ |
‘w’ | ‘center’ | ‘e’ |
‘sw’ | ‘s’ | ‘se’ |
何も指定しない場合デフォルトになります。
北西(nw)に配置するサンプルコード
import tkinter as tk
root = tk.Tk()
root.geometry("500x300")
button = tk.Button(root, text="ボタン", height=5, width=10, anchor="nw")
button.pack()
root.mainloop()
justify
複数行テキストの揃え方を指定します。
値はleft,center,rightでデフォルトはcenterです。
右側で揃えるサンプルコード
import tkinter as tk
root = tk.Tk()
root.geometry("500x300")
button = tk.Button(root, text="あああああ\nいいいい\nううう", height=5, width=10, justify="right")
button.pack()
root.mainloop()
padx
x方向に内部間隔を作ります。
import tkinter as tk
root = tk.Tk()
root.geometry("500x300")
button = tk.Button(root, text="ボタン", padx=100)
button.pack()
root.mainloop()
pady
y方向に内部間隔を作ります。
import tkinter as tk
root = tk.Tk()
root.geometry("500x300")
button = tk.Button(root, text="ボタン", pady=30)
button.pack()
root.mainloop()
wraplength
テキストを折り返すまでの幅をスクリーン座標単位で指定します。
import tkinter as tk
root = tk.Tk()
root.geometry("500x300")
button = tk.Button(root, text="ボタン", wraplength=10)
button.pack()
root.mainloop()
色関係
background (bg)
背景色を指定します。backgroundはbgと略する事ができます。
色の指定方法はRGBでも指定できますが、Tkinterでは様々な色を色名で用意されていますので、そちらで指定する事もできます。
色名はコチラを参照にして下さい。
→https://www.tcl.tk/man/tcl8.6/TkCmd/colors.html
import tkinter as tk
root = tk.Tk()
root.geometry("500x300")
button = tk.Button(root, text="ボタン", background='brown')
button.pack()
root.mainloop()
foreground (fg)
テキストの色を指定しますforegroundはfgと表記する事ができます。
色の指定方法はbackgroundと同じです。
activebackground
ボタンがアクティブ状態の時の背景色を指定します。
以下はクリック時に背景の色が変わるサンプルコードです。
import tkinter as tk
root = tk.Tk()
root.geometry("500x300")
button = tk.Button(root, text="ボタン", activebackground='brown')
button.pack()
root.mainloop()
activeforeground
ボタンがアクティブ状態の時のテキストの色を指定できます。
disabledforeground
ボタンが無効状態の時のテキストの色を指定できます。
import tkinter as tk
root = tk.Tk()
root.geometry("500x300")
button = tk.Button(root, text="ボタン", state="disabled", disabledforeground='brown')
button.pack()
root.mainloop()
外枠
borderwidth(bd)
境界線の幅を指定します。
borderwidthはbdと略する事ができます。
import tkinter as tk
root = tk.Tk()
root.geometry("500x300")
button = tk.Button(root, text="ボタン", borderwidth=10)
button.pack()
root.mainloop()
カーソル
Tkinterで使用できるマウスカーソルの種類はコチラのサイトで調べてください。
Tcl8.6/Tk8.6 – Tk Commands – cursors
以下は、Tkinterを使用してボタンとカーソルを設定するサンプルコードです。この例では、マウスポインタがボタンの上に移動するとカーソルの形状が変わるように設定します。
import tkinter as tk
def change_cursor(event):
# マウスポインタがボタンの上に入るとカーソルの形状を変更する
button.config(cursor='hand2')
def restore_cursor(event):
# マウスポインタがボタンの上から出るとカーソルの形状を元に戻す
button.config(cursor='')
# Tkinterウィンドウを作成
root = tk.Tk()
root.title("カーソルのサンプル")
# ボタンを作成
button = tk.Button(root, text="カーソルを変更するボタン")
button.pack(padx=20, pady=20)
# ボタンにマウスポインタのイベントをバインド
button.bind("<Enter>", change_cursor)
button.bind("<Leave>", restore_cursor)
# Tkinterメインループを開始
root.mainloop()
このコードでは、tk.Button
を使用してボタンを作成し、マウスポインタがボタンの上に入ると<Enter>
イベントがトリガーされ、change_cursor
関数が呼び出されてカーソルの形状が変更されます。また、マウスポインタがボタンの上から出ると<Leave>
イベントがトリガーされ、restore_cursor
関数が呼び出されてカーソルの形状が元に戻ります。
ボタンの上でマウスを移動させてカーソルの形状が変化することを確認できるはずです。
形状
relief
Tkinterを使用してボタンとrelief
オプションを設定するサンプルコードを以下に示します。relief
オプションは、ボタンの立体的な外観を制御します。以下の例では、ボタンのrelief
を変更して異なる立体的な効果を示しています。
import tkinter as tk
def set_relief_flat():
button.config(relief=tk.FLAT)
def set_relief_raised():
button.config(relief=tk.RAISED)
def set_relief_sunken():
button.config(relief=tk.SUNKEN)
def set_relief_groove():
button.config(relief=tk.GROOVE)
def set_relief_ridge():
button.config(relief=tk.RIDGE)
# Tkinterウィンドウを作成
root = tk.Tk()
root.title("reliefオプションのサンプル")
# ボタンを作成
button = tk.Button(root, text="ボタン", width=20, height=2)
button.pack(pady=20)
# ボタンを変更するためのボタンを作成
flat_button = tk.Button(root, text="FLAT", command=set_relief_flat)
flat_button.pack(side=tk.LEFT, padx=10)
raised_button = tk.Button(root, text="RAISED", command=set_relief_raised)
raised_button.pack(side=tk.LEFT, padx=10)
sunken_button = tk.Button(root, text="SUNKEN", command=set_relief_sunken)
sunken_button.pack(side=tk.LEFT, padx=10)
groove_button = tk.Button(root, text="GROOVE", command=set_relief_groove)
groove_button.pack(side=tk.LEFT, padx=10)
ridge_button = tk.Button(root, text="RIDGE", command=set_relief_ridge)
ridge_button.pack(side=tk.LEFT, padx=10)
# Tkinterメインループを開始
root.mainloop()
このコードでは、ボタンを作成し、その下に異なるrelief
オプションを設定するためのボタンを配置しています。ボタンをクリックすると、ボタンの外観が異なる立体的な効果に変更されます。
フォーカス
フォーカスはTabキー等のフォーカス移動を指します。
takefocus
takefocus
オプションをTrue
とFalse
の両方の設定で持つボタンを追加したサンプルコードを以下に示します。一つはtakefocus=True
でフォーカスを受け取り、もう一つはtakefocus=False
でフォーカスを受け取らないボタンです。
import tkinter as tk
def on_button_click_takefocus_true():
label.config(text="Takefocus=Trueのボタンがクリックされました")
def on_button_click_takefocus_false():
label.config(text="Takefocus=Falseのボタンがクリックされました")
# Tkinterウィンドウを作成
root = tk.Tk()
root.title("takefocusオプションのサンプル")
# ラベル
label = tk.Label(root, text="ボタンをクリックしてください")
label.pack(pady=20)
# Takefocus=Trueのボタンを作成
button_takefocus_true = tk.Button(root, text="Takefocus=Trueのボタン", command=on_button_click_takefocus_true, takefocus=True)
button_takefocus_true.pack(padx=20, pady=10)
# Takefocus=Falseのボタンを作成
button_takefocus_false = tk.Button(root, text="Takefocus=Falseのボタン", command=on_button_click_takefocus_false, takefocus=False)
button_takefocus_false.pack(padx=20, pady=10)
# 別のウィジェット(エントリ)をフォーカスできるように設定
entry = tk.Entry(root)
entry.pack(padx=20, pady=10)
# Tkinterメインループを開始
root.mainloop()
このコードでは、takefocus=True
とtakefocus=False
の2つのボタンを作成し、それぞれのボタンがクリックされたときに異なるメッセージを表示します。一方のボタンはフォーカスを受け取り、もう一方のボタンはフォーカスを受け取らないことが確認できます。
まとめ
Tkinterを使用してボタンを操作する方法について詳しく見てきました。ボタンはGUIアプリケーションの重要な要素であり、ユーザーインターフェースを構築する上で欠かせないものです。我々はボタンの作成、テキストのカスタマイズ、クリックイベントの処理、外観のカスタマイズ、フォーカスの制御など、ボタンに関するさまざまな側面を学びました。
Tkinterのボタンを使いこなすことで、ユーザーフレンドリーなアプリケーションを設計し、効果的なインタラクションを提供することができます。Tkinterを使ったアプリケーション開発のスキルは、Pythonプログラマーにとって非常に価値のあるものです。ぜひこの知識を活用して、魅力的なGUIアプリケーションを作成してみてください。
お読みいただき、ありがとうございました。Tkinterを使ったボタンの操作に関する情報がお役に立てれば幸いです。今後のプログラミングプロジェクトで、Tkinterのボタンを上手に活用してください。成功をお祈りしています。