今回は、Python Qtを使ってGUIアプリケーションを開発する方法を紹介します。
優れたユーザーインターフェイスがなければ、もはや大衆に通用するツールは期待できません。
そのため、アプリケーションのシンプルなインターフェイスをデザインする技術を習得することで、開発速度を大幅に向上させることができるのです。
Wh
PyQt5とは?
PyQt5は、プログラミング言語Python用のQtデザイナースタジオの拡張版です。
Tkinter、Kivy、CherryPyなど、PythonのGUI開発APIとして有名なものの一つです。
主に、コードを使ってアプリを開発することができ、コーディングせずにウィジェットを配置することを支援するデザインスタジオです。
インストール方法
システムには、以下の仕様を考慮する必要があります。
- Python 3.6.x以上
- オペレーティングシステム Windows/MAC/Linux
- IDE/テキストエディタ。Visual Studio Code、Vim、PyCharmなど。
- 環境(オプション): Anaconda
コマンドプロンプトまたはターミナルを開き、以下のpipコマンドを入力します。
pip install PyQt5 |
# importing the qtWidgets class from the PyQt5 class from PyQt5 import QtWidgets as qtw
# creating a class of the main wndow and inheriting it from the QtWidgets QWidgrt class class MainWindow(qtw.QWidget):
def __init__( self ):
super ().__init__()
self .setWindowTitle( 'Hello GUI' )
self .show() # a method that displays everything on the screen
# instance of the QtWidget window app = qtw.QApplication([])
# instance of the MainWindow() class main = MainWindow()
# starting the application app.exec_() |
Python Qt を使った簡単な GUI アプリケーションの構築
前回お話したPyQt5を使った簡単なGUIアプリケーションの実装に入りましょう。
1. 基本的なウィンドウの作成
pyuic5 -x app_name.ui -o app_name.py
|
結果は以下の通りです。
# -*- coding: utf-8 -*- # Form implementation generated from reading ui file 'myui.ui' # # Created by: PyQt5 UI code generator 5.15.6 # # 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
class Ui_MainWindow( object ):
def setupUi( self , MainWindow):
MainWindow.setObjectName( "MainWindow" )
MainWindow.resize( 253 , 264 )
self .centralwidget = QtWidgets.QWidget(MainWindow)
self .centralwidget.setObjectName( "centralwidget" )
self .click_me_button = QtWidgets.QPushButton( self .centralwidget)
self .click_me_button.setGeometry(QtCore.QRect( 0 , 130 , 251 , 91 ))
font = QtGui.QFont()
font.setPointSize( 36 )
self .click_me_button.setFont(font)
self .click_me_button.setObjectName( "click_me_button" )
self .helo_world_label = QtWidgets.QLabel( self .centralwidget)
self .helo_world_label.setGeometry(QtCore.QRect( 10 , 40 , 241 , 81 ))
font = QtGui.QFont()
font.setPointSize( 36 )
self .helo_world_label.setFont(font)
self .helo_world_label.setObjectName( "hello_world_label" )
MainWindow.setCentralWidget( self .centralwidget)
self .menubar = QtWidgets.QMenuBar(MainWindow)
self .menubar.setGeometry(QtCore.QRect( 0 , 0 , 253 , 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)
QtCore.QMetaObject.connectSlotsByName(MainWindow)
def retranslateUi( self , MainWindow):
_translate = QtCore.QCoreApplication.translate
MainWindow.setWindowTitle(_translate( "MainWindow" , "MainWindow" ))
self .click_me_button.setText(_translate( "MainWindow" , "Click Me" ))
self .helo_world_label.setText(_translate( "MainWindow" , "Hello!" ))
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_())
|
コードの説明では、各要素を詳細に定義していきます。
Qtアプリには基本的に6つの要素があります。
- MainWindowクラス。 このクラスは、すべてのウィジェット、ボタン、テキスト、表示画面、およびその他のサブウィジェットを保持しています。すべての子オブジェクトの親ウィンドウと言えます。
-
- QtWidgets: MainWindowの内部で使用するすべてのウィジェットを集めたクラスです。アプリケーションを開発する際には、必ずメインクラスの内部で継承してください。
self.setWindowTitle()。 アプリのウィンドウのタイトルを設定します。
self.show()。 実行から配置、アプリケーション全体の管理まで、すべてこの関数の指揮下にある。ただ、MainWindowクラスの中で呼び出さないと、システムは表示されず、バックグラウンドで動作し続けるだけとなることを覚えておいてください。
- QtWidgets: MainWindowの内部で使用するすべてのウィジェットを集めたクラスです。アプリケーションを開発する際には、必ずメインクラスの内部で継承してください。
-
- QApplicationのインスタンス。 Qtのプログラムを実行するには、そのクラスのオブジェクトを作成することが非常に重要です。QWidgetモジュールのQApplicationのインスタンスは、appという名前です。
- MainWindowsのインスタンス。 MainWindowのインスタンスは、私たちのアプリケーションに新しい機能を植え付けるためのものです。何度か必要ですが、必須です。
- 実行機能。 アプリの実行を行います。最後の行で呼び出します。
PyQt5ライブラリには、高速なGUIプログラミングに欠かせないウィジェットが他にもいくつかあります。
- ボックスレイアウト。 イベント発生時にメッセージを表示するためのメッセージボックスを出力します。
-
- ラベル。 GUIアプリケーションの各機能を定義するために、ラベルを使用します。ラベルは、ユーザーがそのアプリケーションをより簡単に操作できるようにするために役立ちます。
- ボタン。 Qtが提供するボタンには、プッシュボタン、ラジオボタンなど多くの種類があります。
- フォント フォント: フォントは、様々な種類の魅力的なアルファベットです。フォントの主な目的は、魅力的なユーザーインターフェイスを作り、素晴らしいユーザーエクスペリエンスを提供することです。テキストを装飾するためのもの。
電子ディスプレイ(LCD)画面。
数字のデジタル表示は、アプリケーションに魅力的な外観を追加します。
LCDの数字は、主に電卓やメートル単位の変換アプリケーションに使用されます。
この記事もチェック:Pythonで数字当てゲームのGUIを作成する方法
Qt Designer Studio のインストール
Qt Designer Studio は、GUI プログラミングをより簡単にするためのオプションやパッケージを大量に提供してくれる巨大なライブラリです。
主な利点は、Qt Designer Studioが組み込まれていることです。
これは、デスクトップアプリケーションの迅速な開発を支援するドラッグ&ドロップのインターフェイスです。
以前のバージョンでは、Designerはライブラリに内蔵されていました。
しかし、新しい開発により、PyQt5では別のパッケージになっています。
そこで、追加するためには、以下のようにします。
- コマンドプロンプトを開き、pip install PyQt5Designer と入力します。
-
- 起動するには、コマンドプロンプトでコマンド – ‘designer’ を入力するだけです。インターフェイスはこのようになっています。
# a function that passes a string 'hello world' when we click a button def press_the_button( self ):
self .hello_world_label.setText( 'Hello world!' )
|
これが最もシンプルな操作のGUIビルダーです。
あとは、オブジェクトをメインウインドウにドラッグ&ドロップするだけです。
そして、そのファイルを保存すれば、内部の機能をプログラムする準備が整います。
注意点:デザイナーはGUIアプリケーションのレイアウトを作成するだけです。
Pythonのコードでアプリを明示的にプログラムする必要があります。
Designing GUI Applications with PyQt5 Designer studio
このセクションでは、簡単なGUIアプリケーションを作成し、コマンドライン引数で実行する予定です。
これは動作するものではありません。
これは、基本的なレイアウトを作成し、それをスクリプトに変更する方法のデモに過ぎません。
それでは始めましょう。
1. メインウィンドウの設定
コマンドプロンプトに designer.exe と入力してデザイナーを開くと、選択ペインが開きます。
バックグランドウィンドウの種類を聞いてきます。
メインウィンドウを選択すると、空白のインターフェイスが作成されます。
self .click_me_button = QtWidgets.QPushButton( self .centralwidget)
|
2. ウィジェット選択ボックスのツアー
ウィンドウの左側には、ウィジェット選択ボックスがあります。
ウィジェットには、大きなものから小さなものまで、様々な種類があります。
ここでは、その一部を紹介します。

