コラム

CTC教育サービス・ホーム　＞　コラム　＞　ゼロから歩くPythonの道　＞　第20回　tkinterで画面を作ろう～画面サイズとウィジェットの配置（place,pack,grid）～

ゼロから歩くPythonの道

CTC 教育サービス

[IT研修]注目キーワード Python UiPath(RPA) 最新技術動向 Microsoft Azure Docker Kubernetes

第20回　tkinterで画面を作ろう～画面サイズとウィジェットの配置（place,pack,grid）～ (菱沼佑香) 2021年5月

こんにちは、吉政創成　菱沼です。

今回も「いちばんやさしいPython入門教室（大澤文孝氏著）」を片手に勉強していきます。

前々回でヒット＆ブローのプログラムがようやく完成し、前回から実際にゲームとして遊べるように画面を作成していく章に入りました。

画面の作成にはPythonの標準GUIツールキットであるtkinterを使用します。前回はそのtkinterではどんな設定（ラジオボタンやテキスト入力等）ができるのかというのをまとめてみました。

今回からヒット＆ブローの画面を実際に作るにあたって必要なウィジェットの配置を中心にまとめています。

最終的な完成イメージの確認とベース画面の作り方のおさらい

左側にユーザーが数字を入力する部分を、右側にはユーザーが入力した値と、ヒットとブローの数がいくつであったのか、という履歴を残す部分です。今回は左側の画面を作成します。

fig01

まず前回のおさらいです。画面のベースを作るには下図のように打ち込みます。

fig02

左側が画面のベースを作成し、表示させるためのコードを入力したもので、右側がそれを実行したものです。

今回は左側の作成だけで、使用するウィジェットはテキストの入力（Entry）、ボタン（Button）、ラベル（Lavel）です。

geometryを使った画面サイズの設定

何も設定しないままだと、このまま適当に小さな画面が表示されますが、画面のサイズを指定することができるそうです。

引用-----

P.159

ウィンドウサイズを変更するには、geometryというメソッドを使います。geometryメソッドには「横の幅×高さ」を文字列で設定します。例えば「400×150（ピクセル）」に変更したいのであれば、次のようにします。

>>> root.geometry(“400x150”)

ここで注意が必要なのは、「×」（かける）のマークではなく小文字の「x」（エックス）を使う点です。

------

ということで、root = tk.Tk()の次の行に上で書かれている「root.geometry(“400x150”)」を追記してあげると、しっかり画面が変更されたものが表示されました。

ちなみに、このgeometryですが、ウィンドウを表示させる位置も指定させることもできるそうです。

例えば、

>>> root.geometry(“400x150+0+0”)

と、追記してあげると、起動段階から左端に出てきてくれるようになります。

fig03

ウィンドウサイズと同じくピクセルの指定となります。

これ以外に、最大化の状態にしたいといった指定もできるそうです。参考サイトをご参照ください。

参考サイト：

【Python】tkinter：画面のサイズ・位置・最大化表示の設定（geometryメソッド）｜OFFICE54

ウィンドウにタイトルを付けて、ウィジェットを配置しよう！

ではここから画面の中身を作っていきます。まずタイトルを付け、その後にウィジェットを配置していきます。

＜タイトルのつけ方＞

root = tk.Tkからroot.mainloopの間にtitleメソッドとして、以下のように入れてあげればいいそうです。

>>> root.title(“たいとる”)

＜ラベルとボタンを追加する方法＞

次に「数を入力してね」というラベルと、入力欄、ボタンを追加していきます。

引用------

P.161

ラベルは次のように、Labelメソッドを実行することで作成します。（中略）

>>> label1 = tk.Label(root, text = “数を入力してね”)

括弧のなかに指定している1つ目の値「root」は、ラベルを張り付ける対象となるウィンドウです。そして「text=””」の部分が表示したいメッセージです。

P.163

テキストの入力欄は、tkinterでは「エントリー（Entry）」と呼ばれます。（中略）

>>> editbox1 = tk.Entry(width=4)

括弧に指定している「(width=4)」というのは、このテキストの入力欄の幅です。

P.166

Buttonメソッドを利用し、次のようなプログラムを作ります。括弧のなかの引数「root」はボタンを配置する対象となるウィンドウ「text =””」はボタンに表示する文字、つまりボタン名です。（中略）

>>> button1 = tk.Button(root,text = “”,font=(“Helvetica”,14))

-----

ここまでの記述は特に引っかかることなくできましたが、これはあくまでウィジェットの設定だけなので、配置する場所を指定してあげないと表示できないそうです。

配置を座標で指定するならplaceで

ではここから配置に関してまとめていきます。

引用------

P.161

配置方法はいくつかありますが、比較的わかりやすいのが、次のようにplaceメソッドを実行する方法です。

>>> label1.place(x = 20, y =20)

placeメソッドでは、括弧のなかに「(x=x座標,y=y座標)」という形で、配置する座標を指定します。

-----

いくつかあるようですが、placeという座標を指定する方法を使うようです。座標は縦軸がy、横軸がxです。

次の画像は実際にplaceを使って3つのウィジェットを配置したもので、それぞれ、座標をどのように指定したかをわかるようにしました。

fig04

前回、どんなウィジェットが使えるかを確認したときにもこのplaceを使用しましたが、項目が多くなればなるほど手間でした。（試しに書いて、文字が被っているからやり直しという繰り返したため…。）効率のいいやり方があるのかもしれませんが、簡単に検索しただけでは見つけられませんでした。

