Python tkinterについて

Question

python学習中の者です。

tkinterを使い、業務効率化プログラムを起動したいです。
イメージではPCのフォルダのようで、
第一階層に「日時・月次・年次」の３つのボタンを配置し、各ボタンをおすと、にち業務A/業務B/業務Cといった業務のボタンが配置されているページになります。
そのボタンをおすと、プログラムが実行される仕組みにしたいと考えています。

さて、現在以下のコードで第一階層まで表示できました。

import tkinter as tk

root_main=tk.Tk()
root_main.title("プログラム実行")
root_main.geometry("600x400")

btn_nichiji=tk.Button(root_main,text="日時",height=4,width=28)
btn_getsuji=tk.Button(root_main,text="月次",height=4,width=28)
btn_nenji=tk.Button(root_main,text="年次",height=4,width=28)

btn_nichiji.pack()
btn_getsuji.pack()
btn_nenji.pack()

tk.mainloop()

このあと、第二階層のページへ移りたいのですが、どのようなコードを書けばよいのでしょうか？
お知恵をお貸しください。

以下追記
以下のコードで試してみましたが添付画像のような左詰めになってしまいます。
おそらくpack()の部分がうまくいっていないと思うのですが、なぜなのでしょうか。

import tkinter as tk
import subprocess as sb 
from functools import partial

root=tk.Tk()
root.title("プログラム実行")
root.geometry("600x600")

#関数作成
def runtask(path):
    sb.run(["python",path],shell=True)



#ページ作成----------------------------------------------------------------------------------------------------
#メイン
page_main=tk.Frame(root)
page_getsuji=tk.Frame(root)
page_nichiji=tk.Frame(root)
page_nenji=tk.Frame(root)

#月次
page_getsuji_yusho=tk.Frame(root)
page_getsuji_kinsen=tk.Frame(root)
page_getsuji_tanki=tk.Frame(root)
page_getsuji_lending=tk.Frame(root)

pages=[page_main,page_getsuji,page_nichiji,page_nenji,page_getsuji_yusho,
page_getsuji_kinsen,page_getsuji_tanki,page_getsuji_lending]


#ボタン設定----------------------------------------------------------------------------------------------------
Button = partial(tk.Button, height=4, width=28)




#メインページ------------------------------------------------------------------------------------------------------------------------------------
Button(page_main,text="日次",command=page_nichiji.tkraise).pack()
Button(page_main,text="月次",command=page_getsuji.tkraise).pack()
Button(page_main,text="年次",command=page_nenji.tkraise).pack()


#月次ページ--------------------------------------------------------------------------------------------------------------------------------------
Button(page_getsuji,text="有価証券",command=page_getsuji_yusho.tkraise).pack()
Button(page_getsuji,text="金銭信託",command=page_getsuji_kinsen.tkraise).pack()
Button(page_getsuji,text="短期性資産",command=page_getsuji_tanki.tkraise).pack()
Button(page_getsuji,text="貸付",command=page_getsuji_lending.tkraise).pack()
Button(page_getsuji,text="戻る",command=page_main.tkraise)
tk.Button(page_getsuji, text="戻る").place(x=10, y=10)


#有価証券
Button(page_getsuji_yusho,text="ワークブック作成",
       command=partial(runtask,r"C:\Users\sirar\Documents\My python\EXCEL\1.workbook\workbook_create.py")).pack()




for frame in pages:
    frame.grid(row=0,column=0,sticky=tk.NSEW)


page_main.tkraise()

root.mainloop()

Answer 1

teamikl様 以下のコードで試してみましたが画像のような配置になってしまいます。
おそらくpackの部分がうまくいっていないと思いますが、なぜでしょうか。

import tkinter as tk
import subprocess as sb 
from functools import partial

root=tk.Tk()
root.title("プログラム実行")
root.geometry("600x600")

#関数作成
def runtask(path):
    sb.run(["python",path],shell=True)



#ページ作成----------------------------------------------------------------------------------------------------
#メイン
page_main=tk.Frame(root)
page_getsuji=tk.Frame(root)
page_nichiji=tk.Frame(root)
page_nenji=tk.Frame(root)

