GUI

[wxPython] wx.RichTextCtrlの使い方 – 書式付きテキストボックスの表示

wxPythonのwx.RichTextCtrlは、リッチテキスト(書式付きテキスト)を扱うためのコントロールです。

テキストのフォント、色、スタイル(太字、斜体、下線など)を設定したり、画像やリストを挿入することが可能です。

wx.RichTextCtrlを使用するには、wx.richtextモジュールをインポートします。

インスタンスを作成する際に、親ウィンドウ、ID、位置、サイズなどを指定します。

テキストの書式設定にはBeginBold()やBeginItalic()などのメソッドを使用し、WriteText()でテキストを挿入します。

目次から探す

wx.RichTextCtrlとは
wx.RichTextCtrlの基本的な使い方
テキストの挿入と編集
書式設定の方法
画像やリストの挿入
イベント処理とユーザー操作
応用的な使い方
wx.RichTextCtrlを使った実践例
まとめ

wx.RichTextCtrlとは

wx.RichTextCtrlは、wxPythonライブラリに含まれる強力なウィジェットで、書式付きテキストを表示・編集するためのコントロールです。

このウィジェットを使用することで、ユーザーはリッチテキスト(太字、斜体、下線、色付きテキストなど)を簡単に扱うことができます。

主に以下のような特徴があります。

特徴	説明
書式設定	テキストのフォント、サイズ、色などを設定可能
画像の挿入	画像をテキスト内に埋め込むことができる
リストの作成	番号付きリストや箇条書きを作成できる
Undo/Redo機能	操作の取り消しややり直しが可能
イベント処理	ユーザーの操作に応じたイベントを処理できる

このウィジェットは、テキストエディタや文書作成アプリケーションなど、さまざまなアプリケーションで利用されており、ユーザーにとって直感的で使いやすいインターフェースを提供します。

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

wx.RichTextCtrlの基本的な使い方

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

以下は、wx.RichTextCtrlを基本的に使用するためのサンプルコードです。

import wx
import wx.richtext  # wx.richtextモジュールをインポート

class MyApp(wx.App):
    def OnInit(self):
        # フレームの作成
        frame = wx.Frame(None, title="wx.RichTextCtrlの基本例", size=(400, 300))
        
        # wx.RichTextCtrlの作成
        self.richTextCtrl = wx.richtext.RichTextCtrl(frame, style=wx.VSCROLL | wx.HSCROLL | wx.NO_BORDER | wx.WANTS_CHARS)
        
        # テキストの初期設定
        self.richTextCtrl.SetValue("こんにちは、wx.RichTextCtrlの世界へようこそ！")
        
        # フレームを表示
        frame.Show()
        return True

# アプリケーションの実行
app = MyApp()
app.MainLoop()

このコードでは、以下の処理を行っています。

wx.Appを継承したMyAppクラスを作成し、アプリケーションの初期化を行います。
wx.Frameを作成し、その中にwx.RichTextCtrlを配置します。
SetValueメソッドを使用して、初期テキストを設定します。
最後に、アプリケーションを実行します。

この基本的な構造を理解することで、wx.RichTextCtrlを使ったアプリケーションの開発が可能になります。

次のセクションでは、テキストの挿入と編集について詳しく見ていきます。

テキストの挿入と編集

wx.RichTextCtrlでは、テキストの挿入や編集が簡単に行えます。

ユーザーは、テキストを追加したり、既存のテキストを変更したりすることができます。

以下のサンプルコードでは、ボタンを使ってテキストを挿入する方法を示します。

import wx
import wx.richtext  # wx.richtextモジュールをインポート

