CustomTkinterでオリジナルのメニューバー(File・表示・設定・Help)を自作する

CUSTOMTKINTER GUIDE VOL.2

CustomTkinterでオリジナルのメニューバー(File・表示・設定・Help)を自作する

こんにちは。ニンジンです🥕

前回、CustomTkinterの基本の使い方を紹介しました。CTkLabel・CTkButton・CTkEntry・CTkFrameという基本部品と、pack/gridのレイアウトが分かると、簡単な入力フォームまではすぐに作れるようになります。

今回は一歩進んで、Windowsアプリでおなじみの「File・表示・設定・Help」のようなメニューバー(ウィンドウ上部の横並びメニュー)を、CustomTkinterで自作します。実は、CustomTkinterには標準でこの見た目のメニューバー部品が用意されていません。この記事では、その理由と、CTkFrame・CTkButtonを組み合わせて自作する方法を、段階ごとのサンプルコードとダウンロード付きで解説します。

こんな人におすすめ

• CustomTkinterでツールを作っていて、File/設定などのメニューを追加したい人
• customtkinterのmenuやmenubarで検索してもうまく情報が見つからなかった人
• 完成品だけでなく、実装の考え方も理解したうえで自分のアプリに組み込みたい人

CustomTkinterにメニューバーが無い理由(tk.Menuとの違い)

Tkinter標準のtk.Menuを使えば、app.config(menu=menu)という書き方でOSネイティブのメニューバーを付けることができます。ただし、このtk.MenuはCustomTkinterが提供する部品ではなく、あくまでTkinterの標準機能です。そのため、見た目がOS標準のまま描画され、CustomTkinterのフラットデザインやダークモード配色にはまったく追従しません。

CustomTkinterのアプリにテーマに馴染むメニューバーを付けたい場合、CTkFrameとCTkButtonを組み合わせて自分で再現する必要があります。この記事で作るのは、まさにその「CustomTkinterのテーマに馴染む自作メニューバー」です。

完成イメージとダウンロード

先に完成形の動きを説明すると、次のような挙動になります。

• ウィンドウ上部に「File / 表示 / 設定 / Help」のボタンが横並びになっている
• ボタンをクリックすると、その下にドロップダウンでメニュー項目が表示される
• メニューの外側をクリックすると自動的に閉じる
• 別のメニューボタンをクリックすると、開いていたメニューは閉じて新しいメニューが開く(同時に2つ開かない)

この記事では、この動きを5段階のサンプルコードに分けて、1つずつ機能を追加しながら組み立てていきます。各段階のsample.pyは以下からまとめてダウンロードできます。

ステップ1: メニューバーの土台を作る(CTkFrame+CTkButton)

まずは、メニューの中身は考えずに「横一列に並んだボタン」というメニューバーの土台だけを作ります。

import customtkinter as ctk

app = ctk.CTk()
app.geometry("500x350")
app.title("CustomTkinterメニューバー入門")

# メニューバー(横一列のバー)
menubar = ctk.CTkFrame(app, height=36, corner_radius=0)
menubar.pack(side="top", fill="x")

file_btn = ctk.CTkButton(menubar, text="File", width=70, fg_color="transparent", text_color="#1e1a16", hover_color="#e8c4a0", corner_radius=0)
file_btn.pack(side="left")

view_btn = ctk.CTkButton(menubar, text="表示", width=70, fg_color="transparent", text_color="#1e1a16", hover_color="#e8c4a0", corner_radius=0)
view_btn.pack(side="left")

settings_btn = ctk.CTkButton(menubar, text="設定", width=70, fg_color="transparent", text_color="#1e1a16", hover_color="#e8c4a0", corner_radius=0)
settings_btn.pack(side="left")

help_btn = ctk.CTkButton(menubar, text="Help", width=70, fg_color="transparent", text_color="#1e1a16", hover_color="#e8c4a0", corner_radius=0)
help_btn.pack(side="left")

body_label = ctk.CTkLabel(app, text="ここが本体エリアです")
body_label.pack(expand=True)

app.mainloop()

ポイントは、各ボタンのfg_color="transparent"です。ボタンの背景をメニューバーと同じ色に透明化することで、「四角いボタンが並んでいる」のではなく「メニューバーに文字が並んでいる」ように見えます。hover_colorだけ薄いオレンジを指定しているので、マウスを乗せたときだけ反応が分かります。

ステップ2: customtkinter ドロップダウンメニューの表示/非表示を実装する

次に、Fileボタンをクリックしたときに、その下にパネルが表示/非表示になる仕組みを作ります。メニューの中身(項目)はまだ空のままです。

file_menu = ctk.CTkFrame(app, corner_radius=6, border_width=1, border_color="#c05208")
ctk.CTkLabel(file_menu, text="メニュー項目がここに入ります").pack(padx=16, pady=12)

def toggle_file_menu():
    if file_menu.winfo_ismapped():
        file_menu.place_forget()
    else:
        x = file_btn.winfo_x()
        y = menubar.winfo_height()
        file_menu.place(x=x, y=y)
        file_menu.lift()

