この記事では、PythonのGUIライブラリ「wxPython」を用いて、本格的なツールバー(wx.ToolBar)を実装する方法を解説します。
デスクトップアプリケーションにおいて、ユーザーが最も頻繁に使う「保存」「開く」「戻る」といった機能に、ワンクリックでアクセスできるツールバーは必須のUI要素です。この記事を読むことで、アイコン画像の扱い方から、イベント処理、検索窓の埋め込みといった応用テクニックまで、ツールバーに関するあらゆる実装方法を習得できます。本記事で説明しているクラスの公式ドキュメントは次の通りです(wx.ToolBar Reference)
※本記事のコードは、Python 3.7以降およびwxPython 4.x(Phoenix)環境を対象としています。バージョンに関わらず、wxPythonの標準的な手法として広く利用できる内容です。
wx.ToolBarの基本構造とメニューバーとの違い
結論から言うと、ツールバーは「視覚的なアイコン」を用いて直感的な操作を提供するUI部品であり、文字主体のメニューバー(wx.MenuBar)を補完する役割を持ちます。
メニューバーが「すべての機能を網羅する辞書」だとすれば、ツールバーは「よく使う機能を厳選したショートカット」です。両者を組み合わせて配置することで、プロフェッショナルで使い勝手の良いアプリケーションになります。
ツールバーを実装する上で、以下の特徴を押さえておきましょう。
- アイコンが主体: 直感的に機能を理解できる画像(Bitmap)を使用します。
- テキスト併記も可能: アイコンの下や横に文字ラベルを表示するスタイルも選べます。
- 様々な部品を配置可能: ボタンだけでなく、テキストボックスやドロップダウンも配置できます。
【基本編】wx.ToolBarを実装する4つのステップ
結論として、ツールバーの実装は「作成」「アイコン準備」「追加」「描画の確定」という4つのステップで行います。
特に最後の「描画の確定(Realize)」は初心者が忘れがちなポイントなので、確実に実行しましょう。
手順1:CreateToolBar()でツールバーを作成する
結論から言うと、ツールバー本体の作成は wx.Frame に備わっている CreateToolBar() メソッドを使うのが最も簡単で確実です。
自分で wx.ToolBar のインスタンスを作成してフレームに配置することも可能ですが、CreateToolBar() を使えば、OSの標準的な位置(ウィンドウ上部)に自動的に配置とサイズ調整を行ってくれます。
# フレーム内でツールバーを作成(スタイルを指定可能)
# wx.TB_HORIZONTAL: 水平方向に配置(デフォルト)
# wx.TB_TEXT: アイコンと一緒にテキストラベルを表示
toolbar = self.CreateToolBar(style=wx.TB_HORIZONTAL | wx.TB_TEXT)手順2:wx.ArtProviderでアイコン画像を準備する
結論として、アイコン画像は自前で用意しなくても、wx.ArtProvider を使うことでOS標準のアイコンを簡単に呼び出して利用できます。
ツールバーのボタンには画像データ(wx.Bitmap)が必要です。外部の画像ファイルを読み込むこともできますが、開発初期や標準的な機能(ファイルを開く、保存など)であれば、wxPythonに内蔵されている wx.ArtProvider を活用するのが非常に便利です。
# OS標準の「開く」アイコンをツールバー用のサイズで取得
icon_open = wx.ArtProvider.GetBitmap(wx.ART_FILE_OPEN, wx.ART_TOOLBAR)
# OS標準の「保存」アイコンを取得
icon_save = wx.ArtProvider.GetBitmap(wx.ART_FILE_SAVE, wx.ART_TOOLBAR)手順3:AddTool()でツールバーにボタンを追加する
結論から言うと、準備したアイコンとラベルを AddTool() メソッドを使ってツールバーに登録していきます。
それぞれのツール(ボタン)には、メニューバーと同様に一意の「ID」を割り当てます。このIDが、後でクリックされた時の処理を紐付けるための鍵になります。
# AddTool(ID, ラベル, アイコン画像, 短いヘルプ文字列)
tool_open = toolbar.AddTool(wx.ID_OPEN, "開く", icon_open, "ファイルを開きます")
tool_save = toolbar.AddTool(wx.ID_SAVE, "保存", icon_save, "ファイルを保存します")手順4:Realize()メソッドで描画を確定する
結論として、すべてのツールを追加し終えたら、最後に必ず toolbar.Realize() を呼び出す必要があります。
これを実行しないと、内部的にツールが追加されていても画面上には一切表示されません。ツールバーのレイアウト計算を行い、画面に描画するための必須メソッドです。
# ツールの追加がすべて終わったら、必ず呼び出す
toolbar.Realize()ツールバーのボタンスタイル(通常・チェック・ラジオ)
結論として、ツールバーのボタンには、単発で押す「通常ボタン」の他に、ON/OFFの状態を持つ「チェックボタン」や、複数から1つを選ぶ「ラジオボタン」を設定できます。
AddTool の引数 kind に定数を指定することで、ボタンスタイルを変更できます。
- 通常ボタン(
wx.ITEM_NORMAL): クリックするたびに処理を実行する標準のボタンです。 - チェックボタン(
wx.ITEM_CHECK): 押すたびにON/OFF(凹凸状態)が切り替わるボタンです。太字や斜体の切り替えなどに使います。 - ラジオボタン(
wx.ITEM_RADIO): 連続して追加したラジオボタンの中で、常に1つだけがONになるボタンです。配置の左揃え・中央揃え・右揃えの切り替えなどに使います。
# チェックボタンを追加する例
icon_bold = wx.ArtProvider.GetBitmap(wx.ART_HELP_SETTINGS, wx.ART_TOOLBAR)
toolbar.AddTool(wx.ID_ANY, "太字", icon_bold, kind=wx.ITEM_CHECK)ツールバー内にコントロール(検索窓など)を埋め込む方法
結論から言うと、AddControl() メソッドを使えば、ボタンだけでなくテキストボックス(wx.TextCtrl)やドロップダウン(wx.ComboBox)をツールバー内に直接配置できます。
ブラウザのURL入力欄や、エディタの検索窓のように、文字を入力させたい場合に非常に有用なテクニックです。
# ツールバーの親要素としてテキストコントロールを作成
search_ctrl = wx.TextCtrl(toolbar, wx.ID_ANY, "検索キーワード...")
# ツールバーにコントロールを追加
toolbar.AddControl(search_ctrl)区切り線(セパレーター)を入れたい場合は、toolbar.AddSeparator() を呼び出すだけで、視覚的な区切りを挿入し、グループを明確にすることができます。
ボタンクリック時のイベント処理(wx.EVT_TOOL)
結論として、ツールバーのボタンが押された時の動作は、メニューバーと全く同じ wx.EVT_TOOL イベントを使って関数にバインド(紐付け)します。
メニューバーと同じID(例: wx.ID_OPEN)を使用している場合、イベントバインドを1つ書くだけで、メニューから選んだ時もツールバーのボタンを押した時も、同じ関数を呼び出すことができます。これがwxPythonのイベントシステムの優れた点です。
# ツールバーボタン(またはメニュー)がクリックされた時の処理を紐付け
self.Bind(wx.EVT_TOOL, self.on_open, id=wx.ID_OPEN)
def on_open(self, event):
wx.MessageBox("「開く」が実行されました。", "情報")実践サンプルコード:多機能なwx.ToolBarのフルスクリプト
結論として、ここまで解説した「ArtProviderによるアイコン取得」「各種ボタンスタイル」「コントロールの追加」「イベント処理」をすべて盛り込んだ完全なサンプルコードを提示します。
以下のコードをコピー&ペーストして実行し、実際の動作と見た目を確認してみてください。
import wx
class MyFrame(wx.Frame):
def __init__(self):
super().__init__(None, title="wx.ToolBar 実践サンプル", size=(600, 400))
self.init_toolbar()
# 動作確認用のテキストエリアを画面中央に配置
self.text_area = wx.TextCtrl(self, style=wx.TE_MULTILINE)
self.Show()
def init_toolbar(self):
"""ツールバーを初期化して構築するメソッド"""
# 1. ツールバーの作成 (テキストラベル付きスタイル)
toolbar = self.CreateToolBar(style=wx.TB_HORIZONTAL | wx.TB_TEXT)
# 2. wx.ArtProviderを使ってアイコンを取得
bmp_open = wx.ArtProvider.GetBitmap(wx.ART_FILE_OPEN, wx.ART_TOOLBAR)
bmp_save = wx.ArtProvider.GetBitmap(wx.ART_FILE_SAVE, wx.ART_TOOLBAR)
bmp_undo = wx.ArtProvider.GetBitmap(wx.ART_UNDO, wx.ART_TOOLBAR)
bmp_quit = wx.ArtProvider.GetBitmap(wx.ART_QUIT, wx.ART_TOOLBAR)
# 3. 通常のツールを追加
toolbar.AddTool(wx.ID_OPEN, "開く", bmp_open, "ファイルを開きます")
toolbar.AddTool(wx.ID_SAVE, "保存", bmp_save, "ファイルを保存します")
# セパレーター(区切り線)の追加
toolbar.AddSeparator()
# 4. チェックボタンの追加 (例:元に戻す機能をトグル化)
toolbar.AddTool(wx.ID_UNDO, "戻す", bmp_undo, kind=wx.ITEM_CHECK)
toolbar.AddSeparator()
# 5. コントロール(検索窓)の追加
self.search_box = wx.TextCtrl(toolbar, size=(150, -1))
toolbar.AddControl(self.search_box)
toolbar.AddSeparator()
# 終了ボタン
toolbar.AddTool(wx.ID_EXIT, "終了", bmp_quit, "アプリを終了します")
# 6. 必ず最後にRealize()を呼び出して描画を確定する
toolbar.Realize()
# 7. イベントのバインド
self.Bind(wx.EVT_TOOL, self.on_open, id=wx.ID_OPEN)
self.Bind(wx.EVT_TOOL, self.on_save, id=wx.ID_SAVE)
self.Bind(wx.EVT_TOOL, self.on_undo, id=wx.ID_UNDO)
self.Bind(wx.EVT_TOOL, self.on_exit, id=wx.ID_EXIT)
def on_open(self, event):
self.text_area.AppendText("【開く】ボタンがクリックされました。\n")
def on_save(self, event):
self.text_area.AppendText("【保存】ボタンがクリックされました。\n")
def on_undo(self, event):
# チェック状態を取得して表示
is_checked = event.IsChecked()
state_str = "ON" if is_checked else "OFF"
self.text_area.AppendText(f"【戻す】ボタンが切り替わりました。現在: {state_str}\n")
def on_exit(self, event):
self.Close(True)
if __name__ == "__main__":
app = wx.App(False)
MyFrame()
app.MainLoop()まとめ:wx.ToolBarでアプリのUXを向上させよう
結論として、wx.ToolBar を使いこなすことで、商用ソフトウェアに劣らない、直感的で使い勝手の良いデスクトップアプリを開発できます。
本記事の重要なポイントを復習します。
- 作成:
CreateToolBar()を使い、wx.TB_TEXTなどのスタイルで見た目を調整する。 - アイコン: 画像ファイルがなくても
wx.ArtProviderでOS標準のアイコンを利用できる。 - 配置:
AddToolでボタンを、AddControlで検索窓などの部品を配置できる。 - 確定: すべての配置が終わったら、最後に必ず
Realize()を実行する。 - イベント: メニューと同じ
wx.EVT_TOOLを使ってクリック処理を実装する。
ツールバーは、アプリの第一印象と操作性を決定づける重要な要素です。ぜひご自身のPythonアプリに導入し、ユーザー体験(UX)の向上に役立ててください。


コメント