GUI

[Python Tkinter] フレームを切り替えて画面遷移する方法

2025-01-18更新日: 2025-01-18

PythonのTkinterでフレームを切り替えて画面遷移するには、複数のフレームを作成し、それらを表示・非表示にする方法が一般的です。

まず、tk.Frameを使って各画面をフレームとして定義し、tkraise()メソッドを用いて表示したいフレームを前面に持ってきます。

フレームの切り替えは、ボタンなどのウィジェットにイベントをバインドして行います。

これにより、ユーザーがボタンを押すと異なるフレームが表示され、画面遷移が実現します。

目次から探す

画面遷移の実装手順
画面遷移の具体例
画面遷移を応用したアプリケーション
画面遷移時の注意点
まとめ

画面遷移の実装手順

画面遷移の全体的な流れ

Tkinterを使用して画面遷移を実装する際の基本的な流れは以下の通りです。

ステップ	説明
1	Tkinterのインスタンスを作成する
2	フレームを作成し、必要なウィジェットを配置する
3	ボタンやイベントを設定してフレームを切り替える
4	アプリケーションを実行する

この流れに従って、画面遷移を実装していきます。

複数のフレームを作成する

複数のフレームを作成するには、tk.Frameを使用します。

以下のサンプルコードでは、2つのフレームを作成しています。

import tkinter as tk
class App:
    def __init__(self, root):
        self.root = root
        self.frame1 = tk.Frame(root)
        self.frame2 = tk.Frame(root)
        
        # フレーム1のウィジェット
        label1 = tk.Label(self.frame1, text="これはフレーム1です")
        label1.pack()
        
        # フレーム2のウィジェット
        label2 = tk.Label(self.frame2, text="これはフレーム2です")
        label2.pack()
        self.frame1.pack()  # 最初にフレーム1を表示
app = App(tk.Tk())
app.root.mainloop()

これはフレーム1です

ボタンでフレームを切り替える

フレームを切り替えるためにボタンを追加します。

以下のコードでは、ボタンをクリックすることでフレームを切り替えます。

import tkinter as tk
class App:
    def __init__(self, root):
        self.root = root
        self.frame1 = tk.Frame(root)
        self.frame2 = tk.Frame(root)
        
        # フレーム1のウィジェット
        label1 = tk.Label(self.frame1, text="これはフレーム1です")
        label1.pack()
        button_to_frame2 = tk.Button(self.frame1, text="フレーム2へ", command=self.show_frame2)
        button_to_frame2.pack()
        # フレーム2のウィジェット
        label2 = tk.Label(self.frame2, text="これはフレーム2です")
        label2.pack()
        button_to_frame1 = tk.Button(self.frame2, text="フレーム1へ", command=self.show_frame1)
        button_to_frame1.pack()
        self.frame1.pack()  # 最初にフレーム1を表示
    def show_frame1(self):
        self.frame2.pack_forget()  # フレーム2を隠す
        self.frame1.pack()         # フレーム1を表示
    def show_frame2(self):
        self.frame1.pack_forget()  # フレーム1を隠す
        self.frame2.pack()         # フレーム2を表示
app = App(tk.Tk())
app.root.mainloop()

tkraise()を使ったフレームの切り替え

tkraise()メソッドを使用すると、フレームの重なりを管理し、特定のフレームを前面に表示できます。

以下のコードでは、tkraise()を使ってフレームを切り替えています。

import tkinter as tk
class App:
    def __init__(self, root):
        self.root = root
        self.frame1 = tk.Frame(root)
        self.frame2 = tk.Frame(root)
        
        # フレーム1のウィジェット
        label1 = tk.Label(self.frame1, text="これはフレーム1です")
        label1.pack()
        button_to_frame2 = tk.Button(self.frame1, text="フレーム2へ", command=self.show_frame2)
        button_to_frame2.pack()
        # フレーム2のウィジェット
        label2 = tk.Label(self.frame2, text="これはフレーム2です")
        label2.pack()
        button_to_frame1 = tk.Button(self.frame2, text="フレーム1へ", command=self.show_frame1)
        button_to_frame1.pack()
        self.frame1.pack()  # 最初にフレーム1を表示
    def show_frame1(self):
        self.frame2.tkraise()  # フレーム2を前面に
        self.frame1.tkraise()  # フレーム1を前面に
    def show_frame2(self):
        self.frame1.tkraise()  # フレーム1を前面に
        self.frame2.tkraise()  # フレーム2を前面に
