Anaconda附属のPyQt5とQtDesigerにてGUI作成

#はじめに
プログラム初心者＆投稿初心者です。
本記事の同内容がQiitaで見つからなかったので投稿しました。


#本記事のゴール
PyQt5とQtDesigerでGUI(ウィンドウ)の作成
ボタンを押したら"Helloworld"を表示される
#環境
Anaconda Version 5.3
Windows10.pro
Python 3.5

#STEP1：Anacondaで環境を構築
GUIという名前で新規create(Python 3.5)
SpyderとIPythonを導入します
SpyderでQtDesigerで作ったファイルを実行します

![無題.jpg](https://qiita-image-store.s3.amazonaws.com/0/292243/c722c27d-2506-06a3-43d0-1541abd0ce4c.jpeg)

#STEP2：QtDesigerの導入？
QtDesigerでUI作成するには本体とPyQt5が必要になります
早速インストール、、、しなくてもAnaconda導入時に一緒に入ってます！
Anacondaをデフォルトでインストールしていれば以下の場所にあるはず
C:\ProgramData\Anaconda3\Library\bin\designer.exe
みつからないならwindowsの検索機能でdesigner.exeを検索！
![kennsaku.jpg](https://qiita-image-store.s3.amazonaws.com/0/292243/7c1f306a-7eeb-6176-3cd9-a70c8d69d00c.jpeg)

#STEP3：QtDesigerでUI作成
designer.exeを立ち上げると新規ダイアログが出ます
ここではWidgetを選択し、作成をクリック
![QtDesigner.JPG](https://qiita-image-store.s3.amazonaws.com/0/292243/8d08d485-e2ad-edfb-fc15-090335e116f8.jpeg)

ウィジェットボックスからPushButtonとLabelをドラック&ドロップ
そしたらF4を押してシグナルスロットを編集します(メニューバー編集→シグナルスロットを編集でもOK)
PushButtonを押して、新規ダイアログにてclick()を選択
Formを編集を押し、緑＋ボタンを押してslot1()を作成し選択します
![sigunal.JPG](https://qiita-image-store.s3.amazonaws.com/0/292243/946c2b3d-589f-ed31-937c-3aff88ecc7db.jpeg)
![sigunal2.JPG](https://qiita-image-store.s3.amazonaws.com/0/292243/316d2bdc-44f4-b80c-263f-8b768183643f.jpeg)
作成したら↓のようになっていれば成功です

![QtDesigner3.JPG](https://qiita-image-store.s3.amazonaws.com/0/292243/258009db-17b7-fd39-d56e-6eeb28839efb.jpeg)
そしたら保存します
任意のディレクトリと任意のファイル名でOKです
場所：C:\QtUI
ファイル名：test.ui
で行いました。拡張子はuiのままにしておきます

#STEP4：UI(.ui)を.pyへ変換
STEP3で作成した.uiファイルをPythonで使えるように変換します
私の環境だとPythonのPATHがうまく通っていないため以下の方法で実施します

__windows__のコマンドシェル(PowerShell)でuiファイルを保存した場所に入ります
コマンドにてpyuic5を通して変換させます
pyuic5の場所はC:\ProgramData\Anaconda3\Library\bin\pyuic5

![コマンド.jpg](https://qiita-image-store.s3.amazonaws.com/0/292243/7036b763-1e23-613b-7d54-d739c422c1a7.jpeg)

```python
C:\ProgramData\Anaconda3\Library\bin\pyuic5 -o test.py test.ui
```
そしたら同じディレクトリに出力であるtest.pyが作成されるはずです
test.pyの中身は以下のようになります

```python　test.py
# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'test.ui'
#
# Created by: PyQt5 UI code generator 5.9.2
#
# WARNING! All changes made in this file will be lost!

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_Form(object):
    def setupUi(self, Form):
        Form.setObjectName("Form")
        Form.resize(400, 300)
        self.pushButton = QtWidgets.QPushButton(Form)
        self.pushButton.setGeometry(QtCore.QRect(160, 240, 75, 23))
        self.pushButton.setObjectName("pushButton")
        self.label = QtWidgets.QLabel(Form)
        self.label.setGeometry(QtCore.QRect(40, 60, 321, 171))
        self.label.setObjectName("label")

        self.retranslateUi(Form)
        QtCore.QMetaObject.connectSlotsByName(Form)

    def retranslateUi(self, Form):
        _translate = QtCore.QCoreApplication.translate
        Form.setWindowTitle(_translate("Form", "Form"))
        self.pushButton.setText(_translate("Form", "PushButton"))
        self.label.setText(_translate("Form", "TextLabel"))
```

__このtest.pyは編集しません！__
実行用のプログラム(main.py)を作成してそこからtest.pyをimportして実行するようにします


#STEP5：Spyderでプログラム作成と実行
Spyderにて実行プログラム(main.py)を作成します
同じディレクトリに保存しましょう
![spyder3.JPG](https://qiita-image-store.s3.amazonaws.com/0/292243/8581e057-74ff-6ae0-9170-d1d8d2faffd8.jpeg)





```python　main.py
# -*- coding: utf-8 -*-
import sys
from PyQt5 import QtWidgets
from test import Ui_Form
 
class Test(QtWidgets.QDialog):
  def __init__(self,parent=None):
    super(Test, self).__init__(parent)
    self.ui = Ui_Form()
    self.ui.setupUi(self)
  def slot1(self): #イベント処理の関数
    self.ui.label.setText('Hello World!')
 
if __name__ == '__main__':
  app = QtWidgets.QApplication(sys.argv)
  window = Test()
  window.show()
  sys.exit(app.exec_())
```
slot1()はPushbuttonをクリックすると呼び出されるようにSTEP3にて設定しましたね
よって以下の流れにて表示が行われます
Pushbuttonをクリック→slot1()→labelに'Hello World!'をセットする



そしたらSpyderのメニューバーにある実行ボタンにてmain.pyを実行！！
![spyder4.JPG](https://qiita-image-store.s3.amazonaws.com/0/292243/7fd85c46-2050-3280-fe3f-4634d58aba66.jpeg)

ウィンドウが表示され、PushButtonを押すとHello world！が表示されます![out.JPG](https://qiita-image-store.s3.amazonaws.com/0/292243/c439f61f-2d99-6fb9-2996-bd057f9023e1.jpeg)


#おわりに
PyQt5は商用利用する場合は有償らしいです
個人利用する分には問題ないはずです
GUIフレームワークがどれがいいのかよく分かっていないですが、
直感的に作成できるQtDesigner+QtPy5は使いやすいなと感じました

__<参考にさせていただいたURL>__
～PyQtをAnaconda3同梱のQtDesignerで作ってみる～
http://pineplanter.moo.jp/non-it-salaryman/2017/12/28/pyqt-designer/
～QtDesigner 使い方入門～
http://vivi.dyndns.org/tech/Qt/QtDesigner.html