#月次
page_getsuji_yusho=tk.Frame(root)
page_getsuji_kinsen=tk.Frame(root)
page_getsuji_tanki=tk.Frame(root)
page_getsuji_lending=tk.Frame(root)

pages=[page_main,page_getsuji,page_nichiji,page_nenji,page_getsuji_yusho,
page_getsuji_kinsen,page_getsuji_tanki,page_getsuji_lending]


#ボタン設定----------------------------------------------------------------------------------------------------
Button = partial(tk.Button, height=4, width=28)




#メインページ------------------------------------------------------------------------------------------------------------------------------------
Button(page_main,text="日次",command=page_nichiji.tkraise).pack()
Button(page_main,text="月次",command=page_getsuji.tkraise).pack()
Button(page_main,text="年次",command=page_nenji.tkraise).pack()


#月次ページ--------------------------------------------------------------------------------------------------------------------------------------
Button(page_getsuji,text="有価証券",command=page_getsuji_yusho.tkraise).pack()
Button(page_getsuji,text="金銭信託",command=page_getsuji_kinsen.tkraise).pack()
Button(page_getsuji,text="短期性資産",command=page_getsuji_tanki.tkraise).pack()
Button(page_getsuji,text="貸付",command=page_getsuji_lending.tkraise).pack()
Button(page_getsuji,text="戻る",command=page_main.tkraise)
tk.Button(page_getsuji, text="戻る").place(x=10, y=10)


#有価証券
Button(page_getsuji_yusho,text="ワークブック作成",
       command=partial(runtask,r"C:\Users\sirar\Documents\My python\EXCEL\1.workbook\workbook_create.py")).pack()




for frame in pages:
    frame.grid(row=0,column=0,sticky=tk.NSEW)


page_main.tkraise()

root.mainloop()

Comments

[sirara]

ご回答ありがとうございます。
同じ方法でやったのですが、うまくいきません。

投稿文の追記に現状の画像とコードを載せましたので、見ていただけませんでしょうか？　よろしくおねがいします。

[teamikl]

これはすいません、私のサンプルコードでは
他のレイアウトとの組み合わせとを想定していませんでした。

問題原因、Frame は grid により配置されますが、
grid 内の伸縮が機能していませんでした。

以前のコメントについて補足と訂正

＞レイアウトで自動でウィンドウの大きさに合わせて変更されるように設定してます。
＞（コードの該当箇所 grid の場合は sticky オプション)
＞frame.grid(row=0,column=0,sticky=tk.NSEW)

だけでは、不足していて、
sticky の設定と合わせて以下の設定が必要でした。

----
# 解決方法、以下のコードを追記してください。

row=0, column=0 に配置されたウィジェットの
縦横方向の伸縮を可能にするオプションで、
これによりFrameのpack()でのレイアウトが意図通りになります。

root.grid_rowconfigure(0, weight=1)
root.grid_columnconfigure(0, weight=1)

[sirara]

想定通りの配置にできました。
ありがとうございます。

最後になると思いますが、以下のコードで戻るボタンが機能しません
Button(page_getsuji,text="戻る",command=page_main.tkraise)
だと不足しているのでしょうか？
以下にコードを記載します。
import tkinter as tk
import subprocess as sb
from functools import partial

root=tk.Tk()
root.title("プログラム実行")
root.geometry("600x600")

#関数作成
def runtask(path):
sb.run(["python",path],shell=True)

root.grid_rowconfigure(0, weight=1)
root.grid_columnconfigure(0, weight=1)

#ページ作成----------------------------------------------------------------------------------------------------
#メイン
page_main=tk.Frame(root)
page_getsuji=tk.Frame(root)
page_nichiji=tk.Frame(root)
page_nenji=tk.Frame(root)

#月次
page_getsuji_yusho=tk.Frame(root)
page_getsuji_kinsen=tk.Frame(root)
page_getsuji_tanki=tk.Frame(root)
page_getsuji_lending=tk.Frame(root)

