はじめに

前回はPyQt5のHelloWorldをしました。

今回は Qt Creator を使って、GUIを楽に実装します。

前回の復習

Qt Creatorは、Qtアプリケーションを作成するためのクロスプラットフォームの統合開発環境です。
様々なプラットフォーム向けのクロスプラットフォームアプリケーションを開発するために使用されます。

公式ページはこちらになります。

Qt Designerとは

Qt Designer　は、PyQtやPySideといったPythonのGUIツールキットと組み合わせて使うことができるGUIエディタです。
Qt Designerを使用することで、ビジュアルにウィンドウやダイアログボックスを作成し、その後にPythonコードを生成することができます。

Qt Designerは、あくまでもQt Creatorの一部です。
Qt Designerは、Qt Creatorの中でGUIを設計し、その後に生成された.uiファイルをPythonコードに変換することができます。

Qt Designerを使う利点

普通にPythonでコードを書いてGUIを作ることもできますが、
GUIをQt Designerを使って作るメリットはいくつかあります。

ビジュアルなデザイン

Qt Designerでは、GUIの要素をドラッグ＆ドロップで配置できます。

少し画像は小さいですが、Qt Designerでの作業画面はこのようになっています。
コードを書く必要がないため、GUIのデザインが容易になります。

時間とコストの節約

コードを書く必要がないため、開発時間が短縮されます。
また、GUIを設計するためのリソースやデザイナーを雇う必要がなくなるため、開発コストも削減できます。

コードの分離

GUIの設計者はデザインに集中し、開発者はGUIの実装に集中できます。
これにより、開発作業が効率化されます。

手順

実際にQt Designerを使って、GUIを作ってみます。

1. Anacondaのインストール

まずはこちらのサイト等を参考に、Anacondaをインストールします。

2. 仮想環境の作成

Anaconda Navigatorを開いて、仮想環境を作成します。
① 左側のメニューから「Environments」を選択し、「Create」をクリックする。
② 新しい仮想環境の名前("pyqt"など)を入力し、「Create」をクリックする。
③ 作成した仮想環境を選択し、「Open Terminal」をクリックして、ターミナルを開く。
④ ターミナルで以下のコマンドを実行して、Qt Designerをインストールする。

conda install pyqt

⑤ インストールが完了したら、以下のコマンドを実行して、Qt Designerを起動する。

designer

3. QtDesignerの準備

実行すると以下のような画面となるはずです。（画面右側はだいぶ違うと思います）

ファイル→新規と進み、次の画面でここでは「Main Window」を選択します。

4. QtDesignerでGUI作成

今回はこのようなフォームを作成してみようと思います。完成形は以下です。
（こちらの例を参考にしました）。

フォームの作成

左側にあるウィジェットツールボックスから使用したいウィジェットをドラッグ＆ドロップしてフォームに配置します。
ここでは、Label×3・LineEdit×2・PushButton を配置しました。

ウィジェットのプロパティの編集

フォームに配置したウィジェットをクリックすると、右側にそのウィジェットのプロパティエディタが表示されます。
ここでは、テキストやフォント、サイズ、位置などのプロパティを編集できます。

まずはフォーム全体のサイズを調整します。
ウィジェットの上でクリックすると以下のようなプロパティエディタが表示されます。

私は「幅」「高さ」を調整しました。

次に、Passwordを入力する欄で、入力内容を「●」でマスクされるようにします。
プロパティエディタで以下のように設定を変更します。

最後に"submit"ボタンの文字を太字にし、背景色を青色にします。

プロパティエディタで以下のように設定を変更します。

また、"submit"ボタンの上で右クリックし、「スタイルシートを変更」を選択します。
スタイルシートの中で以下のように設定を変更します。

スタイルシートの記述方法はCSSと似ています。必要に応じて、さまざまなプロパティを設定できます。

.uiファイルの保存

ファイル→名前を付けて保存と進み、任意の場所に.uiファイルを保存します。

5. Pycharmの環境設定

ここまでで作成したuiファイルをpyファイルに変換するためには、"pyuic5"コマンドを使う必要があります。
前回の記事でPyQt5のインストールがPycharm上で済んでいるはずです。

