初心者でも絶対出来る自作ブラウザ[Python]第6章 ボタンの動作作成

実行画面(グーグル) サンプルコード
qtDesigner2
ショウ
ショウ

こんにちはショウです

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

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

  • 仕様検討
  • Pythonの環境構築構築
  • Pythonのライブラリの導入方法
  • Pythonでの開発
  • 自作ブラウザの表示
  • ブラウザのカスタマイズ ←この記事

前回の記事ではブラウザのGUIをデザインしてボタンなどを作成しました

前回はデザインのみでしたので、作成したボタンを押しても何も起きない状態でした
今回はボタンを押した時にちゃんと動作するように実装していきます

シグナルとスロットについて

Qtでは独自のシグナルとスロットという仕組みを用いてイベント処理を行います

シグナルがユーザがマウスやキーボードを使用して実行する動作を定義したものです

スロットがシグナルが発生した時に実行したい処理内容となります

このシグナルとスロットを組み合わせることをコネクトと呼びます

例えば、「戻るボタンを押す」と「1つ前のページに戻る」動作を行う場合
シグナルが「戻るボタンを押す」で
スロットが「1つ前のページに戻る」となります

シグナルとスロットについて詳しく知りたい方は以下のQtのサイトをご覧ください

Signals & Slots | Qt Core 5.13.2

Qt Designerでのシグナルとスロット作成

Qt Designerを実行して前回のUIを開きます

画面ジョブのシグナル/スロットを編集ボタンを押します

前回作成したGUI
qtDesigner

シグナルとスロットの編集モードになりますので設定します
設定方法はユーザが操作するアイテムをクリックした状態で、処理を実行するアイテム上にマウスを移動させて離します

例えば戻るボタンを押して1つ前のページに戻る際には
ユーザが操作するのは「戻るボタン」で、処理を実行するのはwebEngineViewです
戻るボタンをwebEngineViewにドラッグ&ドロップ するようなイメージです

シグナルとスロットの編集画面
qtDesigner

ドラッグ&ドロップ すると以下の画面が開きますので、ここでシグナルをスロットを選びます

標準でよく使用するものが用意されています
左がシグナルとなっており、ここではボタンのクリック(clicked())を選択します
右がスロットとなっており、ここでは戻る(back())を選択します

戻るボタンの設定
qtDesigner

戻る、進む、更新ボタンのclicked()にそれぞれback()、forward()、reload()を設定します

設定が完了したら、前回同様.uiファイルから.pyファイルに変換してください

今回シグナルとスロットを追加したことにより以下の行が追加されています
アイテム.シグナル.connect(スロット)という形で記述されます

ソース上でのスロット作成

上のソースコードに自作のスロットを追加したbrowser2UI.pyの全体が以下となります
前回同様、初期ページ設定の以下もお忘れなく!!

initurl = ‘https://www.google.co.jp’
self.webEngineView.setUrl(QtCore.QUrl(initurl))

追加したのは以下の2行でそれぞれ
lineEditでエンターキーを押された際にMainWindow.webPageUpdate()を
webEngineViewでURLが変更された際にMainWindow.urlLineSet()を
呼び出す設定です
呼び出す関数についてはbrowser2.pyにて実装します

GUIを呼び出す方のbrowser2.pyは以下となります

webPageUpdate()ではlineEditに入力されたURLをwebEngineViewに設定する処理を行っています

urlLineSet()ではwebEngineViewで変更されたURLをlineEditにセットする処理を行っています

実行

前回同様browser2.pyを実行します

起動した時にURL:に現在のURLが表示されているのが確認できます

実行画面(グーグル)
qtDesigner2

検索を実行していみると、URL:の表示が変わるのが確認できます

検索画面(Python)
qtDesigner2

戻るや進むボタンでページを行ったり来たりできます

Pythonページを開く
qtDesigner2

次にURLにこのブログのトップページのURLを入力してエンターキーを押します

URL入力画面
qtDesigner2

見事トップページが表示されました

URL入力での画面遷移
qtDesigner2

まとめ

今回はGUIのボタン等を押した際の処理を実装しました
Qtのシグナルとスロットを使用することで、ユーザの操作と処理の実行を簡単に結びつけることができました

自作のスロットを使用して様々な処理を追加することでブラウザの完成度をアップさせていきましょう

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

コメント

  1. 荒森泰生 より:

    ショウさんの自作ブラウザ[Python]の記事を読ませて頂き、タイトルの通り私にも出来ました!ありがとうございます。
    初めて扱う言語やツールでしたが、とても分かりやすい説明で本当に助かりました!ありがとうございます。

    質問をよろしいでしょうか?

    別ウィンドウで開く動作(HTMLタグでいうと「target=”_blank”」)の実装方法がわかりません。何かヒントを頂ければ幸いです。何卒宜しくお願いいたします。

    • ショウ ショウ より:

      ブログをご覧いただきありがとうございます。
      ブラウザを作ってみることができたようで、良かったです。

      早速質問についてですが、別ウィンドウで開く動作ということで、実装方法は色々考えられると想いますが、何かしらのシグナルで繋いだスロットにてbrowserUI()を作成してshowすればよいかと思います。

      その際、モードレス(呼び出した画面がロックされない)で呼べば、元の画面も操作できます。

      こちらでも、時間がある時に試してみようかと思います

      • 荒森泰生 より:

        ショウさん、早速のご回答感謝いたします。

        当方PythonやQtは初めてなので手探り状態でやっております。

        もし、サンプルコード的なものがございましたらご教授頂けたら幸いです。

        本当にありがとうございます。

  2. 荒森泰生 より:

    もう1点質問があります。
    この自作ブラウザでPDFファイルを表示することは可能なのでしょうか?

    何度も申し訳ありません。
    ご教授頂けましたら幸いです。

    よろしくお願いいたします。

    • ショウ ショウ より:

      現状ではPDFの表示には対応しておりません。

      技術的には可能だと思うので、試せたらまたブログに書こうと思います

  3. 荒森泰生 より:

    ご回答ありがとうございます。