pages=[page_main,page_getsuji,page_nichiji,page_nenji,page_getsuji_yusho,
page_getsuji_kinsen,page_getsuji_tanki,page_getsuji_lending]

#ボタン設定----------------------------------------------------------------------------------------------------
Button = partial(tk.Button, height=4, width=28)

#メインページ------------------------------------------------------------------------------------------------------------------------------------
Button(page_main,text="日次",command=page_nichiji.tkraise).pack()
Button(page_main,text="月次",command=page_getsuji.tkraise).pack()
Button(page_main,text="年次",command=page_nenji.tkraise).pack()

#月次ページ--------------------------------------------------------------------------------------------------------------------------------------
Button(page_getsuji,text="有価証券",command=page_getsuji_yusho.tkraise).pack()
Button(page_getsuji,text="金銭信託",command=page_getsuji_kinsen.tkraise).pack()
Button(page_getsuji,text="短期性資産",command=page_getsuji_tanki.tkraise).pack()
Button(page_getsuji,text="貸付",command=page_getsuji_lending.tkraise).pack()
Button(page_getsuji,text="戻る",command=page_main.tkraise)
tk.Button(page_getsuji, text="戻る").place(x=10, y=10)

#有価証券
Button(page_getsuji_yusho,text="ワークブック作成",
command=partial(runtask,r"C:\Users\sirar\Documents\My python\EXCEL\1.workbook\workbook_create.py")).pack()

for frame in pages:
frame.grid(row=0,column=0,sticky=tk.NSEW)

page_main.tkraise()

root.mainloop()

[teamikl]

Button(page_getsuji,text="戻る",command=page_main.tkraise)
tk.Button(page_getsuji, text="戻る").place(x=10, y=10)

ここですね、上のボタンは command を設定してますが、
レイアウト関数が呼ばれてない為非表示になってます。
下のボタンは、command が設定されてません。

解決策: 上のボタンは不要で、下のボタンに command を設定します

tk.Button(page_getsuji, text="戻る", command=page_main.tkraise).place(x=10, y=10)

Answer 2

pack で中央寄せ + place で戻るボタンを固定座標に配置

import tkinter as tk
from functools import partial
Button = partial(tk.Button, height=4, width=28)

root = tk.Tk()
root.geometry("600x300")
Button(root, text="A").pack()
Button(root, text="B").pack()
Button(root, text="C").pack()
tk.Button(root, text="戻る").place(x=10, y=10)
root.mainloop()

余白などが必用な場合、必要に応じてオプションを指定してください。

• pack のオプション

---

上記のサンプルコードについて注意点
コードを簡略化する為1行で書きますが、通常は別けて下さい。

# NG: 変数button には pack() の戻り値 None が入る為
# 後から button の参照が出来ません。
button = tk.Button(root, text="NO").pack()

# OK
button = tk.Button(root, text="OK")
button.pack()

# OK 戻り値は利用しない
tk.Button(root, text="OK").pack()

Answer 3

1. ボタンを押したときのイベントを登録する

command引数にクリック時に呼び出す関数を登録します。
2. ページの状態遷移を実装する
幾つか方法がありますが、
Frame を使ってページを纏めると良いです。

2.1 Frame を用意します (各ButtonはFrame上に配置する)
2.2 .pack() ではなく .grid() で「同じセル上に」配置
2.3 .tkraise() により、Frame を一番上のレイヤに表示

---

import tkinter as tk
from functools import partial

root = tk.Tk()
page1 = tk.Frame(root)
page2 = tk.Frame(root)

def runTask(path):
    print("プログラムを実行", path)

# NOTE: このサンプルコードではウィジェットの種類別ですが、
# 規模が大きくなる場合、ページ別に別けた方が良いです。
buttonA = tk.Button(page1, text="Next", command=page2.tkraise)
buttonB = tk.Button(page2, text="Back", command=page1.tkraise)
buttonC = tk.Button(page2, text="Run", command=partial(runTask, r"PATH"))
buttonA.pack()
buttonB.pack()
buttonC.pack()

