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

2021年5月12日

今日はブラウザを1から作ってみたいシリーズの第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つを適当な位置に配置します

GUI作成画面2
qtDesigner

ラベルとラインテキストを適当な位置に配置します

GUI作成画面3
qtDesigner

WEBエンジンビューを適当な位置に配置します

GUI作成画面4
qtDesigner

配置したボタンを全て選択した状態で上にある水平方向に並べるをクリックします

GUI作成画面5
qtDesigner

ボタンの配置が整理されました
右側のオブジェクトインスペクタの部分で見たらわかるのですが、
QHBoxLayout というレイアウトが作成されて
QHBoxLayoutの中にボタンが4つ配置されています

GUI作成画面6
qtDesigner

続いてラベルとラインテキストも水平方向に並べます

GUI作成画面7
qtDesigner

上で作った2つのレイアウトとウェブエンジンビューを垂直に並べます

GUI作成画面8
qtDesigner

右側のオブジェクトインスペクタからcentralwidggetを選択して格子状に並べるをクリックしてください

GUI作成画面9
qtDesigner

これにより、画面全体にアイテムが配置されて画面のリサイズにも対応します

GUI作成画面10
qtDesigner

次にアイテムにテキスト(進む等)を設定します
入力したいボタンを選択した状態で右側のプロパティ内のtextを変更します

GUI作成画面11
qtDesigner

全て入力が完了すると、以下のようになります

GUI作成画面12
qtDesigner

このままだたボタンが4つ並んでいて、味気ないのでスペーサーをいれます
更新ボタンとお気に入りボタンの間にスペーサーを配置すると空間ができてお気に入りボタンだけ右側によります

GUI作成画面13
qtDesigner

画面が作成出来たら、フォームのプレビューで確認ができます

GUI作成画面14
qtDesigner
GUI作成画面15
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

Anacondaプロンプトから実行
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のデザインを作成することができました

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

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

サンプルコード,プログラミング,プログラミングスクール

Posted by sho51989@gmail.com