初心者でも絶対出来る自作ブラウザ[Python]第５章 GUIデザイン作成
今日はブラウザを１から作ってみたいシリーズの第5弾のGUIデザイン作成です
今回も初心者でも絶対できるように細かく説明していきます
このシリーズを読んでいけば以下のことができるようになります
- 仕様検討
- Pythonの環境構築構築
- Pythonのライブラリの導入方法
- Pythonでの開発←この記事
- 自作ブラウザの表示
- ブラウザのカスタマイズ ←この記事
前回の記事では実際にブラウザを表示させてみました
前回のブラウザには通常のブラウザにあるボタン(戻るや進む等)がなかったです
そこで、今回はボタン等のGUI(グラフィカルユーザインターフェース)を作成していきます
仕様検討
簡単にGUIの仕様を検討します
今回は以下のブラウザに最低限必要な機能を作成します
- 戻るボタン
- 進むボタン
- 更新ボタン
- お気に入り登録ボタン
- URL表示領域
Qt Designer
Anacondaをインストール時に「Qt Designer」というソフトがインストールされています
このソフトを使えばVisualStudioのように画面上でGUIのデザインを作成できます
インストールフォルダ
C:\ProgramData\Anaconda3\Library\bin\designer.exe
実行すると以下の画面が立ち上がります
GUIのテンプレートが用意されていますのでここから選択します
細かな違いはあるのですが、今は気にしなくていいです
今回はMainWindowで作成します
WidgetはQtのすべての描画可能クラスの基本クラスです
DialogはWidgetに基づいていますが、ウィンドウとして表示するように設計されています
MainWindowは、メインウィンドウが持つ共通のニーズを考慮して設計されています
早速GUIを作成します
qtDesigner
ボタン4つを適当な位置に配置します
qtDesigner
ラベルとラインテキストを適当な位置に配置します
qtDesigner
WEBエンジンビューを適当な位置に配置します
qtDesigner
配置したボタンを全て選択した状態で上にある水平方向に並べるをクリックします
qtDesigner
ボタンの配置が整理されました
右側のオブジェクトインスペクタの部分で見たらわかるのですが、
QHBoxLayout というレイアウトが作成されて
QHBoxLayoutの中にボタンが4つ配置されています
qtDesigner
続いてラベルとラインテキストも水平方向に並べます
qtDesigner
上で作った2つのレイアウトとウェブエンジンビューを垂直に並べます
qtDesigner
右側のオブジェクトインスペクタからcentralwidggetを選択して格子状に並べるをクリックしてください
qtDesigner
これにより、画面全体にアイテムが配置されて画面のリサイズにも対応します
qtDesigner
次にアイテムにテキスト(進む等)を設定します
入力したいボタンを選択した状態で右側のプロパティ内のtextを変更します
qtDesigner
全て入力が完了すると、以下のようになります
qtDesigner
このままだたボタンが4つ並んでいて、味気ないのでスペーサーをいれます
更新ボタンとお気に入りボタンの間にスペーサーを配置すると空間ができてお気に入りボタンだけ右側によります
qtDesigner
画面が作成出来たら、フォームのプレビューで確認ができます
qtDesigner
qtDesigner
確認ができたら適当な場所に保存します
今回は以下のパスにbrowser2.uiというファイル名で保存しました
C:\ProgramData\Anaconda3\envs\browser
UIファイルの変換
保存したUIファイル(.ui)はそのままではPythonから使用することはできません
以下のフォルダにあるスクリプトでPython(.py)ファイルに変換する必要があります
C:\ProgramData\Anaconda3\Library\bin\pyuic5
以下のコマンドを入力して変換します
>cd C:\ProgramData\Anaconda3\envs\browser
> ..\..\Library\bin\pyuic5 -o browser2Ui.py browser2.ui
qtDesigner
変換されたbrowser2Ui.pyは以下のようになります
# -*- coding: utf-8 -*-
# Form implementation generated from reading ui file 'browser2.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_MainWindow(object):
def setupUi(self, MainWindow):
MainWindow.setObjectName("MainWindow")
MainWindow.resize(800, 600)
self.centralwidget = QtWidgets.QWidget(MainWindow)
self.centralwidget.setObjectName("centralwidget")
self.gridLayout = QtWidgets.QGridLayout(self.centralwidget)
self.gridLayout.setObjectName("gridLayout")
self.verticalLayout = QtWidgets.QVBoxLayout()
self.verticalLayout.setObjectName("verticalLayout")
self.horizontalLayout = QtWidgets.QHBoxLayout()
self.horizontalLayout.setObjectName("horizontalLayout")
self.pushButton = QtWidgets.QPushButton(self.centralwidget)
self.pushButton.setObjectName("pushButton")
self.horizontalLayout.addWidget(self.pushButton)
self.pushButton_2 = QtWidgets.QPushButton(self.centralwidget)
self.pushButton_2.setObjectName("pushButton_2")
self.horizontalLayout.addWidget(self.pushButton_2)
self.pushButton_3 = QtWidgets.QPushButton(self.centralwidget)
self.pushButton_3.setObjectName("pushButton_3")
self.horizontalLayout.addWidget(self.pushButton_3)
spacerItem = QtWidgets.QSpacerItem(40, 20, QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Minimum)
self.horizontalLayout.addItem(spacerItem)
self.pushButton_4 = QtWidgets.QPushButton(self.centralwidget)
self.pushButton_4.setObjectName("pushButton_4")
self.horizontalLayout.addWidget(self.pushButton_4)
self.verticalLayout.addLayout(self.horizontalLayout)
self.horizontalLayout_2 = QtWidgets.QHBoxLayout()
self.horizontalLayout_2.setObjectName("horizontalLayout_2")
self.label = QtWidgets.QLabel(self.centralwidget)
self.label.setObjectName("label")
self.horizontalLayout_2.addWidget(self.label)
self.lineEdit = QtWidgets.QLineEdit(self.centralwidget)
self.lineEdit.setObjectName("lineEdit")
self.horizontalLayout_2.addWidget(self.lineEdit)
self.verticalLayout.addLayout(self.horizontalLayout_2)
self.webEngineView = QtWebEngineWidgets.QWebEngineView(self.centralwidget)
initurl = 'https://www.google.co.jp'
self.webEngineView.setUrl(QtCore.QUrl(initurl))
self.webEngineView.setObjectName("webEngineView")
self.verticalLayout.addWidget(self.webEngineView)
self.gridLayout.addLayout(self.verticalLayout, 0, 0, 1, 1)
MainWindow.setCentralWidget(self.centralwidget)
self.menubar = QtWidgets.QMenuBar(MainWindow)
self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 17))
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", "pyQtBrowser"))
self.pushButton.setText(_translate("MainWindow", "戻る"))
self.pushButton_2.setText(_translate("MainWindow", "進む"))
self.pushButton_3.setText(_translate("MainWindow", "更新"))
self.pushButton_4.setText(_translate("MainWindow", "お気に入り"))
self.label.setText(_translate("MainWindow", "URL："))
from PyQt5 import QtWebEngineWidgets
WEBエンジンビューに設定する最初に表示するページのURLだけ
ブランクからグーグルのページへ変更しています
initurl = ‘https://www.google.co.jp’
self.webEngineView.setUrl(QtCore.QUrl(initurl))
実行
先ほど作成したbrowser2Ui.pyを呼び出すbrowser2.pyを作成します
import sys
from PyQt5 import QtWidgets
from browser2Ui import Ui_MainWindow
from PyQt5.QtCore import QUrl
class Test(QtWidgets.QMainWindow):
def __init__(self,parent=None):
super(Test, self).__init__(parent)
self.ui = Ui_MainWindow()
self.ui.setupUi(self)
if __name__ == '__main__':
app = QtWidgets.QApplication(sys.argv)
window = Test()
window.show()
sys.exit(app.exec_())
from browser2Ui import Ui_MainWindow
でbrowser2Ui.pyのUi_MainWindowを呼び出す準備をします
self.ui = Ui_MainWindow()
self.ui.setupUi(self)
にてUi_MainWindowの実態を作成して、setupUi()関数を呼び出します
window.show()
にて画面を表示させます
以下のコマンドを入力して browser2.pyを実行します
作成した画面が立ち上がりました
画面上にはgoogleのホーム画面が表示されています
>python browser2.py
qtDesigner
ちゃんと検索もできます
qtDesigner
まとめ
今回は画面GUIデザインの作成でした
Qt Designerを使用することで簡単にGUIのデザインを作成することができました
次回は作成したボタンを押した際の動作の実装について紹介します
質問や相談あればドシドシご連絡ください！！
こんなの作ってみたい等の依頼も募集してますよ～