ここでは、そのすべてを紹介します。




3. シンプルなプッシュボタンアプリの作成
プッシュボタンは、1つのタスクを実行するシンプルなボタンです。
Webサイトにログインする、処理を開始する、ゲームを起動する、などです。
ただ、一押しするだけでいいのです。
私たちのアプリの仕組みはシンプルです。
クリックすると、Clicked!!!と表示されます。
これは、GUIの仕組みが書かれているので、初心者がよく作ろうとするアプリの一つです。
-
- デザイナーを開き、メインウィンドウとしてバックグラウンドプレーサーを選択します。
-
- ウィジェットメニューからプッシュボタンを選択し、メインウィンドウの中にドラッグします。

-
- 右側にはプロパティパレットがあります。このパレットで、各オブジェクトのプロパティを変更することができます。各オブジェクトには固有の名前を付ける必要があります。ここでは、Push Buttonをclick_me_buttonと名付ける。次に、両端のエンドポイントを利用して、ボタンの大きさを変更します。

- 次に、ラベルを配置し、同じように変更します。フォントが非常に小さいので、プロパティパレットでフォントサイズを36に変更します。フォントのセクションには、たくさんのオプションがあるので、いろいろと試してみてください。ラベルのテキストを「Hello」に、ボタンを「Click me」に変更します。まとめると、このようなレイアウトになります。


