wxFormBuilderでwxPythonのGUIコード自動生成

  • このエントリーをはてなブックマークに追加

PythonでGUIプログラミングをするのは結構面倒です。標準のTkinterは比較的簡単ですが、やはりレイアウトを作り込むのが面倒なのは変わりません。ここではwxPythonのレイアウトを自動コーディングしてくれるwxFormBuilderを紹介します。

こんにちは。wat(@watlablog)です。ここでは面倒なGUIレイアウトコードを自動生成してくれるwxFormBuilderを使ってみます

本記事のモチベーション

GUIプログラミングに時間をかけたくない

GUIGraphical User Interface)プログラムとは、ユーザが画面上でマウス等を使って簡単に操作できるよう配慮したインターフェースを使って、ウィンドウ上にボタンやプルダウンメニュー等を配置したプログラムを意味します。

Advertisements

当ブログのほとんどの記事はCUICharacter User Interface)で完結しています。自分で使うことを前提とした多くの技術計算コードはそれで問題ないのですが、他人に使ってもらう時はGUIプログラムの方が説明ドキュメントを少なくできるため一定の需要があります。

このブログでも「Python初心者がGUI作成にTkinterを使う3つの理由」という記事で、Python標準ライブラリであるTkinterを紹介し、簡単なGUIを組むことができるようになりました。

しかし日本語ドキュメントの多いTkinterを使ったとしても、GUIレイアウトを思い通りに作るのには結構時間がかかります。

プログラムのメインは目的の処理を行う部分なので、GUIで見栄えを良くする作業に多くの工数を使いたくないというのが1つ目のモチベーションです。

色々調べてみたところ、wxFormBuilderというソフトはGUIを使ってwxPython用のコードを自動生成してくれるとのこと。
今回は調査目的でちょっと使ってみた内容を紹介します!

wxPythonについてちょっと知りたくなった

単純にwxPythonについて知りたくなったというのもモチベーションの1つです。

wxPythonは標準ライブラリであるTkinterと比べて設置できるウィジェット(ステータスバーとか)が多いことや、見た目がTkinterよりもちょっとモダンという特徴があります。

まずは公式ドキュメントをご覧ください。

公式:https://www.wxpython.org/

ライセンスもwxWindowsライセンスで商用利用ができるとのこと(詳しくは公式のLicenseページをご確認ください)。

さらに、最近ではPython3系に対応(Phoenixバージョン)、pip installに対応し環境も改善しています。

ちょっと前はMacでpip installするだけだとコード実行時にエラーが出ていた問題も今回はなかったので、開発も進んでいるのではないでしょうか。

またwxPythonはwxWidgetsというクロスプラットフォームなGUIライブラリをPythonで使えるようにしたライブラリです。

検索の仕方によってはC++用のページがヒットする可能性もあるのでご注意を。

公式:https://www.wxwidgets.org/

pip install

ライブラリ本体はpipで簡単にインストール可能です。

公式チュートリアルをお試し

百聞は一見にしかずということで、上記公式ページのHello Worldコードを試してみましょう。

以下のようなウィンドウが表示されます。上のメニュー欄からPythonAboutを選択すると、OnAboutメソッドが実行される等、わかりやすいチュートリアルとなっていました。
ちゃんとdocStringも書いてある。

wxPythonのチュートリアル

Class形式、かつ各メソッドにeventが引数設定されています。これがイベントドリブンな書き方…というのでしょうか?

wxFormBuilderのインストール方法

wxFormBuilderについて

早速GUIコードを自動生成してくれるというwxFormBuilderを使ってみましょう。

wxFormBuilderはPythonだけでなく、C++やJavaといったその他のプログラミング言語へのコード生成も行うソフトウェアです。

公式はおそらく以下のGitHubと思いますので、詳細はこちらをご確認ください。

公式(GitHub):https://github.com/wxFormBuilder

インストール環境

ここではインストール方法について説明してみますが、今回は以下のMac環境にインストールして使ってみます。

Mac OS macOS Catalina 10.15.7
CPU 1.4[GHz]
メモリ 8[GB]

Python環境

本記事のPython環境は以下です。wxPythonは2022年5月時点で4.1.1がpip installされました。

Python Python 3.9.6
PyCharm (IDE) PyCharm CE 2020.1
wxPython 4.1.1

GitHubからインストーラをダウンロードする

ソフトウェアは以下のGitHubページからダウンロードします。

公式:https://github.com/wxFormBuilder/wxFormBuilder/releases

Assets欄にインストーラがあります。自分の環境に合ったディストリビューションを選びましょう。ここでは「wxFormBuilder-3.10.1-macos-10.15-x86_64-bundle.zip」を選びました。

Assets

インストールする

Macの場合はzipを解凍後、.appファイルをアプリケーションへドラッグ&ドロップすることでLaunchpadにインストール可能です。ここに登録しておけばDockへの追加もできるので使いやすくなります。

インストール先

インストール方法は以上…超簡単だったので、あえて説明しなくてもよかったかも知れません。

wxFormBuilderの使い方

出力言語設定