ただ、座標で指定できるということは細かく配置場所を指定できるということなので、座標決めさえ問題なければ使いやすいそうだなと思いました。

placeで使用できる引数はxとy以外にはこんなものがあります。

引数	説明	記述例
anchor	ウィジェットの基準位置	中央寄りにする場合：変数名.place(x=値,y=値,anchor=tkinter.CENTER)
width / height	ウィジェットの幅と高さ（ピクセル）	変数名.place(x=値,y=値,width=値,height=値)
relx / rely	ウィジェットの配置座標（親ウィジェットの高さと幅を1とした場合として指定。親ウィジェットのサイズが変更されればそれに応じて場所も変化する）	親ウィジェットの中央を指定：変数名.place(relx=0.5,rely=0.5)
relwidth / relheight	ウィジェットの幅と高さ（親ウィジェットの高さと幅を1とした場合としたときの相対的なサイズ。0.0～1.0の間で指定）	親ウィジェットの幅と高さの半分を指定：変数名.place(relwidth=0.5,relheight=0.5)
bordermode	ウィジェットを配置する際、親ウィジェットの基準座標(0,0)の外か内かを指定する	外枠の内側に配置：変数名.place(bordermode=tkinter.INSIDE) 外枠の外側に配置：変数名.place(bordermode=tkinter.OUTSIDE)
in_	ウィジェットの配置先である親ウィジェットを設定できる	変数名.place(in_=変数名)

他の配置方法　packとgrid

他の配置方法も調べてみたところplaceを含めて3つあるようです。

配置	説明	記述例
place	座標を指定して配置する	変数名.place(x=値,y=値)
pack	引数で指定した方向に一列で配置	変数名.pack()
grid	2次元的に配置する	変数名.grid(column=値,row=値)

実際に試してみたので、実行結果の画像を並べてみました。ひとめで違いが判りますね。

fig05

先ほどplaceはご紹介したのでここからはpackとgridについてまとめていきます。

pack

指定した方向に一列に並ばせることができるのですが、画像では何も指定しなかったので縦方向に項目が配置されています。並ぶ方向は引数sideで指定できます。

方向	記述
上から下（縦）（デフォルト）	変数名.pack(side=tkinter.TOP)
下から上（縦）	変数名.pack(side=tkinter.BOTTOM)
左から右（横）	変数名.pack(side=tkinter.LEFT)
右から左（横）	変数名.pack(side=tkinter.RIGHT)

packで使用できる引数はside以外には次のものがあるようです。

配置	説明	記述例
expand	expandを指定したウィジェットの配置スペースを拡大する。複数可。	変数名.pack(expand=True)
anchor	ウィジェットを寄せる方向を設定 ※方角で例えると覚えやすいそうです例：上＝北（North）のN 　　下＝南（South）のS 　　左下＝南西（SouthWest）のSW	上　：変数名.pack(anchor=tk.N) 下　：変数名.pack(anchor=tk.S) 左上：変数名.pack(anchor=tk.NW) 左下：変数名.pack(anchor=tk.SW) 中央：変数名.pack(anchor=tk.CENTER)
fill	ウィジェットを指定した方向いっぱいに引き伸ばす	無し：変数名.pack(fill=tkinter.NONE) 横　：変数名.pack(fill=tkinter.X) 縦　：変数名.pack(fill=tkinter.Y) 縦横：変数名.pack(fill=tkinter.BOTH)
padx / pady	ウィジェット外側の上下左右の空白サイズを指定 padx：左右、pady：上下	変数名.pack(pady=値,padx=値) ※値はピクセル
ipadx / ipady	ウィジェット内側の上下左右の空白サイズを指定 ipadx：左右、ipady：上下	変数名.pack(ipady=値,ipadx=値) ※値はピクセル
befor / after	ウィジェットを親ウィジェットに詰め込む際の順番を制御する	指定したウィジェットの前に配置：変数名.pack(befor=変数名) 指定したウィジェットの後に配置：変数名.pack(after=変数名)
in_	ウィジェットの配置先である親ウィジェットを設定できる	変数名.pack(in_=変数名)

grid

画面を分割してどこに配置するというイメージのようです。画像は4分割ですが、一行にウィジェットを配置するなら、butn1.grid(column=2,row=0)にしてあげれば多少詰まった感はありましたが、placeのようになりました。

gridで使える引数はcolumnとrow以外には次のものがあります。

配置	説明	記述例
sticky	配置されたエリア内でどの方向にウィジェットを寄せて配置するかを指定 ※方角で例えると覚えやすいそうです例：上＝北（North）のN 　　下＝南（South）のS 　　左下＝南西（SouthWest）のSW	上　：変数名.grid(sticky=tk.N) 下　：変数名.grid(sticky =tk.S) 複数：変数名.grid(sticky =tk.S+tk.N+tk.E+tk.W)
columnspan rowspan	複数のセルに渡ってウィジェットを配置できる（0以外の整数で指定）	columnの範囲に指定した列分またがる：変数名.grid(columnspan=値) rowの範囲に指定した行分またがる：変数名.grid(rowspan=値)
padx / pady ipadx / ipady	packと同じ	変数名.grid(padx=値,pady=値)
in_	ウィジェットの配置先である親ウィジェットを設定できる	変数名.pack(in_=変数名)