app = App(tk.Tk())
app.root.mainloop()

フレーム間でデータを共有する方法

フレーム間でデータを共有するには、クラスの属性を使用します。

以下の例では、フレーム1で入力したテキストをフレーム2で表示します。

import tkinter as tk
class App:
    def __init__(self, root):
        self.root = root
        self.frame1 = tk.Frame(root)
        self.frame2 = tk.Frame(root)
        
        # フレーム1のウィジェット
        self.entry = tk.Entry(self.frame1)
        self.entry.pack()
        button_to_frame2 = tk.Button(self.frame1, text="フレーム2へ", command=self.show_frame2)
        button_to_frame2.pack()
        # フレーム2のウィジェット
        self.label2 = tk.Label(self.frame2, text="")
        self.label2.pack()
        button_to_frame1 = tk.Button(self.frame2, text="フレーム1へ", command=self.show_frame1)
        button_to_frame1.pack()
        self.frame1.pack()  # 最初にフレーム1を表示
    def show_frame1(self):
        self.frame2.pack_forget()  # フレーム2を隠す
        self.frame1.pack()         # フレーム1を表示
    def show_frame2(self):
        self.label2.config(text=self.entry.get())  # 入力したテキストをラベルに設定
        self.frame1.pack_forget()  # フレーム1を隠す
        self.frame2.pack()         # フレーム2を表示
app = App(tk.Tk())
app.root.mainloop()

画面遷移の具体例

2つの画面を切り替える簡単な例

2つの画面を切り替える基本的な例を示します。

この例では、フレーム1とフレーム2を作成し、ボタンを使って切り替えます。

import tkinter as tk
class SimpleApp:
    def __init__(self, root):
        self.root = root
        self.frame1 = tk.Frame(root)
        self.frame2 = tk.Frame(root)
        
        # フレーム1のウィジェット
        label1 = tk.Label(self.frame1, text="フレーム1です")
        label1.pack()
        button_to_frame2 = tk.Button(self.frame1, text="フレーム2へ", command=self.show_frame2)
        button_to_frame2.pack()
        # フレーム2のウィジェット
        label2 = tk.Label(self.frame2, text="フレーム2です")
        label2.pack()
        button_to_frame1 = tk.Button(self.frame2, text="フレーム1へ", command=self.show_frame1)
        button_to_frame1.pack()
        self.frame1.pack()  # 最初にフレーム1を表示
    def show_frame1(self):
        self.frame2.pack_forget()  # フレーム2を隠す
        self.frame1.pack()         # フレーム1を表示
    def show_frame2(self):
        self.frame1.pack_forget()  # フレーム1を隠す
        self.frame2.pack()         # フレーム2を表示
app = SimpleApp(tk.Tk())
app.root.mainloop()

3つ以上の画面を切り替える例

3つ以上の画面を切り替える場合も、基本的な考え方は同じです。

以下の例では、フレーム1、フレーム2、フレーム3を作成しています。

import tkinter as tk
class MultiFrameApp:
    def __init__(self, root):
        self.root = root
        self.frame1 = tk.Frame(root)
        self.frame2 = tk.Frame(root)
        self.frame3 = tk.Frame(root)
        
        # フレーム1のウィジェット
        label1 = tk.Label(self.frame1, text="フレーム1です")
        label1.pack()
        button_to_frame2 = tk.Button(self.frame1, text="フレーム2へ", command=self.show_frame2)
        button_to_frame2.pack()
        button_to_frame3 = tk.Button(self.frame1, text="フレーム3へ", command=self.show_frame3)
        button_to_frame3.pack()
        # フレーム2のウィジェット
        label2 = tk.Label(self.frame2, text="フレーム2です")
        label2.pack()
        button_to_frame1 = tk.Button(self.frame2, text="フレーム1へ", command=self.show_frame1)
        button_to_frame1.pack()
        button_to_frame3 = tk.Button(self.frame2, text="フレーム3へ", command=self.show_frame3)
        button_to_frame3.pack()
        # フレーム3のウィジェット
        label3 = tk.Label(self.frame3, text="フレーム3です")
        label3.pack()
        button_to_frame1 = tk.Button(self.frame3, text="フレーム1へ", command=self.show_frame1)
        button_to_frame1.pack()
        button_to_frame2 = tk.Button(self.frame3, text="フレーム2へ", command=self.show_frame2)
        button_to_frame2.pack()
        self.frame1.pack()  # 最初にフレーム1を表示
    def show_frame1(self):
        self.frame2.pack_forget()  # フレーム2を隠す
        self.frame3.pack_forget()  # フレーム3を隠す
        self.frame1.pack()         # フレーム1を表示
    def show_frame2(self):
        self.frame1.pack_forget()  # フレーム1を隠す
        self.frame3.pack_forget()  # フレーム3を隠す
        self.frame2.pack()         # フレーム2を表示
    def show_frame3(self):
        self.frame1.pack_forget()  # フレーム1を隠す
        self.frame2.pack_forget()  # フレーム2を隠す
        self.frame3.pack()         # フレーム3を表示