file_btn.configure(command=toggle_file_menu)

ドロップダウンの正体は、place()で位置を指定して重ねて表示するだけのCTkFrameです。pack()やgrid()ではなくplace()を使うことで、他の部品のレイアウトに影響を与えずに、好きな座標へ「浮かせて」表示できます。

• winfo_ismapped(): そのウィジェットが現在画面に表示されているかどうかを調べる
• place_forget(): place()で表示していたウィジェットを非表示にする
• winfo_x() / winfo_height(): ボタンやメニューバーの位置・サイズをピクセル単位で取得する。これを使ってドロップダウンをボタンの真下に配置している
• lift(): 他のウィジェットより手前(上のレイヤー)に表示する

ステップ3: メニュー項目と「外側クリックで閉じる」を実装する

空だったドロップダウンに、実際の項目(開く・保存・終了)を追加し、それぞれにクリック処理を割り当てます。また、メニューの外側をクリックしたときに自動で閉じる処理も加えます。

def close_file_menu():
    file_menu.place_forget()

def on_open():
    print("「開く」が押されました")
    close_file_menu()

def on_save():
    print("「保存」が押されました")
    close_file_menu()

def on_exit():
    app.destroy()

ctk.CTkButton(file_menu, text="開く", anchor="w", fg_color="transparent", text_color="#1e1a16", hover_color="#f0cba8", command=on_open).pack(fill="x", padx=4, pady=(4, 0))
ctk.CTkButton(file_menu, text="保存", anchor="w", fg_color="transparent", text_color="#1e1a16", hover_color="#f0cba8", command=on_save).pack(fill="x", padx=4)
ctk.CTkButton(file_menu, text="終了", anchor="w", fg_color="transparent", text_color="#1e1a16", hover_color="#f0cba8", command=on_exit).pack(fill="x", padx=4, pady=(0, 4))

項目ボタンをクリックしたら、それぞれの処理を実行したあとにclose_file_menu()でメニューを閉じています。「終了」だけはapp.destroy()でウィンドウそのものを閉じる実処理にしてあります。

外側クリックで閉じる処理は、少し工夫が必要です。

file_menu_open = False  # 開いているかどうかを自前で管理する

def close_file_menu():
    global file_menu_open
    file_menu.place_forget()
    file_menu_open = False

def toggle_file_menu():
    global file_menu_open
    if file_menu_open:
        close_file_menu()
    else:
        x = file_btn.winfo_x()
        y = menubar.winfo_height()
        file_menu.place(x=x, y=y)
        file_menu.lift()
        file_menu_open = True

file_btn.configure(command=toggle_file_menu)

def in_bbox(widget, event):
    x1 = widget.winfo_rootx()
    y1 = widget.winfo_rooty()
    x2 = x1 + widget.winfo_width()
    y2 = y1 + widget.winfo_height()
    return x1 <= event.x_root <= x2 and y1 <= event.y_root <= y2

def on_click_outside(event):
    if not file_menu_open:
        return
    if not in_bbox(file_menu, event) and not in_bbox(file_btn, event):
        close_file_menu()

app.bind_all("<Button-1>", on_click_outside, add="+")

app.bind_all("<Button-1>", ...)で、ウィンドウ内のどこをクリックしても呼ばれる処理を登録します。「開いているかどうか」の判定にfile_menu.winfo_ismapped()(Tkinterが管理する表示状態)をそのまま使いたくなりますが、place()を呼んだ直後は、実際の画面反映がまだ済んでいないタイミングでwinfo_ismapped()がFalseを返すことがあります。commandのクリック処理とbind_allの外側クリック判定はどちらも同じ1回のクリックの中でほぼ同時に走るため、このタイミング次第では「開いた直後なのに、Tkinter的にはまだ開いていないと判定されて即座に閉じられてしまう」という事態が起こり得ます。

そこで、Tkinterの内部状態に頼らず、file_menu_openという自分で管理する変数で「開いているかどうか」を判定するようにしています。place()を呼ぶのと同じタイミングで自分でTrueにしているので、タイミングのズレが起きません。

ステップ4: 4つのメニューに対応させ、排他制御を実装する

ここまではFileメニュー1つだけの実装でした。最後に、表示・設定・Helpメニューにも同じ仕組みを広げつつ、「1つのメニューを開いたら、他は自動的に閉じる」排他制御を加えます。

最初は、ステップ3と同じようにmenu.winfo_ismapped()で開閉状態を判定する形で実装しました。ところが実際に動かしてみると、Fileボタンをクリックしても、メニューが一瞬たりとも表示されないという現象が起きました。エラーは出ません。ただ何も起きないように見えるのです。

原因を1つずつ処理を追って調べたところ、次のような順番で処理が実行されていることが分かりました。