class MyApp(wx.App):
    def OnInit(self):
        # フレームの作成
        frame = wx.Frame(None, title="テキストの挿入と編集", size=(400, 300))
        
        # パネルの作成（レイアウト管理のため）
        panel = wx.Panel(frame)
        
        # wx.RichTextCtrlの作成
        self.richTextCtrl = wx.richtext.RichTextCtrl(panel, style=wx.VSCROLL | wx.HSCROLL | wx.NO_BORDER | wx.WANTS_CHARS)
        
        # ボタンの作成
        insertButton = wx.Button(panel, label="テキストを挿入")
        insertButton.Bind(wx.EVT_BUTTON, self.onInsertText)
        
        # レイアウトの設定
        sizer = wx.BoxSizer(wx.VERTICAL)
        sizer.Add(self.richTextCtrl, 1, wx.EXPAND | wx.ALL, 5)
        sizer.Add(insertButton, 0, wx.ALIGN_CENTER | wx.ALL, 5)
        panel.SetSizer(sizer)
        
        # フレームを表示
        frame.Show()
        return True

    def onInsertText(self, event):
        # テキストを挿入
        self.richTextCtrl.AppendText("\n新しいテキストが挿入されました。")

# アプリケーションの実行
app = MyApp()
app.MainLoop()

このコードでは、以下の処理を行っています。

wx.Buttonを作成し、ボタンがクリックされたときにonInsertTextメソッドが呼び出されるように設定します。
onInsertTextメソッド内で、AppendTextメソッドを使用して新しいテキストを挿入します。

このようにして、ユーザーはボタンをクリックすることでテキストを追加することができます。

また、wx.RichTextCtrlでは、テキストの選択や削除、置換などの編集操作も可能です。

次のセクションでは、書式設定の方法について詳しく見ていきます。

書式設定の方法

wx.RichTextCtrlでは、テキストの書式設定を簡単に行うことができます。

フォントのスタイルやサイズ、色などを変更することができ、リッチテキストの表現が可能です。

以下のサンプルコードでは、ボタンを使って選択したテキストの書式を変更する方法を示します。

import wx
import wx.richtext  # wx.richtextモジュールをインポート

class MyApp(wx.App):
    def OnInit(self):
        # フレームの作成
        frame = wx.Frame(None, title="書式設定の例", size=(400, 300))
        
        # パネルの作成（レイアウト管理のため）
        panel = wx.Panel(frame)
        
        # wx.RichTextCtrlの作成
        self.richTextCtrl = wx.richtext.RichTextCtrl(panel, style=wx.VSCROLL | wx.HSCROLL | wx.NO_BORDER | wx.WANTS_CHARS)
        
        # 書式設定ボタンの作成
        formatButton = wx.Button(panel, label="書式を設定")
        formatButton.Bind(wx.EVT_BUTTON, self.onFormatText)
        
        # レイアウトの設定
        sizer = wx.BoxSizer(wx.VERTICAL)
        sizer.Add(self.richTextCtrl, 1, wx.EXPAND | wx.ALL, 5)
        sizer.Add(formatButton, 0, wx.ALIGN_CENTER | wx.ALL, 5)
        panel.SetSizer(sizer)
        
        # フレームを表示
        frame.Show()
        return True

    def onFormatText(self, event):
        # 選択したテキストの書式を設定
        if self.richTextCtrl.HasSelection():  # テキストが選択されているか確認
            attr = wx.richtext.RichTextAttr()
            attr.SetFont(wx.Font(12, wx.FONTFAMILY_DEFAULT, wx.FONTSTYLE_NORMAL, wx.FONTWEIGHT_BOLD))
            attr.SetTextColour(wx.Colour(255, 0, 0))  # 赤色に設定
            self.richTextCtrl.SetStyle(self.richTextCtrl.GetSelectionRange(), attr)
        else:
            wx.MessageBox("テキストを選択してください。", "エラー", wx.OK | wx.ICON_ERROR)

# アプリケーションの実行
app = MyApp()
app.MainLoop()

このコードでは、以下の処理を行っています。

wx.Buttonを作成し、ボタンがクリックされたときにonFormatTextメソッドが呼び出されるように設定します。
onFormatTextメソッド内で、SetFontメソッドを使用してフォントのスタイルを太字に設定し、SetTextColourメソッドでテキストの色を赤に変更します。

