GUI

[wxPython] wx.TreeCtrlの使い方 – ツリービューの作成

wxPythonのwx.TreeCtrlは、階層構造を持つデータをツリービュー形式で表示するためのウィジェットです。

ツリービューは親子関係を視覚的に表現でき、ファイルシステムや階層データの表示に適しています。

wx.TreeCtrlを使用するには、まずインスタンスを作成し、AppendItemメソッドでノードを追加します。

ルートノードを作成し、子ノードをその下に追加することで階層を構築します。

ノードの選択や展開・折りたたみなどのイベントも処理可能です。

目次から探す

wx.TreeCtrlとは
- 主な特徴
wx.TreeCtrlの基本的な使い方
wx.TreeCtrlのイベント処理
wx.TreeCtrlのカスタマイズ
- ノードアイコンの設定
- フォントと色のカスタマイズ
wx.TreeCtrlの応用例
まとめ

wx.TreeCtrlとは

wx.TreeCtrlは、wxPythonライブラリに含まれるウィジェットの一つで、ツリービューを表示するためのコンポーネントです。

ツリービューは、階層的なデータを視覚的に表現するために使用され、親子関係を持つアイテムをツリー状に表示します。

これにより、ユーザーはデータの構造を直感的に理解しやすくなります。

主な特徴

階層構造の表示: 親ノードと子ノードを持つデータを簡単に表示できます。
展開・折りたたみ機能: ユーザーはノードを展開したり折りたたんだりして、必要な情報にアクセスできます。
カスタマイズ可能: ノードのアイコンやスタイルを変更することで、見た目を自由にカスタマイズできます。

wx.TreeCtrlは、ファイルエクスプローラーや設定メニューなど、階層的なデータを扱うアプリケーションでよく使用されます。

例えば、フォルダ構造を表示する際に非常に便利です。

このように、wx.TreeCtrlは、ユーザーインターフェースにおいてデータの階層を視覚的に表現するための強力なツールです。

次のセクションでは、wx.TreeCtrlの基本的な使い方について詳しく解説します。

wx.TreeCtrlの基本的な使い方

wx.TreeCtrlを使用するためには、まずwxPythonをインポートし、アプリケーションを作成する必要があります。

以下に、基本的なツリービューを作成するためのサンプルコードを示します。

import wx
class MyFrame(wx.Frame):
    def __init__(self, *args, **kw):
        super(MyFrame, self).__init__(*args, **kw)
        # wx.TreeCtrlの作成
        self.tree = wx.TreeCtrl(self)
        # ルートノードの追加
        root = self.tree.AddRoot("ルートノード")
        # 子ノードの追加
        child1 = self.tree.AppendItem(root, "子ノード1")
        child2 = self.tree.AppendItem(root, "子ノード2")
        # 子ノードにさらに子ノードを追加
        self.tree.AppendItem(child1, "孫ノード1")
        self.tree.AppendItem(child1, "孫ノード2")
        # ノードを展開
        self.tree.Expand(root)
        # ウィンドウの設定
        self.SetTitle("wx.TreeCtrlの基本的な使い方")
        self.SetSize(300, 400)
        self.Show()
app = wx.App(False)
frame = MyFrame(None)
app.MainLoop()

上記のコードを実行すると、以下のようなツリービューが表示されます。

このサンプルコードでは、wx.Frameを継承したMyFrameクラスを作成し、その中でwx.TreeCtrlを初期化しています。

AddRootメソッドでルートノードを追加し、AppendItemメソッドを使って子ノードを追加しています。

また、Expandメソッドを使用して、ルートノードを展開しています。

このようにして、基本的なツリービューを作成することができます。

次のセクションでは、wx.TreeCtrlのイベント処理について詳しく解説します。

wx.TreeCtrlのイベント処理

wx.TreeCtrlでは、ユーザーの操作に応じてさまざまなイベントを処理することができます。

特に、ノードの選択やダブルクリックなどのイベントは、アプリケーションのインタラクティブ性を高めるために重要です。

以下に、基本的なイベント処理の方法を示します。