app = MultiFrameApp(tk.Tk())
app.root.mainloop()

戻るボタンを使った画面遷移

戻るボタンを使って、前の画面に戻る機能を実装することも可能です。

以下の例では、各フレームに戻るボタンを追加しています。

import tkinter as tk
class BackButtonApp:
    def __init__(self, root):
        self.root = root
        self.frame1 = tk.Frame(root)
        self.frame2 = tk.Frame(root)
        
        # フレーム1のウィジェット
        label1 = tk.Label(self.frame1, text="フレーム1です")
        label1.pack()
        button_to_frame2 = tk.Button(self.frame1, text="フレーム2へ", command=self.show_frame2)
        button_to_frame2.pack()
        # フレーム2のウィジェット
        label2 = tk.Label(self.frame2, text="フレーム2です")
        label2.pack()
        button_to_frame1 = tk.Button(self.frame2, text="戻る", command=self.show_frame1)
        button_to_frame1.pack()
        self.frame1.pack()  # 最初にフレーム1を表示
    def show_frame1(self):
        self.frame2.pack_forget()  # フレーム2を隠す
        self.frame1.pack()         # フレーム1を表示
    def show_frame2(self):
        self.frame1.pack_forget()  # フレーム1を隠す
        self.frame2.pack()         # フレーム2を表示
app = BackButtonApp(tk.Tk())
app.root.mainloop()

入力フォームを含む画面遷移の例

入力フォームを含む画面遷移の例では、ユーザーが入力したデータを次の画面で表示します。

以下のコードでは、フレーム1に入力フォームを作成し、フレーム2でその内容を表示します。

import tkinter as tk
class InputFormApp:
    def __init__(self, root):
        self.root = root
        self.frame1 = tk.Frame(root)
        self.frame2 = tk.Frame(root)
        
        # フレーム1のウィジェット
        self.entry = tk.Entry(self.frame1)
        self.entry.pack()
        button_to_frame2 = tk.Button(self.frame1, text="フレーム2へ", command=self.show_frame2)
        button_to_frame2.pack()
        # フレーム2のウィジェット
        self.label2 = tk.Label(self.frame2, text="")
        self.label2.pack()
        button_to_frame1 = tk.Button(self.frame2, text="フレーム1へ", command=self.show_frame1)
        button_to_frame1.pack()
        self.frame1.pack()  # 最初にフレーム1を表示
    def show_frame1(self):
        self.frame2.pack_forget()  # フレーム2を隠す
        self.frame1.pack()         # フレーム1を表示
    def show_frame2(self):
        input_text = self.entry.get()  # 入力したテキストを取得
        self.label2.config(text=input_text)  # ラベルに設定
        self.frame1.pack_forget()  # フレーム1を隠す
        self.frame2.pack()         # フレーム2を表示
app = InputFormApp(tk.Tk())
app.root.mainloop()

画面遷移を応用したアプリケーション

ログイン画面とメイン画面の切り替え

ログイン画面とメイン画面を切り替えるアプリケーションの例です。

ユーザーが正しい情報を入力すると、メイン画面に遷移します。

import tkinter as tk
from tkinter import messagebox
class LoginApp:
    def __init__(self, root):
        self.root = root
        self.login_frame = tk.Frame(root)
        self.main_frame = tk.Frame(root)
        
        # ログイン画面のウィジェット
        tk.Label(self.login_frame, text="ユーザー名:").pack()
        self.username_entry = tk.Entry(self.login_frame)
        self.username_entry.pack()
        tk.Label(self.login_frame, text="パスワード:").pack()
        self.password_entry = tk.Entry(self.login_frame, show="*")
        self.password_entry.pack()
        login_button = tk.Button(self.login_frame, text="ログイン", command=self.login)
        login_button.pack()
        # メイン画面のウィジェット
        tk.Label(self.main_frame, text="メイン画面へようこそ！").pack()
        logout_button = tk.Button(self.main_frame, text="ログアウト", command=self.logout)
        logout_button.pack()
        self.login_frame.pack()  # 最初にログイン画面を表示
    def login(self):
        username = self.username_entry.get()
        password = self.password_entry.get()
        if username == "user" and password == "pass":  # 簡単な認証
            self.login_frame.pack_forget()  # ログイン画面を隠す
            self.main_frame.pack()          # メイン画面を表示
        else:
            messagebox.showerror("エラー", "ユーザー名またはパスワードが間違っています。")
    def logout(self):
        self.main_frame.pack_forget()  # メイン画面を隠す
        self.login_frame.pack()         # ログイン画面を表示
