TkinterのFrameウィジェットとGridジオメトリマネージャを使ったGUIレイアウト作成ガイド

Tkinterは、PythonでGUIアプリケーションを開発するための最も広く使われている標準ライブラリの一つです。あらかじめ用意された豊富なウィジェットや関数、モジュールを組み合わせることで、本格的な機能を備えたアプリケーションを短時間で構築できます。

しかし、いざアプリケーションの画面設計（GUIレイアウト）を行おうとすると、どのように部品を配置すれば見やすく使いやすい画面になるのか悩む方も多いのではないでしょうか。Tkinterには、見栄えの良いGUIを作るための組み込み関数や拡張機能が数多く用意されており、これらを活用することで効率的にレイアウトを組むことができます。

FrameウィジェットとGridジオメトリマネージャの役割

TkinterにおけるFrame（フレーム）ウィジェットは、アプリケーション内の他のウィジェットをまとめて管理するためのコンテナとして機能します。フレームはメインウィンドウが持つ各種プロパティを継承しており、関連するウィジェットをグループ化して整理するのに非常に便利です。

ウィジェットの配置を決める際には、ジオメトリマネージャと呼ばれる仕組みを使用します。ジオメトリマネージャは、ウィジェットのレイアウトを生成し、指定した順序で画面上に配置する役割を担います。代表的なものとしてpack()、place()、grid()がありますが、その中でもGrid（グリッド）ジオメトリマネージャは、X軸・Y軸の座標系のような表形式でウィジェットを配置できるのが特徴です。row（行）とcolumn（列）のプロパティを指定することで、アプリケーション内の任意の位置にウィジェットを自由に配置できます。

実装例：登録フォームの作成

それでは実際に、FrameウィジェットとGridジオメトリマネージャを組み合わせて、ユーザー登録フォームのGUIを作成してみましょう。以下のコードでは、名前・姓・メールアドレス・パスワードの入力欄と登録ボタンを備えたフォームを実装しています。

# 必要なライブラリをインポート
from tkinter import *

# tkinterのフレーム（ウィンドウ）のインスタンスを作成
win = Tk()

# ウィンドウサイズを設定
win.geometry("700x350")

# Frameウィジェットを追加
frame = Frame(win)

# 入力データを取得してメッセージを表示する関数を定義
def on_key_up():
    name = fname
    frame.pack_forget()
    win.configure(bg="green4")
    Label(win, text="Hey " + fname.get() + " Welcome to TutorialsPoint",
          font=('Segoe UI', 18, 'bold'),
          background="white").pack(pady=30)
# Labelウィジェットを作成
    Label(frame, text="Registration Form",
          font=('Helvetica 16 bold'),
          background="green3").grid(row=5, column=0, pady=30)
frame.pack()

# 名（First Name）の入力フィールドを追加
Label(frame, text="First Name").grid(row=7, column=0, padx=5)
fname = Entry(frame)
fname.grid(row=10, column=0, padx=10)

# 姓（Family name）の入力フィールドを追加
Label(frame, text="Family name").grid(row=12, column=0, padx=5)
sname = Entry(frame)
sname.grid(row=15, column=0, padx=10)

# メールアドレスの入力フィールドを追加
Label(frame, text="Email address").grid(row=17, column=0, padx=5)
email = Entry(frame)
email.grid(row=20, column=0, padx=10)

# パスワード入力フィールドを追加（入力内容は*で隠す）
Label(frame, text="Enter a Password").grid(row=22, column=0, padx=5)
password = Entry(frame, show="*")
password.grid(row=25, column=0, padx=10)

# 登録ボタンを作成
Button(frame, text="Register", command=on_key_up).grid(row=15,
column=1, padx=5)

win.mainloop()

実行結果

上記のコードを実行すると、登録フォームのテンプレートと、入力した情報を登録するためのボタンが表示されます。パスワード欄に入力した文字はshow="*"オプションによってアスタリスクでマスクされ、セキュリティ面にも配慮した作りになっています。また、「Register」ボタンをクリックすると、on_key_up関数が呼び出され、フレームが非表示になった後、ウェルカムメッセージが画面に表示される仕組みです。

このように、Frameウィジェットでウィジェットをグループ化し、Gridジオメトリマネージャで行・列を指定して配置することで、整然としたGUIレイアウトを簡単に構築できます。ぜひ自分のプロジェクトでも応用してみてください。