import wx
class MyFrame(wx.Frame):
    def __init__(self, *args, **kw):
        super(MyFrame, self).__init__(*args, **kw)
        # wx.TreeCtrlの作成
        self.tree = wx.TreeCtrl(self)
        root = self.tree.AddRoot("ルートノード")
        child1 = self.tree.AppendItem(root, "子ノード1")
        child2 = self.tree.AppendItem(root, "子ノード2")
        self.tree.AppendItem(child1, "孫ノード1")
        self.tree.AppendItem(child1, "孫ノード2")
        self.tree.Expand(root)
        # イベントのバインド
        self.tree.Bind(wx.EVT_TREE_SEL_CHANGED, self.on_selection_changed)
        self.tree.Bind(wx.EVT_TREE_ITEM_ACTIVATED, self.on_item_activated)
        # ウィンドウの設定
        self.SetTitle("wx.TreeCtrlのイベント処理")
        self.SetSize(300, 400)
        self.Show()
    def on_selection_changed(self, event):
        # 選択されたノードの取得
        item = event.GetItem()
        text = self.tree.GetItemText(item)
        wx.MessageBox(f"選択されたノード: {text}", "ノード選択")
    def on_item_activated(self, event):
        # アクティブなノードの取得
        item = event.GetItem()
        text = self.tree.GetItemText(item)
        wx.MessageBox(f"アクティブなノード: {text}", "ノードアクティブ")
app = wx.App(False)
frame = MyFrame(None)
app.MainLoop()

上記のコードを実行し、ノードを選択またはダブルクリックすると、以下のようなメッセージボックスが表示されます。

ノード選択時: “選択されたノード: 子ノード1” (選択したノードに応じて変わります)
ノードアクティブ時: “アクティブなノード: 孫ノード1” (ダブルクリックしたノードに応じて変わります)

このサンプルコードでは、wx.EVT_TREE_SEL_CHANGEDイベントとwx.EVT_TREE_ITEM_ACTIVATEDイベントをバインドしています。

on_selection_changedメソッドでは、選択されたノードのテキストを取得し、メッセージボックスで表示します。

on_item_activatedメソッドでは、ダブルクリックされたノードのテキストを表示します。

このように、wx.TreeCtrlのイベント処理を活用することで、ユーザーの操作に応じたインタラクションを実現できます。

次のセクションでは、wx.TreeCtrlのカスタマイズについて詳しく解説します。

wx.TreeCtrlのカスタマイズ

wx.TreeCtrlは、デフォルトのスタイルに加えて、さまざまなカスタマイズが可能です。

ノードのアイコンやフォント、色などを変更することで、アプリケーションのデザインに合わせたツリービューを作成できます。

以下に、いくつかのカスタマイズ方法を示します。

ノードアイコンの設定

ノードにアイコンを設定することで、視覚的に情報を伝えることができます。

以下のサンプルコードでは、ノードにアイコンを追加する方法を示します。

import wx

class MyFrame(wx.Frame):
    def __init__(self, *args, **kw):
        super(MyFrame, self).__init__(*args, **kw)
        
        # wx.TreeCtrlの作成
        self.tree = wx.TreeCtrl(self)
        root = self.tree.AddRoot("ルートノード")
        
        # アイコンリストの作成
        self.image_list = wx.ImageList(16, 16)  # アイコンのサイズを指定
        folder_icon = self.image_list.Add(wx.ArtProvider.GetBitmap(wx.ART_FOLDER, wx.ART_OTHER, (16, 16)))
        file_icon = self.image_list.Add(wx.ArtProvider.GetBitmap(wx.ART_NORMAL_FILE, wx.ART_OTHER, (16, 16)))
        
        # TreeCtrlにアイコンリストを設定
        self.tree.AssignImageList(self.image_list)
        
        # ノードにアイコンを設定
        child1 = self.tree.AppendItem(root, "子ノード1")
        child2 = self.tree.AppendItem(root, "子ノード2")
        self.tree.SetItemImage(child1, folder_icon, wx.TreeItemIcon_Normal)
        self.tree.SetItemImage(child2, file_icon, wx.TreeItemIcon_Normal)
        
        # ウィンドウの設定
        self.SetTitle("wx.TreeCtrlのカスタマイズ")
        self.SetSize(300, 400)
        self.Show()

# アプリケーションの実行
app = wx.App(False)
frame = MyFrame(None)
app.MainLoop()

上記のコードを実行すると、アイコンが設定されたツリービューが表示されます。

このサンプルコードでは、wx.ArtProviderを使用して、フォルダアイコンとファイルアイコンを取得し、SetItemBitmapメソッドでノードにアイコンを設定しています。

アイコンは、ノードの状態に応じて異なるものを設定することも可能です。

フォントと色のカスタマイズ

ノードのフォントや色を変更することもできます。

以下のサンプルコードでは、ノードのフォントを変更する方法を示します。