このようにして、選択したテキストの書式を簡単に変更することができます。

wx.RichTextCtrlでは、他にも下線や斜体、背景色の設定など、さまざまな書式設定が可能です。

次のセクションでは、画像やリストの挿入について詳しく見ていきます。

画像やリストの挿入

wx.RichTextCtrlでは、テキストだけでなく、画像やリストを挿入することもできます。

これにより、リッチなコンテンツを作成することが可能です。

以下のサンプルコードでは、ボタンを使って画像とリストを挿入する方法を示します。

import wx
import wx.richtext  # wx.richtextモジュールをインポート

class MyApp(wx.App):
    def OnInit(self):
        # フレームの作成
        frame = wx.Frame(None, title="画像とリストの挿入", size=(400, 300))
        
        # パネルの作成
        panel = wx.Panel(frame)
        
        # wx.RichTextCtrlの作成
        self.richTextCtrl = wx.richtext.RichTextCtrl(panel, style=wx.VSCROLL | wx.HSCROLL | wx.NO_BORDER | wx.WANTS_CHARS)
        
        # 画像挿入ボタンの作成
        insertImageButton = wx.Button(panel, label="画像を挿入")
        insertImageButton.Bind(wx.EVT_BUTTON, self.onInsertImage)
        
        # リスト挿入ボタンの作成
        insertListButton = wx.Button(panel, label="リストを挿入")
        insertListButton.Bind(wx.EVT_BUTTON, self.onInsertList)
        
        # レイアウトの設定
        sizer = wx.BoxSizer(wx.VERTICAL)
        sizer.Add(self.richTextCtrl, 1, wx.EXPAND | wx.ALL, 5)
        sizer.Add(insertImageButton, 0, wx.ALIGN_CENTER | wx.ALL, 5)
        sizer.Add(insertListButton, 0, wx.ALIGN_CENTER | wx.ALL, 5)
        panel.SetSizer(sizer)
        
        # フレームを表示
        frame.Show()
        return True

    def onInsertImage(self, event):
        # 画像を挿入
        imagePath = "path/to/your/image.png"  # 画像のパスを指定
        if wx.FileExists(imagePath):  # 画像ファイルが存在するか確認
            self.richTextCtrl.WriteText("\nここに画像を挿入します:\n")
            self.richTextCtrl.WriteImage(wx.Image(imagePath, wx.BITMAP_TYPE_PNG))
        else:
            wx.MessageBox("画像ファイルが見つかりません。", "エラー", wx.OK | wx.ICON_ERROR)

    def onInsertList(self, event):
        # リストを挿入
        self.richTextCtrl.WriteText("\nリスト:\n")
        self.richTextCtrl.BeginNumberedBullet(1, 1)  # 番号付きリストの開始
        self.richTextCtrl.WriteText("項目1\n")
        self.richTextCtrl.WriteText("項目2\n")
        self.richTextCtrl.WriteText("項目3\n")
        self.richTextCtrl.EndNumberedBullet()  # リストの終了

# アプリケーションの実行
app = MyApp()
app.MainLoop()

このコードでは、以下の処理を行っています。

画像挿入ボタンとリスト挿入ボタンを作成し、それぞれのボタンがクリックされたときに対応するメソッドが呼び出されるように設定します。
onInsertImageメソッド内で、指定したパスの画像をInsertImageメソッドを使って挿入します。
onInsertListメソッド内で、BeginListメソッドを使用して箇条書きリストを開始し、WriteTextメソッドでリスト項目を追加します。

最後にEndListメソッドでリストを終了します。

このようにして、wx.RichTextCtrlを使用することで、画像やリストを簡単に挿入することができます。

次のセクションでは、イベント処理とユーザー操作について詳しく見ていきます。

イベント処理とユーザー操作

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

これにより、インタラクティブなアプリケーションを作成することが可能です。

以下のサンプルコードでは、テキストが選択されたときにその内容を表示する方法を示します。

