PySideによるGUIプログラミングPySideのGUI作成方法PySideのGUI作成方法には2種類の方法があります。「1直打ちする方法」と、「2QtDesignerを利用する方法」です。前者はプログラムコード内に直接記述し、後者はツールを使います。個人的に1の方がGUI作成にあたってのPySideの理解が進むと思うので、今回はこちらを採用します。PySideではざっくり言うと、下のようにレイアウトとウィジェット(GUI部品)をそれぞれ入れ子構造にしていくことでGUIを作成します。レイアウトに関して主なものを挙げると、孫レイアウトのように要素を水平方向に並べるもの、子レイアウトのように要素を鉛直方向に並べるもの、グリッド上(格子状)に要素を並べるものがあります。GUIを作成する中では、水平レイアウトと鉛直レイアウトおよび少し特殊なレイアウトを使っていきます。グリッドレイアウト(のようなもの)はPyQtGraphを扱う中で使うことになります。実際にGUIをプログラム内で記述していく際には、中身から作成していくのが基本です。親レイアウトをウィンドウのメインレイアウトとして設定という流れを組んだコードを書いていくことになります。PySideによるGUIプログラミングさっそくGUIを作成していきましょう。以下、上から順にコードを記載し説明していきます。前回の[4]__init__()の中に順次書き足していってください。関数全文は一番最後に載せておきます。self.setWindowTitle('おれおれグラフ生成アプリケーション')GUIプログラミングにおいては、アプリケーション名を決めるという作業は非常に神聖な儀式です。[4-1]のようにsetWindowTitle()関数を用いれば、自分のアプリケーションに命を吹き込むことが出来ます。この時点で起動すると中身は相変わらずまっさらですが、タイトルバーとタスクバーに自分の命名した名前が表示されるようになりました。味気なさが少しなくなったように感じませんか?......そうですか。ちなみに、self.setWindowIcon()関数でアイコンを設定することも可能です。用意するのが面倒なのでここでは割愛します。self.fileNameListWidget.setSelectionMode(QAbstractItemView.ExtendedSelection)続いて[4-2]でデータを整形する際に使うfloat型の係数を2つ用意します。[4-3]で今回のアプリケーションに必要なGUI部品であるQLabel(ラベル)、QLineEdit(一行テキストボックス)、QListWidget(リストウィジェット)、QPushButton(ボタン)の生成しています。QLabel、QLineEdit、QPushButtonは引数に文字列を置くことで、生成と同時にウィジェット内部にその文字列を表示させることが出来ます。folderPathEditは、後ほどファイル一覧を表示するために、ディレクトリーを入力するテキストボックスとして生成しています。ここではとりあえず、このプログラムファイル(graphApp.py)があるフォルダを相対パスで指定することとします。実験結果のデータファイルのあるフォルダが決まっているときはそこを指定しておくと楽ですし、設定ファイルを作れば前回開いていたディレクトリを引き継ぐことも可能です。[4-4]では、QListWidgetであるfileNameListWidgetが中身を複数選択できるように設定し直しています。この辺り、各GUI部品の様々な設定項目や機能についてはPySideのリファレンスをご参照ください。GUI部品を生成したところでプログラムを起動してみても、ウィンドウの中身はまっさらなままです。レイアウトの生成・設定をまだ行っていないからです。600)[4-5]にてPyQtGraphのウィジェットであるLayoutWidgetを生成しています。前回述べたように、PyQtGraphはPySide(Qt)を派生させたグラフ描写に特化したGUIライブラリーです。LayoutWidgetも実は継承元はQWidgetというウィジェットなので、PySideのレイアウトに設置することが出来ます。詳細は次々回に説明することとします。ウィジェットを増やしただけなので、相変わらず起動してもウィンドウに変化はありません。次にレイアウトを作成していきましょう。layout.addWidget(self.lw)今回のアプリケーションに使用するレイアウトは、[4-6]の通りQFormLayout、QVBoxLayout、QHBoxLayoutの3つです。QFormLayoutはフォーム画面にありがちな左にラベル、右にテキストボックスやラジオボタンという構図を簡単に作るためのレイアウトです。addRow()関数を用いて、ラベルと各種ウィジェットを1セットとしてレイアウト内に追加します。対してQVBoxLayout、QHBoxLayoutは鉛直(Vertical)、水平(Horizontal)方向に要素を並べられるレイアウトです。addWidget()関数の他、addLayout()関数を用いることで、入れ子構造を持ったより複雑なGUIを作成することが出来ます。ここでプログラムを起動すると......相変わらず何も変りません。最後に「親レイアウト(layout)をウィンドウのメインレイアウトに設定」する必要があります。self.setLayout(layout)[4-7]のsetLayout()関数により、このアプリケーションのウィンドウのメインレイアウトにlayoutを設定します。これでようやくウィンドウの中に下のようなGUIを表示できるようになります。これでこのまとめで開発していくグラフ生成アプリケーションの基本形が完成しました。親レイアウトをウィンドウのメインレイアウトとして設定の手順を踏むことで、意外なほど簡単にそれっぽいGUIを持ったアプリケーションを作れてしまったのではないでしょうか。各レイアウトはaddする順番で上から(左から)要素が並んでいきます。順番を変えたり、他のGUI部品を追加したりしながら、ぜひ自分なりの「おれおれ」GUIを見つけてください。GUIが完成したところではありますが、もう少しだけ続きます。self.folderPathEdit.text())シグナルスロットの話は次節で述べますので[4-8]の話は一旦置いておきます。最後に、そのままだと空なfileNameListWidgetに[4-9]updateFileNameListWidget()関数を使って、起動と同時に規定のフォルダのファイル一覧を表示することとします。updateFileNameListWidget()関数の処理部は未実装ですので、現時点では起動と同時にupdateFileNameListWidgetとコマンドプロンプト(ターミナル/端末)に出力されるだけです。シグナルとスロットPySideにおける初期化関数[4]__init__()は、GUIの作成と共に、[4-8]シグナルとスロットの接続を大きな役割としています。手続き型のCUIプログラムのような、上から順に「名前と身長と体重を入力するとBMIを出力する」といった処理を行えばいいものとは異なり、GUIアプリケーションでは任意のタイミング、任意の順に操作されるボタンやテキストボックスに対応した処理を行う必要があります。この所謂イベント駆動型なプログラミングを行うために、PySide(Qt)では上記のシグナルとスロットという仕組みが用意されています。[4-8]に話を戻して即して説明を行います。self.fileNameListWidget.selectedItems()[0].text()))上のコードではシグナルスロットの仕組みを利用し、以下の二つの動作を実現しています。リストウィジェットのファイル一覧を更新するが対応しています。コードの意味としては、テキストボックスが編集された(textEdited)というシグナルと、リストウィジェットを更新する(updateFileNameListWidget())関数をスロットにして、両者を結びつけて(connect()関数)いるわけです。シグナルスロット接続は、例えるならばリモコンとテレビでしょうか。ボタンが押されるとリモコンから発信される固有パターンの信号と、それに対応したテレビの機能(チャンネル変えたり音量上げたり)を、あらかじめ結びつけているといったところです。実際にシグナルスロット接続が出来ているか確認するためには、このアプリケーションを起動して、GUI上のfolderPathEditの中身を編集すればわかります。入力したり消去したりする毎にupdateFileNameListWidgetとコマンドプロンプト(ターミナル/端末)に出力されるはずです。シグナルにはこの他、ボタンがクリックされた(QButton.clicked)や、文章が選択された(QPlainTextEdit.selectionChanged)など、ウィジェット毎に様々なものが用意されていますし、自分で作成することも出来ます。lambda:とあるのはラムダ式というものを使ってるということなのですが、とりあえず覚えとくととても幸せになれます(ラムダ式を使うとスロットの関数に対して好き勝手に引数を与えられるようになるのです)。以上がPySideによるGUIプログラミングの話でした。次回は、今回処理部が未実装だったGUI上のリストウィジェットにファイル一覧を表示する関数を実装し、更にファイルを読み込んでグラフ描写に使うデータを生成するところまでを行います。人によっては解説必要な話でもないかと思うので、そのような場合は飛ばしてくださっても構いません。PyQtGraphによるグラフ生成3(体裁を整える編)以降未定......QtDesignerを利用したGUI作成について最後に『PySideのGUI作成方法』で挙げたGUI作成方法「2QtDesignerを利用する方法」について、簡単に説明だけしておきます。QtDesignerはPySideインストール時に同時にダウンロードさるGUIをGUI上で作成できるQtのツールです。「(Pythonインストール先)\Lib\site-packages\PySide」内に「designer.exe」等の名前で入っているはずなので起動して触ってみてください。今回、グラフ生成アプリケーションを作るために使ったGUI部品の他にも、非常にバラエティに富んだGUI部品が用意されていることがわかると思います。QtDesignerはD&Dでレイアウトやウィジェットを配置することができるので、簡単にGUIを作れて楽しいです。実際にはQtDesignerが生成する.uiファイルを、プログラム本体内でQtUiTools.QUiLoaderで読み込んで使うといった流れになります。