mtazmi-Lab: [PySide] PySideで遊んでみるよ

ご無沙汰しております。

最近めっきり更新をさぼっておりましたが、
仕事納めも済んだことだし、冬休み期間にまたいろいろ書けたらなと。

そんでネタ何にしよかなと思ったんですが、
今年やってたことを振り返ると、mayaをそんなにガツガツいじってないんですよ。

ほとんど、mayaの外で動かすpythonスクリプト作ってました。
あと無駄にUI作りこんだりして現実逃避したり。

あ、ネタあったぞ。これにしよう。

というわけで今回はPySideで遊びます。

●遊ぶ環境を整える

※これは個人で遊ぶのが目的ですので、会社の開発環境などには向かない場合があります

まずはpython本体とPySideをインストールしましょう！
両方のバージョンは合わせないとたぶんダメです。
（python2.7系ならPysideも2.7用を選んでください）

・python

Download Python

・PySide

PySide -> Downloads | Qt Wiki | Qt Project
下のほうにOSごとのリンクがあります。

インストールができたらとりあえずシェルとかでインポート出来るかテストしてみましょう

import PySide

まぁ、何も出ないんですが。。
エラー出なければインポート出来てます

●QtDesinerでUI作るよ

UI構築をゼロからフルスクラッチとか大変なので、QtDesignerを使って作ります
この記事はあくまで気楽にやることが目的なので

Pythonインストールディレクトリ\Lib\site-packages\PySide\designer.exe
でQtDesignerを起動します

最初に出てくるウインドウで、Main Window か Widget を選択してください

Label で文字を、Push Button でOKボタンを、ほかには Spin Box や Progress Bar などを
ウインドウへドラッグしていけばさくっとUIが出来ます

右側にある Object Inspector にUIの部品のツリーがありますが
これを面倒ですがきちんと名前を付けておいてください
（あとでスクリプトを作るときに使います）

形が出来たら、名前をつけてUIファイルを保存します

●UIファイルをスクリプトで読み込ませる

保存した .uiファイル と同じ場所に以下のようなスクリプトを作ります
大体いつもこれから始めます

# -*- coding: utf-8 -*-

import os
import sys

from PySide import QtCore, QtGui
from PySide.QtUiTools import QUiLoader

CURRENT_PATH = os.path.dirname(__file__)

#----------------------------------------------------------------------------
## GUIを作るクラス
class GUI(QtGui.QMainWindow):

    def __init__(self, parent=None):
        super(GUI, self).__init__(parent)
        loader = QUiLoader()
        uiFilePath = os.path.join(CURRENT_PATH, 'blogUI.ui')
        self.UI = loader.load(uiFilePath)
        self.setCentralWidget(self.UI)

#------------------------------------------------------------------------------ 
## GUIの起動
def main():
    app = QtGui.QApplication(sys.argv)
    ui = GUI()
    ui.show()
    sys.exit(app.exec_())


if __name__ == '__main__':
    main()

#-----------------------------------------------------------------------------
# EOF
#-----------------------------------------------------------------------------

■import部分

・from PySide import QtCore, QtGui
　→　QtのUIを作るための基本的なモジュール
・from PySide.QtUiTools import QUiLoader
　→　uiファイルを読み込むためのモジュール

・CURRENT_PATH = os.path.dirname(__file__)
　→　スクリプト置き場のディレクトを取得しています
　　　これにより、後で同じフォルダ内のuiファイルを読み込むという処理につなげます

■GUIクラスの中でやってること

・super(GUI, self).__init__(parent)
　→　QtGui.QMainWindow のクラスを継承して空のUIを作ります
・loader = QUiLoader()　～　self.UI = loader.load(uiFilePath)
　→　ここでuiファイルを読み込んで構築しています
・self.setCentralWidget(self.UI)
　→　空のUIに読み込んで構築したUIを入れ込みます

■main関数でやっていること

・app = QtGui.QApplication(sys.argv)
　→　アプリケーションオブジェクトを作成しています
・ui = GUI()
　→　GUIクラスのインスタンスを作りUIを構築します
・ui.show()
　→　UIを表示します
・sys.exit(app.exec_())
　→　アプリケーションオブジェクトをメインループで動かすってことらしいです

実行するとUIが表示されたでしょうか？

●bat起動にしてみる

毎回シェルとかから実行するのめんどくさいじゃないですか
なので、batで起動できるようにします

@echo off
"C:\Python\Python27\python.exe" D:\python\blog_project\blogGUI.py
pause