app = LoginApp(tk.Tk())
app.root.mainloop()

ウィザード形式の画面遷移

ウィザード形式の画面遷移では、複数のステップを経て最終的な結果を得ることができます。

以下の例では、3つのステップを持つウィザードを実装しています。

import tkinter as tk
class WizardApp:
    def __init__(self, root):
        self.root = root
        self.step1_frame = tk.Frame(root)
        self.step2_frame = tk.Frame(root)
        self.step3_frame = tk.Frame(root)
        
        # ステップ1のウィジェット
        tk.Label(self.step1_frame, text="ステップ1: 名前を入力してください").pack()
        self.name_entry = tk.Entry(self.step1_frame)
        self.name_entry.pack()
        next_button1 = tk.Button(self.step1_frame, text="次へ", command=self.show_step2)
        next_button1.pack()
        # ステップ2のウィジェット
        tk.Label(self.step2_frame, text="ステップ2: 年齢を入力してください").pack()
        self.age_entry = tk.Entry(self.step2_frame)
        self.age_entry.pack()
        next_button2 = tk.Button(self.step2_frame, text="次へ", command=self.show_step3)
        next_button2.pack()
        back_button2 = tk.Button(self.step2_frame, text="戻る", command=self.show_step1)
        back_button2.pack()
        # ステップ3のウィジェット
        tk.Label(self.step3_frame, text="ステップ3: 確認").pack()
        self.summary_label = tk.Label(self.step3_frame, text="")
        self.summary_label.pack()
        finish_button = tk.Button(self.step3_frame, text="完了", command=self.finish)
        finish_button.pack()
        back_button3 = tk.Button(self.step3_frame, text="戻る", command=self.show_step2)
        back_button3.pack()
        self.step1_frame.pack()  # 最初にステップ1を表示
    def show_step1(self):
        self.step2_frame.pack_forget()
        self.step3_frame.pack_forget()
        self.step1_frame.pack()
    def show_step2(self):
        self.step1_frame.pack_forget()
        self.step3_frame.pack_forget()
        self.step2_frame.pack()
    def show_step3(self):
        name = self.name_entry.get()
        age = self.age_entry.get()
        self.summary_label.config(text=f"名前: {name}, 年齢: {age}")
        self.step1_frame.pack_forget()
        self.step2_frame.pack_forget()
        self.step3_frame.pack()
    def finish(self):
        print("ウィザードが完了しました。")
        self.root.quit()
app = WizardApp(tk.Tk())
app.root.mainloop()

(ウィザード形式でステップを進め、最終的に確認画面が表示される)

タブのようにフレームを切り替える方法

タブのようにフレームを切り替える方法では、複数のタブを持つインターフェースを作成します。

以下の例では、2つのタブを持つアプリケーションを実装しています。

import tkinter as tk
class TabbedApp:
    def __init__(self, root):
        self.root = root
        self.tab1 = tk.Frame(root)
        self.tab2 = tk.Frame(root)
        
        # タブ1のウィジェット
        tk.Label(self.tab1, text="タブ1の内容").pack()
        button_to_tab2 = tk.Button(self.tab1, text="タブ2へ", command=self.show_tab2)
        button_to_tab2.pack()
        # タブ2のウィジェット
        tk.Label(self.tab2, text="タブ2の内容").pack()
        button_to_tab1 = tk.Button(self.tab2, text="タブ1へ", command=self.show_tab1)
        button_to_tab1.pack()
        self.tab1.pack()  # 最初にタブ1を表示
    def show_tab1(self):
        self.tab2.pack_forget()  # タブ2を隠す
        self.tab1.pack()         # タブ1を表示
    def show_tab2(self):
        self.tab1.pack_forget()  # タブ1を隠す
        self.tab2.pack()         # タブ2を表示