# 全てのページを同じ位置(row=0, column=0)に配置する
for frame in [page1, page2]:
    frame.grid(row=0, column=0, sticky=tk.NSEW)

# 最初に表示するページ
page1.tkraise()

root.mainloop()

Comments

[sirara]

お忙しい中、ご回答ありがとうございます。
書いていただいたコードを参考に以下のコードを書きましたが、白紙のページが表示されてしまいます。
ボタンが設置されたページが表示されないのはなぜでしょうか？

import tkinter as tk

root=tk.Tk()
page_main=tk.Frame(root)
page_getsuji=tk.Frame(root)
page_nichiji=tk.Frame(root)
page_nenji=tk.Frame(root)

#メインページ
button_nichiji=tk.Button(page_main,text="日次",command=page_nichiji.tkraise)
button_getsuji=tk.Button(page_main,text="月次",command=page_getsuji.tkraise)
button_nenji=tk.Button(page_main,text="年次",command=page_nenji.tkraise)

button_nichiji.pack()
button_getsuji.pack()
button_nenji.pack()

for frame in [page_nichiji,page_getsuji,page_nenji]:
frame.grid(row=0,column=0,sticky=tk.NSEW)

page_main.tkraise()

root.mainloop()

また、よろしければ以下の二点の質問にも答えていただけると助かります。
①　2.2のgridでの配置はどのような意味があるのでしょうか？
②　root.tkで画面を作成できるとおもいますが、あえてframeを使う理由はなんでしょうか？

どうぞよろしくお願いいたします。

[teamikl]

＞白紙のページが表示されてしまいます。
ボタンが設置されたページが表示されないのはなぜでしょうか？

page_main の .grid() が呼ばれてないので、非表示のままです。
.tkraise() は表示順を変更するのみで、表示まではしてくれません。

>2.2のgridでの配置はどのような意味があるのでしょうか？

ページの状態遷移を実装する手段として、
同じ位置に配置することで、複数のページを重ね合わせた状態にします。
.tkraise() メソッドで一番上に呼び起こします。

> root.tkで画面を作成できるとおもいますが、あえてframeを使う理由はなんでしょうか？

まず、root.tk は _tkinter.app オブジェクトで、
恐らく質問したいものではないと思います。
通常は直接使うことはありません。

root=tk.Tk() の事だと思いますが、
これはウィンドウの生成のみではなく、
GUIライブラリ元になるTkとのやりとりを初期化したりする為、
一つのプログラム内で複数回 tk.Tk() を呼び出すのはお勧めしません。

エラーが出たりすることはありませんが、
tkinterライブラリが想定してない使い方になる為、
不具合の原因になる事が多いです。

ページをまとめる手段としてFrameを用いてます。
もし、ページを新たなウィンドウとして開きたい場合は、
Toplevel を使ってのダイアログの作成方法を調べて下さい。

[sirara]

ご親切にありがとうございます。
ご回答を参考にコードを組んでみたら、想像していたものとかなり近いところまできました。
しかし、あと一歩のところでつまづいてしまいました。

runtaskの部分で別のpyファイル（指定のディレクトリにエクセルワークブックを作成するプログラム）を実行させたいのですが、なぜか、設置したボタンを押したときではなく、プログラムを実行したときに、runtask関数が作動してしまい、ワークブックが作成されてしまいます。
なぜでしょうか？

import tkinter as tk
import subprocess as sb

root=tk.Tk()
root.title("プログラム実行")
root.geometry("600x600")

#関数作成
def runtask(path):
sb.run(["python",path],shell=True)

#ページ作成（メイン）
page_main=tk.Frame(root)
page_getsuji=tk.Frame(root)
page_nichiji=tk.Frame(root)
page_nenji=tk.Frame(root)

#ページ作成(月次)
page_getsuji_yusho=tk.Frame(root)
page_getsuji_kinsen=tk.Frame(root)

pages=[page_main,page_getsuji,page_nichiji,page_nenji,page_getsuji_yusho,page_getsuji_kinsen]

