Python wxPython入門|wx.ToolBarで直感的なツールバーを作成する方法

Python

この記事では、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)の向上に役立ててください。

コメント

タイトルとURLをコピーしました