こんにちは！この記事ではpythonでGUIを作成するためのパッケージであるTkinterについて解説します。Tkinterを使うと皆さんが普段見慣れているボタンやタブといったGUIを簡単に作ることができます。本記事では私がGUIを作るにあたって必要だったボタンと表およびタブの使い方を解説していきます。
Tkinterの基本
Tkinterのインポート
Tkinterはwindows環境であれば、あらかじめpython内に含まれているので別途インストールの必要はありません。下記のようにimport文でTkinterを使う準備をしましょう。
import tkinter as tkウィンドウの表示
まずはボタンや表を配置するためのメインウィンドウを表示してみましょう。下記のコードを実行してみてください。
import tkinter as tk
##############################################
# メイン画面の基礎設定
##############################################
main = tk.Tk()
main.title("これはメインウィンドウです") # ウィンドウ左上の説明文
main.geometry("480x320") # 画面サイズの設定
# メインループ実行
main.mainloop()実行して下記のような画面が現れたら成功です！
ちなみに、画面サイズの設定を下記のように変更することでメインウィンドウを最初から全画面で表示することができます。
main.state('zoomed') # メインウィンドウを全画面で表示ボタン(Button)
基本のボタン
ボタンに最低限必要な要素は「ボタンのテキスト」「コールバック関数」の2つです。この2つだけを備えた基本的なボタンを作成してみましょう。ちなみに、コールバック関数とはボタンがクリックされたときに呼び出される関数の事です。
import tkinter as tk
##############################################
# メイン画面の基礎設定
##############################################
main = tk.Tk()
main.title('これはメインウィンドウです') # ウィンドウ左上の説明文
main.geometry('480x320') # 画面サイズの設定
##############################################
# Button
##############################################
# ボタンがクリックされたときに実行される関数
def btn_event():
print('ボタンがクリックされました')
# ボタンの作成
txt = 'ボタン文字'
btn = tk.Button(master=main, text=txt, command=btn_event)
# 作成したボタンを配置
btn.pack()
# メインループ実行
main.mainloop()このプログラムを実行すると下記のように小さなボタンが出力されます。
これだと、ボタンの文字が小さくて読みにくいですよね…それに、ボタンの色が背景と同化して分かりにくいです。これらの問題はボタンをインスタンス化する際に引数を指定すれば解決することができます。
ボタンの装飾(文字サイズ、フォント、背景色の指定)
先ほど紹介した基本のボタンのプログラムに文字サイズとフォントおよび背景色の指定を追加したプログラムを下記に示します。今回のプログラムではボタンの文字サイズを32ptとし、フォントはwindows10標準のシステムフォントであるYu Gothic UIを指定しています。また、背景色についてはTkinterで提供されている色を使用しました。この部分は'#00FF00'のように16進数で任意の色を入力する事も可能です。
import tkinter as tk
##############################################
# メイン画面の基礎設定
##############################################
main = tk.Tk()
main.title('これはメインウィンドウです') # ウィンドウ左上の説明文
main.geometry('480x320') # 画面サイズの設定
##############################################
# Button
##############################################
# ボタンがクリックされたときに実行される関数
def btn_event():
print('ボタンがクリックされました')
# ボタンの作成
txt = 'ボタン文字'
color = 'green2' # '#00FF00'などの任意色指定も可
font = ('Yu Gothic UI', 32)
btn = tk.Button(master=main, text=txt, command=btn_event, bg=color, font=font)
# 作成したボタンを配置
btn.pack()
# メインループ実行
main.mainloop()このプログラムを実行すると、引数で指定した通りのフォントや背景色のボタンが出力されます。最初に説明した装飾無しのボタンよりも見やすくなりましたね。
ボタンのサイズ指定
Tkinterのボタンは標準だと文字が収まるように自動でサイズが決まりますが、作成するGUIによってはボタンの幅や高さを指定したい時もあると思います。ボタンの高さや幅も先ほどと同様にインスタンス化する際の引数で指定可能です。
import tkinter as tk
##############################################
# メイン画面の基礎設定
##############################################
main = tk.Tk()
main.title('これはメインウィンドウです') # ウィンドウ左上の説明文
main.geometry('480x320') # 画面サイズの設定
##############################################
# Button
##############################################
# ボタンがクリックされたときに実行される関数
def btn_event():
print('ボタンがクリックされました')
# ボタンの作成
txt = 'ボタン文字'
color = 'green2'
font = ('Yu Gothic UI', 32)
btn = tk.Button(master=main, text=txt, command=btn_event, bg=color, font=font, height=4, width=16)
# 作成したボタンを配置
btn.pack()
# メインループ実行
main.mainloop()ボタンの高さと幅を指定する事で、かなり大きなボタンを作成できました。実際にGUIでここまで大きなボタンは見かけませんが、幅や高さの微調整はよくあると思うので、ぜひご活用ください！
表(Table)
基本の表
次に、基本的な表について解説していきます。表を作るには行数と列数を指定する必要があります。Tkinterの表では、行数の指定はTreeviewオブジェクトのインスタンス化の際に、列数の指定は列の要素を表したタプルで指定します。その次に、ヘッダーに表示する文字列と各列の幅を指定すれば表の設定は完了です。あとはinsert()でデータを表に挿入していきましょう。
import tkinter as tk
import tkinter.ttk as ttk
##############################################
# メイン画面の基礎設定
##############################################
main = tk.Tk()
main.title('これはメインウィンドウです') # ウィンドウ左上の説明文
main.geometry('480x120') # 画面サイズの設定
##############################################
# Talbe
##############################################
# 表をインスタンス化(行数を指定)
tbl = ttk.Treeview(master=main, height=3)
# 列を作成
tbl['columns'] = ('name', 'price', 'number', 'total')
# ヘッダーの設定
tbl['show'] = 'headings'
tbl.heading('name' , text='品名')
tbl.heading('price' , text='単価')
tbl.heading('number', text='購入数')
tbl.heading('total' , text='価格')
# 各列の幅を設定
tbl.column('name' , width=150)
tbl.column('price' , width=100)
tbl.column('number', width=100)
tbl.column('total' , width=100)
# データ設定
tbl.insert('', 'end', values=('商品A', '100', '2', '200'))
tbl.insert('', 'end', values=('商品B', '200', '3', '600'))
tbl.insert('', 'end', values=('商品C', '150', '1', '150'))
# 作成した表を配置
tbl.pack()
# メインループ実行
main.mainloop()実行して下記のような画面が現れたら成功です！挿入したデータが表示されている事が確認できました。
表のフォント設定
次に表のフォント設定について解説します。表のフォント設定はボタンと比較して少々ややこしいですが、基本的に下記コードの15～18行目をコピペして頂ければOKです。少し解説すると、17行目の'Treeview.Heading'は表のヘッダー部分のフォント設定で、18行目の'Treeview'はデータ部分のフォント設定となっています。
import tkinter as tk
import tkinter.ttk as ttk
##############################################
# メイン画面の基礎設定
##############################################
main = tk.Tk()
main.title('これはメインウィンドウです') # ウィンドウ左上の説明文
main.geometry('480x120') # 画面サイズの設定
##############################################
# Talbe
##############################################
# フォントとフォントサイズを指定
font = ('Yu Gothic UI', 13)
style = ttk.Style()
style.configure('Treeview.Heading',font=font)
style.configure('Treeview',font=font)
# 表をインスタンス化(行数を指定)
tbl = ttk.Treeview(master=main, height=3)
# 列を作成
tbl['columns'] = ('name', 'price', 'number', 'total')
# ヘッダーの設定
tbl['show'] = 'headings'
tbl.heading('name' , text='品名')
tbl.heading('price' , text='単価')
tbl.heading('number', text='購入数')
tbl.heading('total' , text='価格')
# 各列の幅を設定
tbl.column('name' , width=150)
tbl.column('price' , width=100)
tbl.column('number', width=100)
tbl.column('total' , width=100)
# データ設定
tbl.insert('', 'end', values=('商品A', '100', '2', '200'))
tbl.insert('', 'end', values=('商品B', '200', '3', '600'))
tbl.insert('', 'end', values=('商品C', '150', '1', '150'))
# 作成した表を配置
tbl.pack()
# メインループ実行
main.mainloop()
タブ(Tab)
基本のタブ
次に、タブについて解説していきます。GUIを作っていくと徐々に情報量が増えていき、ウィンドウ内に収まらなくなりませんか？かといって、別ウィンドウを作るのも面倒くさい…そんな時に役立つのがTkinterのタブです。これまでは、ボタンや表などのウェジットをメインウィンドウに割り当てていましたが、タブを使うとウェジットをそれぞれ個別のタブに割り当てる事ができます。そのため、1つのメインウィンドウ内に多くのウェジットを配置できるという訳です。
長々と説明してしまいましたが、使い方としては下記プログラムの通りです。タブのインスタンス化を行い、タブに表示する文字列を設定します。その後、ウェジットのインスタンス化の際にインスタンス化したタブを渡します。
import tkinter as tk
import tkinter.ttk as ttk
##############################################
# メイン画面の基礎設定
##############################################
main = tk.Tk()
main.title('これはメインウィンドウです') # ウィンドウ左上の説明文
main.geometry('300x100') # 画面サイズの設定
##############################################
# Tab
##############################################
# タブのインスタンスを作成
nb = ttk.Notebook(main)
tab1 = tk.Frame(nb)
tab2 = tk.Frame(nb)
# タブに表示する文字列の設定
nb.add(tab1, text='1st Tab', padding=4)
nb.add(tab2, text='2nd Tab', padding=4)
# 作成したタブにlabelを配置する
lbl1 = tk.Label(master=tab1, text='ここはタブ1')
lbl2 = tk.Label(master=tab2, text='ここはタブ2')
# 作成した要素を配置
nb.pack(expand=1, fill='both')
lbl1.pack()
lbl2.pack()
# メインループ実行
main.mainloop()実行して下記のような画面が現れたら成功です！用意した2つのタブにそれぞれラベルが割り当てられている事が確認できました。
タブのフォント設定
タブのフォント設定は表とほとんど同じです。下記プログラムの16～18行目がフォント設定です。フォント名とフォントサイズのタプルを設定用関数に渡すだけですね。
import tkinter as tk
import tkinter.ttk as ttk
##############################################
# メイン画面の基礎設定
##############################################
main = tk.Tk()
main.title('これはメインウィンドウです') # ウィンドウ左上の説明文
main.geometry('300x100') # 画面サイズの設定
##############################################
# Tab
##############################################
# フォントサイズを変更
font = ('Yu Gothic UI', 20)
style = ttk.Style()
style.configure('TNotebook.Tab', font=font)
# タブのインスタンスを作成
nb = ttk.Notebook(main)
tab1 = tk.Frame(nb)
tab2 = tk.Frame(nb)
# タブに表示する文字列の設定
nb.add(tab1, text='1st Tab', padding=4)
nb.add(tab2, text='2nd Tab', padding=4)
# 作成したタブにlabelを配置する
lbl1 = tk.Label(master=tab1, text='ここはタブ1', font=font)
lbl2 = tk.Label(master=tab2, text='ここはタブ2', font=font)
# 作成した要素を配置
nb.pack(expand=1, fill='both')
lbl1.pack()
lbl2.pack()
# メインループ実行
main.mainloop()
まとめ
いかがでしょうか。今回はTkinterのボタンと表とタブの使い方を解説しました。Tkinterは奥が深く、使いこなせるようになると様々なGUIを作ることができます。この記事がお役に立てれば幸いです！
コメント