import wx
import wx.richtext  # wx.richtextモジュールをインポート

class MyApp(wx.App):
    def OnInit(self):
        # フレームの作成
        frame = wx.Frame(None, title="イベント処理の例", size=(400, 300))
        
        # パネルの作成
        panel = wx.Panel(frame)
        
        # wx.RichTextCtrlの作成
        self.richTextCtrl = wx.richtext.RichTextCtrl(panel, style=wx.VSCROLL | wx.HSCROLL | wx.NO_BORDER | wx.WANTS_CHARS)
        
        # イベントハンドラの設定
        self.richTextCtrl.Bind(wx.EVT_TEXT, self.onTextChange)
        self.richTextCtrl.Bind(wx.EVT_LEFT_UP, self.onTextSelect)
        
        # レイアウトの設定
        sizer = wx.BoxSizer(wx.VERTICAL)
        sizer.Add(self.richTextCtrl, 1, wx.EXPAND | wx.ALL, 5)
        panel.SetSizer(sizer)
        
        # フレームを表示
        frame.Show()
        return True

    def onTextChange(self, event):
        # テキストが変更されたときの処理
        print("テキストが変更されました。")

    def onTextSelect(self, event):
        # テキストが選択されたときの処理
        selection = self.richTextCtrl.GetStringSelection()
        if selection:
            wx.MessageBox(f"選択されたテキスト: {selection}", "選択されたテキスト", wx.OK | wx.ICON_INFORMATION)
        event.Skip()  # イベントをスキップして他の処理も実行可能にする

# アプリケーションの実行
app = MyApp()
app.MainLoop()

このコードでは、以下の処理を行っています。

EVT_TEXTイベントを使用して、テキストが変更されたときにonTextChangeメソッドが呼び出されるように設定します。
EVT_LEFT_UPイベントを使用して、マウスの左ボタンが離されたときにonTextSelectメソッドが呼び出されるように設定します。
onTextChangeメソッド内では、テキストが変更されたことをコンソールに表示します。
onTextSelectメソッド内では、選択されたテキストを取得し、メッセージボックスで表示します。

このようにして、wx.RichTextCtrlを使用することで、ユーザーの操作に応じたイベント処理を簡単に実装することができます。

次のセクションでは、wx.RichTextCtrlを使った実践例について詳しく見ていきます。

応用的な使い方

wx.RichTextCtrlは、基本的なテキスト編集機能だけでなく、さまざまな応用的な使い方が可能です。

ここでは、カスタムフォーマットの保存や、複数の書式を同時に適用する方法について説明します。

以下のサンプルコードでは、選択したテキストに異なる書式を適用し、内容をファイルに保存する機能を実装しています。

import wx
import wx.richtext as rt

class MyApp(wx.App):
    def OnInit(self):
        # フレームの作成
        frame = wx.Frame(None, title="応用的な使い方の例", size=(400, 300))
        
        # wx.RichTextCtrlの作成
        self.richTextCtrl = rt.RichTextCtrl(frame, style=wx.VSCROLL | wx.HSCROLL | wx.NO_BORDER | wx.WANTS_CHARS)
        
        # 書式設定ボタンの作成
        formatButton = wx.Button(frame, label="書式を設定")
        formatButton.Bind(wx.EVT_BUTTON, self.onFormatText)
        
        # 保存ボタンの作成
        saveButton = wx.Button(frame, label="内容を保存")
        saveButton.Bind(wx.EVT_BUTTON, self.onSaveContent)
        
        # レイアウトの設定
        sizer = wx.BoxSizer(wx.VERTICAL)
        sizer.Add(self.richTextCtrl, 1, wx.EXPAND)
        sizer.Add(formatButton, 0, wx.ALIGN_CENTER | wx.ALL, 5)
        sizer.Add(saveButton, 0, wx.ALIGN_CENTER | wx.ALL, 5)
        frame.SetSizer(sizer)
        
        # フレームを表示
        frame.Show()
        return True

    def onFormatText(self, event):
        # 選択したテキストに書式を設定
        attr = rt.RichTextAttr()
        attr.SetFont(wx.Font(14, wx.FONTFAMILY_DEFAULT, wx.FONTSTYLE_ITALIC, wx.FONTWEIGHT_BOLD))
        attr.SetTextColour(wx.Colour(0, 0, 255))  # 青色に設定
        self.richTextCtrl.SetStyle(self.richTextCtrl.GetSelectionRange(), attr)

    def onSaveContent(self, event):
        # 内容をファイルに保存
        with wx.FileDialog(None, "ファイルを保存", wildcard="Rich Text Files (*.rtf)|*.rtf",
                           style=wx.FD_SAVE | wx.FD_OVERWRITE_PROMPT) as fileDialog:
            if fileDialog.ShowModal() == wx.ID_OK:
                path = fileDialog.GetPath()
                self.richTextCtrl.SaveFile(path, rt.RICHTEXT_TYPE_RTF)  # ファイルに保存