wxFormBuilderを起動すると以下の画面が表示されます。

ソフト起動後の画面

左ツリーのMyProject1が選択された状態で右のPropertiesをクリックします。
次にcode_generationを展開し、Pythonにのみチェックを付けます(C++はチェックを外します)。

このチェックによりPythonのwxWidgetコードが出力されるようになります。

出力言語設定

出力ファイル設定

Propertiesのfile欄が空欄になっているので、ここに出力ファイル名を記入します。ここでは「Application」と記入しましたが、ここで設定した名前で親フレームクラスが記載されたApplication.pyが出力されるようになります。

出力ファイル設定

レイアウトを作り込む

ここからはレイアウトを作り込んでいきます。今回は動作確認のために単一のフレームにボタンとテキストを配置させてみます。

FrameとSizerの追加

wxPythonの基本はFrameの作成→Sizerの作成→ボタン等のウィジェットの作成…という順で行います。

wxFormBuilderでFrameを追加するには、FormsタブをクリックしてFrameをクリックするだけです。

Frameの追加

SizerはLayoutタブから選定します。今回はwxBoxSizerを選びました。

Sizerの追加

ちなみにSizerの中にウィジェットを配置することで、フレームのサイズ変更等に適切に追従させることが可能となります。

Buttonの追加

ボタンはCommonタブから選択します。今回はwxButtonを選びました。

ボタンの追加

テキストの追加

wxStaticTextのような静的テキストもCommonタブの中にあります。

テキストの追加

イベントを設定する

次にボタンがクリックされた時のイベントを設定します。

ツリーの中からイベントを設定するButtonを選択し、右側のEventタブを選択します。OnButtonClickをダブルクリックすることで、隣のセルにイベント名が登録されます。

イベントの設定

ここで登録されたイベントに後で動作をコーディングします。

見栄えを整える

ここではあまりいじりませんが、フレームのサイズがマウスで変更できるのはもちろんのこと、中央揃えや幅調整といった操作もソフト上で可能です。最初は慣れが必要だと思いますが、楽…なのかな?

以下は操作例の動画です。

プロジェクトを保存する

File→Save As...でプロジェクトを保存します。このプロジェクトを保存したディレクトリにコードが出力されるので、場所は選びましょう。

親フレームクラスのコード(.py)を出力する

File→Generate Codeにより親フレームクラスのコードを出力します。

親フレームクラスの出力

子フレームクラスのコード(.py)を出力する

Tools→Generate Inherited Classにより子フレームクラスのコードを出力します。

子フレームクラスの出力

以下のウィンドウが表示されるので、MyFrame1にチェックを付けてからOKをクリックします。

子フレームクラスの出力2

プロジェクトファイルの場所に以下のファイルが出来上がります。ひとまずこれでwxFormBuilderの操作は終了です。

出来上がったファイル

Application.pyの中身

ここで一度各Pythonファイルの中身を見てみましょう。
まずはApplication.pyです。

このファイルは「PLEASE DO *NOT* EDIT...」と書いてある通り、編集しないでおきます。スタイル系の記述がクラス形式で書いてあります。

MyProject1MyFrame1.pyの中身

こちらのファイルを編集します。作ったばかりの状態は設定したイベントの中身がpassになっており、コメントで# TODOと書いてあります。

ちなみにこのファイルのクラスは先ほどのApplication.pyをimport、親フレームのクラスを継承して書かれています。

Pythonコードを完成させて動作させる

子フレームクラスにイベント時の動作を記述する

子フレームクラスが書いてあるMyProject1MyFrame1.pyについて、passとなっていた部分にイベント発生時(ここではボタンがクリックされた時)の動作を記述します。

以下のコードは「self.m_staticText1.SetLabelText()」で静的テキストの文字を変更してみました。Application.pyの中身を見れば操作対象のメソッド名を確認できます。

さらに、PyCharm等のIDEを使っていれば、コード入力サポートが付いているので特にメソッド名を覚えていなくても割とカンでなんとか書けてしまいます。

main.pyを作って実行する

wxPythonのチュートリアルを思い出しながら、main.pyと新しいPythonファイルを作成して実行できるようにすれば完成です。

実行結果の例

なんともしょぼいプログラムですが、最初は最低限の内容で型を把握することが大事だと思います。

まとめ

今回は自動でGUIプログラムを作ってくれるwxFormBuilderを使ってみました。

このページではwxPythonやwxFormBuilderの簡単な紹介、公式ドキュメントの紹介、インストール方法や使用例を紹介しました。

wxPythonにはまだ慣れていませんが、GUIベースでGUIコードを書けるのは楽なのかも知れません。

まだ複雑なレイアウトに挑戦していないので、本当に使いやすいかどうかはこれから判定を下すとして、少なくともwxPythonのコードを書く時のお手本にはなりそうです。

GUIにはあまり時間をかけたくないという人にとって、一つの選択肢になり得るか…今後に期待。

GUIはこだわり始めると時間が溶けそうですが、簡単に作れるようになりたいですね!
Twitterでも関連情報をつぶやいているので、wat(@watlablog)のフォローお待ちしています!

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*