#メインページ------------------------------------------------------------------------------------------------------------------------------------
button_nichiji=tk.Button(page_main,text="日次",height=5,width=50,command=page_nichiji.tkraise)
button_getsuji=tk.Button(page_main,text="月次",height=5,width=50,command=page_getsuji.tkraise)
button_nenji=tk.Button(page_main,text="年次",height=5,width=50,command=page_nenji.tkraise)

button_nichiji.pack()
button_getsuji.pack()
button_nenji.pack()

#月次ページ--------------------------------------------------------------------------------------------------------------------------------------
button_yusho=tk.Button(page_getsuji,text="有価証券",height=5,width=50,command=page_getsuji_yusho.tkraise)
button_kinsen=tk.Button(page_getsuji,text="金銭信託",height=5,width=50,command=page_getsuji_kinsen.tkraise)

button_yusho.pack()
button_kinsen.pack()

#有価証券
button_create_wb=tk.Button(page_getsuji_yusho,text="ワークブック作成",height=5,width=50,command=runtask(r"C:\Users\sirar\Documents\My python\EXCEL\1.workbook\workbook_create.py"))

button_create_wb.pack()

for frame in pages:
frame.grid(row=0,column=0,sticky=tk.NSEW)

page_main.tkraise()

root.mainloop()

[teamikl]

ワークブック作成のボタンを作成するところで
command=runtask(...) <- ここでruntask()が呼ばれてます

×: command=func() 括弧があるとこの時点で関数が呼ばれる
〇: command=func　　関数を指定する

ここには関数を指定して、ボタンクリック時に関数を呼び出すように指定するのですが、
今回の場合は path 引数を渡しているので、引数を束縛した関数を作ります。
これには標準ライブラリの functools.partial を使います。

# モジュールは事前にimport
from functools import partial

# ワークブック作成のボタンの command 部分
command=partial(runtask, r"c:.........")

[teamikl]

回答に runtask に path を渡す方法を追記しました。
(functools.partial の import と partial(runtask, ...) の２か所)

----
後、tkinter で subprocess を使う際の注意点なのですが、
subprocess別プロセスを立ち上げますが、バックグランドで動作等ではなく
呼び出し側ではプログラムの終了を待つことになります。

その間 Tkinter には処理が戻らなくなるので、
描画やマウス・キーボード等の入力が動かなくなり、応答となしとなってしまいます。

subprocess の実行がすぐ終わる場合は、少し遅延が気になる程度ですが、
時間が掛かる場合は、別スレッド内で subprocess を呼び出す等の対策を取ってください。

[sirara]

ご回答ありがとうございます。
機能としては、想定通りのものができあがりました。
何度も聞いてしまい申し訳ございませんが、デザインの面で質問させてください。
現在以下のコードで配置したボタンが左上詰めで表示されます。
メインページでplace関数などを使ってみたのですが、うまくいきません。
ご回答をお願いいたします。
このボタンを中央上詰めで表示させたいのですが、どのようにすればよいのでしょうか。

import tkinter as tk
import subprocess as sb
from functools import partial

root=tk.Tk()
root.title("プログラム実行")
root.geometry("600x600")

#関数作成
def runtask(path):
sb.run(["python",path],shell=True)

#ページ作成（メイン）
page_main=tk.Frame(root)
page_getsuji=tk.Frame(root)
page_nichiji=tk.Frame(root)
page_nenji=tk.Frame(root)

#ページ作成(月次)
page_getsuji_yusho=tk.Frame(root)
page_getsuji_kinsen=tk.Frame(root)

pages=[page_main,page_getsuji,page_nichiji,page_nenji,page_getsuji_yusho,page_getsuji_kinsen]

#メインページ------------------------------------------------------------------------------------------------------------------------------------
button_nichiji=tk.Button(page_main,text="日次",height=5,width=40,command=page_nichiji.tkraise)
button_getsuji=tk.Button(page_main,text="月次",height=5,width=40,command=page_getsuji.tkraise)
button_nenji=tk.Button(page_main,text="年次",height=5,width=40,command=page_nenji.tkraise)

button_mainpage=[button_nichiji,button_getsuji,button_nenji]