さて、これで基本的なアプリケーションができました。
これを必要なディレクトリに保存するだけです。
左上のFileオプションからSaveをクリックするか、Ctrl + Sで保存してください。
名前はmyui.uiとしました。
しかし、これは拡張子が”.ui “である<?xml>ファイルです。

このファイルを実行するには、Pythonスクリプトに変換する必要があります。
変換のための特別なコマンドがあります。

コマンドプロンプトで、このコマンドを入力し、Enterキーを押します。
Pythonスクリプトには任意の名前を付けることができますが、以前に保存したUIファイルの名前が正しいことを確認してください。

これで、アプリケーション用の Python スクリプト my_app.py が完成しました。
.uiファイルがあるのと同じディレクトリに置くと、後の作業がずっと楽になります。
スクリプトを開くと、その中に自動生成されたコード全体が含まれています。
まるで魔法のようです。
それでは見てみましょう。
コード (システムが “pyuic5” コマンドで自動生成したもの)。

このコードを実行すると、何もしない基本的なユーザーインターフェイスが表示されます。
出力です。

さて、いよいよボタンにアクションを追加してみましょう。
このボタンをクリックすると、ラベルが何かを表示します。
それを実現するために、press_the_button()という関数を定義します。
これをクリックすると、ラベルに’Hello’だけでなく、’Hello World’と表示されます。
関数のコード

関数をラムダパラメータとして追加します。

この無名関数を使う目的は、新しいウィジェットの宣言前にすでにある関数呼び出しを渡すとエラーが発生するので、ラムダでうまく管理するためです。
実装後はこのようになります。

この後、コードを保存してアプリケーションを再起動し、ボタンをクリックすると、’Hello World’ というテキストが表示されます。
結果は、以下の通りです。


このように、PyQt5とPythonを使用して変更を加え、素晴らしいGUIアプリケーションを作成することができます。
まとめ
QtとPythonを使った高速GUIアプリケーションの開発に関する話題はここで終わりです。
このライブラリは非常に大きく、まだ理解し実装していない部分が多くあります。
ですから、読者の皆さんは、インストール手順とそれ以降のセクションを注意深く読むことをお勧めします。
このトピックでは、まだ多くのことが語られます。