しかし、"pyuic5"のパスが通っていない場合は、パスを追加する必要があるかもしれません。
そのため、環境変数を追加する必要がある可能性があります。

PyCharmでの作業フォルダ内にある、"pyuic5.exe" のパスを、環境変数に追加します。

6. Pycharmでの実行

ターミナルに以下のコマンドを入力し、Enterキーを押します。

pyuic5 -x uiファイル名.ui -o pyファイル名.py

コマンドが正常に実行されると、指定された場所にPyファイルが作成されます。

form.py

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

# Form implementation generated from reading ui file 'form3.ui'
#
# Created by: PyQt5 UI code generator 5.15.9
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.


from PyQt5 import QtCore, QtGui, QtWidgets

# UIを定義するクラス
class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        # MainWindowの設定
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(260, 230)

        # 中央に配置されるWidgetの設定
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")

        # Emailアドレスのラベルの設定
        self.label_2 = QtWidgets.QLabel(self.centralwidget)
        self.label_2.setGeometry(QtCore.QRect(10, 10, 71, 16))
        self.label_2.setObjectName("label_2")

        # Emailアドレスの入力欄の設定
        self.EmailAdress = QtWidgets.QLineEdit(self.centralwidget)
        self.EmailAdress.setGeometry(QtCore.QRect(10, 30, 221, 20))
        self.EmailAdress.setObjectName("EmailAdress")

        # ラベルの設定
        self.label_3 = QtWidgets.QLabel(self.centralwidget)
        self.label_3.setGeometry(QtCore.QRect(10, 60, 241, 16))
        self.label_3.setObjectName("label_3")

         # パスワードのラベルの設定
        self.label_4 = QtWidgets.QLabel(self.centralwidget)
        self.label_4.setGeometry(QtCore.QRect(10, 90, 71, 16))
        self.label_4.setObjectName("label_4")

        # パスワードの入力欄の設定
        self.Password = QtWidgets.QLineEdit(self.centralwidget)
        self.Password.setGeometry(QtCore.QRect(10, 110, 221, 20))
        self.Password.setEchoMode(QtWidgets.QLineEdit.Password)
        self.Password.setObjectName("Password")

        # 送信ボタンの設定
        self.Submit = QtWidgets.QPushButton(self.centralwidget)
        self.Submit.setGeometry(QtCore.QRect(10, 160, 75, 23))
        font = QtGui.QFont()
        font.setBold(True)
        font.setWeight(75)
        self.Submit.setFont(font)
        self.Submit.setStyleSheet("background-color:#D3DEF1;\n"
"")
        self.Submit.setObjectName("Submit")

        # 中央Widgetの設定
        MainWindow.setCentralWidget(self.centralwidget)

        # メニューバーの設定
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 260, 21))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)

        # ステータスバーの設定
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

        # ラベルなどのテキストを翻訳する関数
        self.retranslateUi(MainWindow)

        # MainWindowのスロットをコネクトする
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):

        # QtCore.QCoreApplication.translateメソッドを使用するための設定
        _translate = QtCore.QCoreApplication.translate

        # MainWindowのタイトルを設定
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))

        # label_2のテキストを設定
        self.label_2.setText(_translate("MainWindow", "Email Adress"))

        # label_3のテキストを設定
        self.label_3.setText(_translate("MainWindow", "We\'ll never share your email with anyone else."))

        # label_4のテキストを設定
        self.label_4.setText(_translate("MainWindow", "Password"))

        # Submitボタンのテキストを設定
        self.Submit.setText(_translate("MainWindow", "Submit"))


if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    MainWindow = QtWidgets.QMainWindow()
    ui = Ui_MainWindow()
    ui.setupUi(MainWindow)
    MainWindow.show()
    sys.exit(app.exec_())

このpyファイルはuiファイルから生成されたものになります。
コメントは後から追加したものですが。

このファイルを保存した後、実行します
以下のようなウィンドウが表示されるはずです

最後に

これでQt Designerを使ってのGUI作成は終了です。
次回はボタンなどを押したときのアクションを設定します。

PyQt5勉強②