app = TabbedApp(tk.Tk())
app.root.mainloop()

タブ1の内容
タブ2へ

ゲームのメニュー画面の実装

ゲームのメニュー画面を実装する例です。

スタートボタンやオプションボタンを持つメニュー画面を作成します。

import tkinter as tk
class GameMenuApp:
    def __init__(self, root):
        self.root = root
        self.menu_frame = tk.Frame(root)
        self.game_frame = tk.Frame(root)
        
        # メニュー画面のウィジェット
        tk.Label(self.menu_frame, text="ゲームメニュー").pack()
        start_button = tk.Button(self.menu_frame, text="スタート", command=self.start_game)
        start_button.pack()
        options_button = tk.Button(self.menu_frame, text="オプション", command=self.show_options)
        options_button.pack()
        # ゲーム画面のウィジェット
        tk.Label(self.game_frame, text="ゲームが開始されました！").pack()
        back_button = tk.Button(self.game_frame, text="メニューに戻る", command=self.show_menu)
        back_button.pack()
        self.menu_frame.pack()  # 最初にメニュー画面を表示
    def start_game(self):
        self.menu_frame.pack_forget()  # メニュー画面を隠す
        self.game_frame.pack()          # ゲーム画面を表示
    def show_options(self):
        print("オプション画面は未実装です。")
    def show_menu(self):
        self.game_frame.pack_forget()  # ゲーム画面を隠す
        self.menu_frame.pack()          # メニュー画面を表示
app = GameMenuApp(tk.Tk())
app.root.mainloop()

ゲームメニュー
スタート
オプション
(スタートボタンを押すとゲーム画面に遷移)

画面遷移時の注意点

フレームのメモリ管理

Tkinterでは、フレームを作成する際にメモリを効率的に管理することが重要です。

不要なフレームをメモリに保持し続けると、アプリケーションのパフォーマンスが低下する可能性があります。

以下のポイントに注意してください。

フレームの隠蔽: pack_forget()やgrid_forget()を使用して、不要なフレームを隠すことができます。

これにより、メモリを解放し、アプリケーションの動作を軽快に保つことができます。

フレームの再利用: 同じフレームを再利用することで、新たにフレームを作成する必要がなくなり、メモリの使用を抑えることができます。

フレームの再描画と更新

フレームの内容を変更する際には、再描画や更新が必要です。

以下の方法でフレームを適切に更新できます。

ウィジェットの更新: ウィジェットの内容を変更した後は、update()メソッドを使用して、画面を再描画することができます。
動的な内容の表示: ユーザーの入力やアクションに応じて、フレームの内容を動的に変更する場合は、適切にウィジェットの内容を更新することが重要です。

画面遷移時のパフォーマンス最適化

画面遷移をスムーズに行うためには、パフォーマンスの最適化が必要です。

以下のポイントに注意してください。

不要な処理の削減: 画面遷移時に行う処理は最小限に抑え、必要な処理だけを実行するようにします。
非同期処理の活用: 重い処理がある場合は、非同期処理を使用して、ユーザーインターフェースがフリーズしないようにします。

threadingモジュールを活用することができます。

フレームのサイズ調整とレイアウト

フレームのサイズやレイアウトは、ユーザーエクスペリエンスに大きな影響を与えます。

以下の点に注意して、フレームのサイズ調整とレイアウトを行いましょう。

ウィジェットのサイズ設定: 各ウィジェットのサイズを適切に設定し、フレーム全体のバランスを考慮します。

widthやheightオプションを使用して、ウィジェットのサイズを指定できます。

レイアウトマネージャの活用: pack(), grid(), place()などのレイアウトマネージャを適切に使用して、ウィジェットの配置を調整します。

特に、grid()を使用すると、より柔軟なレイアウトが可能です。

レスポンシブデザイン: ウィンドウサイズの変更に応じて、フレームやウィジェットのサイズを自動的に調整するように設定することで、さまざまな画面サイズに対応できます。

stickyオプションを使用して、ウィジェットをフレームの端に固定することができます。

まとめ

この記事では、PythonのTkinterを使用した画面遷移の実装方法について詳しく解説しました。

具体的には、フレームの切り替えやデータの保持、アニメーションの追加、パフォーマンスの最適化など、実用的なテクニックを紹介しました。

これらの知識を活用して、よりインタラクティブで使いやすいアプリケーションを作成することができるでしょう。

ぜひ、実際にコードを試してみて、Tkinterの機能を活かしたアプリケーション開発に挑戦してみてください。