import wx
class MyFrame(wx.Frame):
    def __init__(self, *args, **kw):
        super(MyFrame, self).__init__(*args, **kw)
        # wx.TreeCtrlの作成
        self.tree = wx.TreeCtrl(self)
        root = self.tree.AddRoot("ルートノード")
        child1 = self.tree.AppendItem(root, "子ノード1")
        child2 = self.tree.AppendItem(root, "子ノード2")
        # フォントの設定
        font = wx.Font(10, wx.FONTFAMILY_DEFAULT, wx.FONTSTYLE_NORMAL, wx.FONTWEIGHT_BOLD)
        self.tree.SetItemFont(child1, font)
        # 色の設定
        self.tree.SetItemTextColour(child2, wx.Colour(255, 0, 0))  # 赤色
        # ウィンドウの設定
        self.SetTitle("wx.TreeCtrlのフォントと色のカスタマイズ")
        self.SetSize(300, 400)
        self.Show()
app = wx.App(False)
frame = MyFrame(None)
app.MainLoop()

上記のコードを実行すると、以下のようにフォントと色が変更されたツリービューが表示されます。

ルートノード
├── [太字] 子ノード1
└── [赤色] 子ノード2

このサンプルコードでは、SetItemFontメソッドを使用して、特定のノードのフォントを太字に変更しています。

また、SetItemTextColourメソッドを使用して、子ノード2のテキスト色を赤色に設定しています。

このように、wx.TreeCtrlは多様なカスタマイズが可能であり、アプリケーションのデザインに合わせたツリービューを作成することができます。

次のセクションでは、wx.TreeCtrlの応用例について詳しく解説します。

wx.TreeCtrlの応用例

wx.TreeCtrlは、さまざまなアプリケーションでのデータ表示に利用されます。

以下に、具体的な応用例をいくつか紹介します。

これにより、wx.TreeCtrlの実用性と柔軟性を理解することができます。

ファイルエクスプローラー

wx.TreeCtrlは、ファイルシステムの階層構造を表示するファイルエクスプローラーの作成に適しています。

ユーザーはフォルダを展開して、ファイルやサブフォルダにアクセスできます。

以下は、ファイルエクスプローラーの基本的な構造を示すサンプルコードです。

import wx
import os
class FileExplorer(wx.Frame):
    def __init__(self, *args, **kw):
        super(FileExplorer, self).__init__(*args, **kw)
        self.tree = wx.TreeCtrl(self)
        root = self.tree.AddRoot("C:\\")  # ルートディレクトリ
        self.populate_tree(root, "C:\\")  # ディレクトリをツリーに追加
        self.tree.Bind(wx.EVT_TREE_ITEM_EXPANDED, self.on_item_expanded)
        self.SetTitle("ファイルエクスプローラー")
        self.SetSize(400, 600)
        self.Show()
    def populate_tree(self, parent, path):
        for item in os.listdir(path):
            item_path = os.path.join(path, item)
            if os.path.isdir(item_path):
                child = self.tree.AppendItem(parent, item)
                self.tree.SetItemData(child, item_path)  # パスを保存
    def on_item_expanded(self, event):
        item = event.GetItem()
        path = self.tree.GetItemData(item)
        self.populate_tree(item, path)  # 展開時に子ノードを追加
app = wx.App(False)
frame = FileExplorer(None)
app.MainLoop()

設定メニュー

アプリケーションの設定を階層的に表示するために、wx.TreeCtrlを使用することもできます。

ユーザーは各設定項目を選択して、詳細を表示したり変更したりできます。

以下は、設定メニューの基本的な構造を示すサンプルコードです。

import wx
class SettingsMenu(wx.Frame):
    def __init__(self, *args, **kw):
        super(SettingsMenu, self).__init__(*args, **kw)
        self.tree = wx.TreeCtrl(self)
        root = self.tree.AddRoot("設定")
        # 設定項目の追加
        display_settings = self.tree.AppendItem(root, "表示設定")
        self.tree.AppendItem(display_settings, "テーマ")
        self.tree.AppendItem(display_settings, "フォントサイズ")
        network_settings = self.tree.AppendItem(root, "ネットワーク設定")
        self.tree.AppendItem(network_settings, "プロキシ設定")
        self.tree.AppendItem(network_settings, "接続テスト")
        self.SetTitle("設定メニュー")
        self.SetSize(300, 400)
        self.Show()
app = wx.App(False)
frame = SettingsMenu(None)
app.MainLoop()