パスとかおもっきし出てますが、こんな感じに python.exe のパスとスクリプトパスを書きます
batを実行してさっきのUIが表示されれば成功です

●アイコンを作る

なんでだよ、というツッコミは待ってくださいｗ

フォトショのシェイププリセットでさくっとそれなりに作成
抜きが必要な場合は、アルファ付きのレイヤーのまま32bitBMPで保存して、
拡張子を.icoに変更します

アイコンが出来たら、さっきのbatのショートカットを作り
名前の「.bat - ショートカット」の部分は消してしまいましょう

ショートカットのプロパティで アイコンの変更 で作ったアイコンを指定します

そしたらほら！
なんか普通のアプリケーションぽいじゃないですかｗ
こうしておくと面倒なビルドをしなくても、それっぽい感出てモチベーション上がります

ゴミ箱とコラボ

●いい加減動作部分を作る

PySideのドキュメントはここにあるので参考にしながら、、
Overview — PySide v1.0.7 documentation

# -*- coding: utf-8 -*-

import os
import sys
import time

from PySide import QtCore, QtGui
from PySide.QtUiTools import QUiLoader

CURRENT_PATH = os.path.dirname(__file__)

#----------------------------------------------------------------------------
## GUIを作るクラス
class GUI(QtGui.QMainWindow):

    def __init__(self, parent=None):
        super(GUI, self).__init__(parent)
        
        # uiファイルのロード
        loader = QUiLoader()
        uiFilePath = os.path.join(CURRENT_PATH, 'blogUI.ui')
        self.UI = loader.load(uiFilePath)
        self.setCentralWidget(self.UI)
        
        # ウインドウのタイトルを指定
        self.setWindowTitle(u'UIのサンプルだよ')
        # ウインドウのサイズを指定
        self.resize(256, 128)
        
        # ウインドウのアイコンを設定
        iconPath = os.path.join(CURRENT_PATH, 'icon.png')
        icon = QtGui.QIcon(iconPath)
        self.setWindowIcon(icon)
        
        # UI要素にシグナルを追加
        self.setSignals()

    #----------------------------------------
    ## シグナルの登録
    # @param None
    # @return None
    def setSignals(self):
        # okボタンを押したときの動作
        self.UI.ok_pushButton.clicked.connect(self.doIt)

    #----------------------------------------
    ## スピンボックスの値を取得
    # @param None
    # @return < int >value : スピンボックスの値
    def getSpinBoxNum(self):
        value = self.UI.num_spinBox.value()
        return value

    ## スピンボックスの数だけ処理を実行し、プログレスバーを進める
    def doIt(self):
        # スピンボックスの数を取得　→　処理する回数
        maxNum = self.getSpinBoxNum()
        
        # プログレスバーの最大値を取得したスピンボックスの数に指定
        self.UI.progressBar.setMaximum(maxNum)
        
        # 処理する回数分ループを回す
        for current in range(maxNum):
            # ここに実際の処理が入ってるテイで
            print '*' * (current+1)
            # 1秒くらい処理かかるというつもり
            time.sleep(1)
            
            # 処理が終わったらプログレスバーを進める
            self.UI.progressBar.setValue(current+1)

        # ループを抜けたあと一応最大値で埋めておく
        self.UI.progressBar.setValue(maxNum)

        # 以上！


#------------------------------------------------------------------------------ 
## GUIの起動
def main():
    app = QtGui.QApplication(sys.argv)
    ui = GUI()
    ui.show()
    sys.exit(app.exec_())


if __name__ == '__main__':
    main()

#-----------------------------------------------------------------------------
# EOF
#-----------------------------------------------------------------------------

ちょっと1行ずつ解説するのが大変なので、コメントに説明入れましたｺﾞﾒﾝﾅｻｲ

QtDesinerのときにUIの部品にきちんと名前を付けておけと言っていたのは
コーディングする際に、そのままアトリビュート名になるからです
（self.UI.ok_pushButton、self.UI.num_spinBoxのように）

出来たらさっきのショートカットから起動して、スピンボックスの数を適当に増やしてOKボタンを押してみましょう！
スピンボックスの数分プログレスバーがちょっとずつ伸びていく動作になったでしょうか？

長々と書いてしまいましたが、お手軽にそれなりにちゃんとしてる感じになる
UI付きツール開発についてまとめてみました

参考になればさいわいでーす

mtazmi-Lab

2012/12/30

[PySide] PySideで遊んでみるよ