ショウのプログラミング教室

初心者でも絶対出来る自作ブラウザ[Python]第5章 GUIデザイン作成

今日はブラウザを1から作ってみたいシリーズの第5弾のGUIデザイン作成です
今回も初心者でも絶対できるように細かく説明していきます

このシリーズを読んでいけば以下のことができるようになります

前回の記事では実際にブラウザを表示させてみました

前回のブラウザには通常のブラウザにあるボタン(戻るや進む等)がなかったです
そこで、今回はボタン等のGUI(グラフィカルユーザインターフェース)を作成していきます

仕様検討

簡単にGUIの仕様を検討します
今回は以下のブラウザに最低限必要な機能を作成します

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のデザインを作成することができました

次回は作成したボタンを押した際の動作の実装について紹介します

質問や相談あればドシドシご連絡ください!!
こんなの作ってみたい等の依頼も募集してますよ~

モバイルバージョンを終了