# アプリケーションの実行
app = MyApp()
app.MainLoop()

このコードでは、以下の処理を行っています。

書式設定ボタンと保存ボタンを作成し、それぞれのボタンがクリックされたときに対応するメソッドが呼び出されるように設定します。
onFormatTextメソッド内で、選択したテキストに対して斜体の太字フォントと青色のテキスト色を設定します。
onSaveContentメソッド内で、wx.FileDialogを使用してファイル保存ダイアログを表示し、選択されたパスにリッチテキストを保存します。

このように、wx.RichTextCtrlを使用することで、カスタムフォーマットの適用やファイルへの保存など、さまざまな応用が可能です。

これにより、よりリッチなユーザーインターフェースを持つアプリケーションを作成することができます。

次のセクションでは、wx.RichTextCtrlを使った実践例について詳しく見ていきます。

wx.RichTextCtrlを使った実践例

ここでは、wx.RichTextCtrlを使用した簡単なテキストエディタの実践例を紹介します。

このアプリケーションでは、ユーザーがテキストを入力し、書式設定や画像の挿入、内容の保存ができる機能を実装します。

以下のサンプルコードを見てみましょう。

import wx
import wx.richtext as rt

class TextEditor(wx.Frame):
    def __init__(self):
        super().__init__(None, title="簡易テキストエディタ", size=(600, 400))
        
        # wx.RichTextCtrlの作成
        self.richTextCtrl = rt.RichTextCtrl(self, style=wx.VSCROLL | wx.HSCROLL | wx.NO_BORDER | wx.WANTS_CHARS)
        
        # メニューバーの作成
        menuBar = wx.MenuBar()
        fileMenu = wx.Menu()
        saveItem = fileMenu.Append(wx.ID_SAVE, "保存\tCtrl+S", "内容を保存")
        fileMenu.AppendSeparator()
        exitItem = fileMenu.Append(wx.ID_EXIT, "終了\tCtrl+Q", "アプリケーションを終了")
        menuBar.Append(fileMenu, "&ファイル")
        self.SetMenuBar(menuBar)
        
        # イベントハンドラの設定
        self.Bind(wx.EVT_MENU, self.onSaveContent, saveItem)
        self.Bind(wx.EVT_MENU, self.onExit, exitItem)
        
        # フレームを表示
        self.Show()

    def onSaveContent(self, event):
        # 内容をファイルに保存
        with wx.FileDialog(self, "ファイルを保存", wildcard="Rich Text Files (*.rtf)|*.rtf",
                           style=wx.FD_SAVE | wx.FD_OVERWRITE_PROMPT) as fileDialog:
            if fileDialog.ShowModal() == wx.ID_OK:
                path = fileDialog.GetPath()
                self.richTextCtrl.SaveFile(path, rt.RICHTEXT_TYPE_RTF)  # ファイルに保存

    def onExit(self, event):
        self.Close()  # アプリケーションを終了

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

このコードでは、以下の機能を実装しています。