• Fileボタンを押すと、まずボタン自身のcommand(トグル処理)が呼ばれ、file_menu.place()でメニューが配置される
• ところが、この直後の時点ではwinfo_ismapped()はまだFalseを返す(Tkinter内部の表示状態への反映が追いついていない)
• その直後、同じクリックに対してapp.bind_all("<Button-1>", ...)で登録した外側クリック判定処理も呼ばれる
• この処理は「どのメニューもwinfo_ismapped()がTrueでない」と判定し、「開いているメニューは無い」と誤解してclose_all_menus()を呼んでしまう
• 結果、開いたはずのメニューがその場で消され、画面が再描画される前に閉じてしまう

ステップ3では「どのメニューも開いていなければ何もしない(returnして終了)」という作りだったため、この問題が表面化しませんでした。ステップ4で「デフォルトでは閉じる」という設計に変えたことで、この潜在的なタイミング問題が顕在化した形です。

そこで、「今どのメニューが開いているか」をopen_menu_widgetという変数で自前管理する形に直しました。

menus = [
    (file_btn, file_menu),
    (view_btn, view_menu),
    (settings_btn, settings_menu),
    (help_btn, help_menu),
]

# 今どのメニューが開いているかを自前で管理する(winfo_ismapped()には頼らない)
open_menu_widget = None
open_btn_widget = None

def close_all_menus():
    global open_menu_widget, open_btn_widget
    for _, menu in menus:
        menu.place_forget()
    open_menu_widget = None
    open_btn_widget = None

def open_menu(btn, menu):
    global open_menu_widget, open_btn_widget
    close_all_menus()
    x = btn.winfo_x()
    y = menubar.winfo_height()
    menu.place(x=x, y=y)
    menu.lift()
    open_menu_widget = menu
    open_btn_widget = btn

def make_toggle(btn, menu):
    def toggle():
        if open_menu_widget is menu:
            close_all_menus()
        else:
            open_menu(btn, menu)
    return toggle

file_btn.configure(command=make_toggle(file_btn, file_menu))
view_btn.configure(command=make_toggle(view_btn, view_menu))
settings_btn.configure(command=make_toggle(settings_btn, settings_menu))
help_btn.configure(command=make_toggle(help_btn, help_menu))

ポイントはopen_menu()の中で、新しいメニューを表示する前に必ずclose_all_menus()を呼んでいることです。これにより、どのメニューボタンを押しても「まず全部閉じてから、押されたメニューだけ開く」という動きになり、複数のメニューが同時に開くことがなくなります。open_menu_widgetへの代入もplace()と同じタイミングで行っているので、先ほどのようなタイミングのズレは起きません。

make_toggle()は、ボタンとメニューの組み合わせごとに専用のトグル関数を作って返す関数です。File・表示・設定・Helpの4つで同じロジックを使い回すために、こういう書き方にしています。

外側クリックの判定(in_bbox)も、open_menu_widgetを見る形に書き換えます。

def on_click_outside(event):
    if open_menu_widget is None:
        return
    if not in_bbox(open_menu_widget, event) and not in_bbox(open_btn_widget, event):
        close_all_menus()

app.bind_all("<Button-1>", on_click_outside, add="+")

完成版(sample_final.py):自分のアプリに組み込むテンプレート

ステップ4までの内容(open_menu_widgetで開閉状態を自前管理する排他制御を含む)を1つのファイルにまとめたものが、ダウンロードできるsample5_final.pyです。実装自体はステップ4と同じですが、ダウンロードしてすぐ使えるように、各メニュー項目のクリック処理にひと工夫を加えています。

def on_open():
    print("「開く」が押されました")
    # ここに「開く」を押したときの処理を書く
    # 例: filedialog.askopenfilename() でファイル選択ダイアログを開く など
    close_all_menus()

このように、「クリックしたらコンソールにメッセージが表示される」という最低限の動作は最初から用意しつつ、実際の処理を書く場所をコメントで明示しています。ダウンロードした直後に実行してもエラーにならず、メニューがきちんと反応することを確認したうえで、自分の処理を追加していけます。

なお、「表示」メニューの「ダークモード」「ライトモード」と、「File」メニューの「終了」だけは、コメントではなく実際に動く処理(ctk.set_appearance_mode()、app.destroy())にしてあります。ダウンロードしてそのまま実行するだけで、テーマの切り替えとアプリの終了は体験できます。

よくある質問

まとめ

この記事では、CustomTkinterに標準搭載されていない「File・表示・設定・Help」形式のメニューバーを、CTkFrame・CTkButton・place()を組み合わせて自作する方法を、5段階に分けて紹介しました。

• CustomTkinterにはテーマに馴染むメニューバー専用部品が無いため、CTkFrame+CTkButtonで自作する
• ドロップダウンはplace()で浮かせて表示し、place_forget()で非表示にする
• 外側クリックで閉じる処理は、クリック座標がメニュー・ボタンの範囲内かどうかで判定する
• 複数メニューの排他制御は、新しいメニューを開く前に必ず全メニューを閉じることで実現する