for button in button_mainpage:
button.place(x=10,y=10)

button_nichiji.pack()
button_getsuji.pack()
button_nenji.pack()

#月次ページ--------------------------------------------------------------------------------------------------------------------------------------
button_yusho=tk.Button(page_getsuji,text="有価証券",height=5,width=40,command=page_getsuji_yusho.tkraise)
button_kinsen=tk.Button(page_getsuji,text="金銭信託",height=5,width=40,command=page_getsuji_kinsen.tkraise)

button_yusho.pack()
button_kinsen.pack()

#有価証券
button_create_wb=tk.Button(page_getsuji_yusho,text="ワークブック作成",height=5,width=40,command=partial(runtask,r"C:\Users\sirar\Documents\My python\EXCEL\1.workbook\workbook_create.py"))

button_create_wb.pack()

for frame in pages:
frame.grid(row=0,column=0,sticky=tk.NSEW)

page_main.tkraise()

root.mainloop()

[teamikl]

>中央上詰めで表示

一番上に３つ横並びさせる感じですか？

（※コメント内での投稿の為、インデントを全角スペースにしてます、
実際のコードでは半角スペースx4 に置き換えてください）

問題点

for button in button_mainpage:
　button.place(x=10,y=10)

では、ボタンが同じ座標(x=10, y=10)に表示されます。

# pack で横に詰める方法
for button in button_mainpage:
　button.pack(side=tk.LEFT)

# grid で column=0, column=1, column=2 と指定する方法
for column, button in enumerate(button_mainpage):
　button.grid(column=column, row=0)

ボタンのサイズが固定(width)の為、ウィンドウから見切れるかもしれません。
ボタンの幅の合計をウィンドウ幅に合わせたい場合は、
width 指定を辞めて pack/grid に任せる方が楽で
pack や grid にはウィジェットを伸縮させるオプションが有ります。

- pack(..., fill=tk.BOTH)
- grid(..., sticky=tk.EW) # east-west で左右に伸ばすという意味

[sirara]

ご回答ありがとうございます。
packで調整してもなぜかうまくいきません。

例えば
pack(side="right")
だとすると指定したボタンが画面の右寄せで表示されると思うのですが、中央やや左に配置されます。

私の推測なのですが、geometryで指定したrootの大きさと作成したフレームの大きさが違うからでしょうか？
だとすれば、geometryで指定したように600×600にフレームをするにはどのようにすればよいでしょうか？

[teamikl]

上記のひとつ前の私のコメントの下の方で説明してる状況ではありませんか？
「ボタンのサイズが固定されてる為」

フレームに関しては、
レイアウトで自動でウィンドウの大きさに合わせて変更されるように設定してます。
（コードの該当箇所 grid の場合は sticky オプション)
frame.grid(row=0,column=0,sticky=tk.NSEW)

＞pack(side="right")だとすると指定したボタンが画面の右寄せで表示される

若干違います。「右寄せ」ではなく「右に配置(右詰め)」です。
右寄せ(ウィンドウの右端に付く) は別にあって、anchord=tk.E とします。
※ pack/grid の場合でオプションの指定方法は異なります。

----
>> このボタンを中央上詰めで表示させたい
> 一番上に３つ横並びさせる感じですか？

の部分を説明して頂けますか。

横に並べるのでなければ、pack() のみで良いかもしれません。
何も指定しなければ上詰めです。

前のコードでは、place() で全てのボタンを同じ位置に表示されていました。

[sirara]

ご回答ありがとうございます。
説明不足で申し訳ないです。
3つ縦並びで中央に配置させ、左上に戻るボタンを配置しようと考えています。

右寄せと右詰めで意味が違うのですね。
知らなかったです。

[teamikl]

コードと画像を含む為、別回答に投稿しました。

縦並びだったのですね、それなら普通にpack() で済みます。
但し、左にボタンを置くと中央寄せのレイアウトが微妙にずれる為、
ウィジェットの配置の枠組みにFrameを使ったりと工夫が必要になってきます。
簡単な方法は、戻るボタンだけ place で配置する方法です。