Qtでウェブ!

     久々のQtネタ!
     ホントは一回ネタを書いたんだけど、アップ間際に自分の過去記事を調べてみたらダダ被りしていたと言う・・・
     タイトルまでほぼ一緒(´・ω・`) どんだけ頭の中が変わってないんだよと言う・・・

     さて今回のネタは「Qtでウェブを表示する!!」でございます。
     QtにはQtWebKitと言うモジュールがついていて、これを使用するとQtのインターフェース上でネットが見れちゃいますぜ。
     では早速シンプルなソースコードを・・・
    # -*- coding:utf-8 -*-
    import sys
    # 普段のQtGui,QtCoreとは別に、QtWebKitも読み込む必要がある。
    from PySide import QtGui, QtCore, QtWebKit
    
    class WebViewer(QtGui.QWidget):
        '''メインのウィジェット。'''
        def __init__(self, parent=None):
            super(WebViewer, self).__init__(parent)
            
            # QWebViewを作成して外部URL(今回はこのブログのトップ)を設定する。
            webview = QtWebKit.QWebView()
            webview.setUrl('http://melpystudio.blog82.fc2.com/')
    
            # レイアウトを作成し、先に作ったQWebViewをセットする。
            layout = QtGui.QVBoxLayout(self)
            layout.addWidget(webview)
    
    
    if __name__ == '__main__':
        # いつもの作成部分。
        app = QtGui.QApplication(sys.argv)
        widget = WebViewer()
        widget.show()
    
        sys.exit(app.exec_())
    
     これでとりあえずはウェブを見れるようになりました。
    qwebview01_001.jpg
     今回はQtGuiやQtCoreとは別にQtWebKitと言うのを別途読み込む必要があります。
    PySideやPyQtでは普通にインストールすれば入っているので、記述するだけでOK!


     しかしこれだけでは流石にシンプル過ぎるので、URLを入れるフィールドやらなにんやらを追加してあげましょう。
    # -*- coding:utf-8 -*-
    import sys
    # 普段のQtGui,QtCoreとは別に、QtWebKitも読み込む必要がある。
    from PySide import QtGui, QtCore, QtWebKit
    
    StartURL = 'http://melpystudio.blog82.fc2.com/'
     
    class WebViewer(QtGui.QWidget):
        '''メインのウィジェット。'''
        def __init__(self, parent=None):
            super(WebViewer, self).__init__(parent)
    
            # メニューバー。=======================================================
            # Reloadボタン。
            reload_btn = QtGui.QPushButton('R')
            reload_btn.clicked.connect(self.reload)
    
            # Backボタン。
            self.back_btn = QtGui.QPushButton('<')
            self.back_btn.clicked.connect(self.goBack)
    
            # Fowardボタン。
            self.forward_btn = QtGui.QPushButton('>')
            self.forward_btn.clicked.connect(self.goForward)
    
            # URLアドレスバー。
            self.url_field = QtGui.QLineEdit()
            self.url_field.returnPressed.connect(self.urlFieldCallBack)
            
            # メニューバーグループ。
            menubar_grp = QtGui.QGroupBox()
            menubar_layout = QtGui.QHBoxLayout(menubar_grp)
            menubar_layout.setContentsMargins(2, 2, 2, 2)
            menubar_layout.addWidget(reload_btn)
            menubar_layout.addWidget(self.back_btn)
            menubar_layout.addWidget(self.forward_btn)
            menubar_layout.addWidget(self.url_field)
            # =====================================================================
    
            # QWebViewの作成。=====================================================
            self.webview = QtWebKit.QWebView()
    
            # URLリンクがクリックされてベージが変更される時にUIを
            # アップデートする。
            self.webview.urlChanged.connect(self.updateState)
            # =====================================================================
     
            # レイアウトを作成し、先に作ったQWebViewをセットする。
            layout = QtGui.QVBoxLayout(self)
            layout.setContentsMargins(2, 2, 2, 2) #レイアウトのマージンを2にする。
            layout.addWidget(menubar_grp)
            layout.addWidget(self.webview)
            layout.setStretchFactor(self.webview, 1)
    
        def setUrl(self, url):
            '''引数で指定されたURLテキストをフィールドにセットし、そのURLを
           QWebViewで開くメソッド。'''
            self.url_field.setText(url)
            self.urlFieldCallBack()
    
        def reload(self):
            '''現在のページをリロードするメソッド。'''
            self.webview.load(self.webview.url())
    
        def goBack(self):
            '''ページを一つ前に戻すメソッド。'''
            history = self.webview.history()
            history.back()
    
        def goForward(self):
            '''ページを一つ後に進めるメソッド。'''
            history = self.webview.history()
            history.forward()
    
        def urlFieldCallBack(self):
            '''URLアドレスバーにURLが入力された時のコールバック関数。'''
            self.webview.setUrl(QtCore.QUrl(self.url_field.text()))
    
        def updateState(self, url):
            '''QWebViewの現在のページが更新された場合、GUIを更新するメソッド。'''
            self.url_field.setText(url.toString())
            history = self.webview.history()
            self.back_btn.setEnabled(history.canGoBack())
            self.forward_btn.setEnabled(history.canGoForward())
     
     
    if __name__ == '__main__':
        # いつもの作成部分。
        app = QtGui.QApplication(sys.argv)
    
        # 自作クラスのWebViewerを作成し、外部URL(今回はこのブログのトップ)を ======
        # 設定する。
        widget = WebViewer()
        widget.setUrl(StartURL)
        widget.show()
        # =========================================================================
     
        sys.exit(app.exec_())
    
     リロードボタンと戻る・進むボタン、それにアドレスバーを追加してみましたv( ̄Д ̄)v
     アドレスバーについての挙動については、Enterキーなどを押した時にそのURLをセットしたくらいです。
    qwebview01_002.jpg
     一番個人的に楽だなぁと思ったのは履歴の戻る・進むの制御。
     QWebView.historyメソッドを呼ぶとQWebHistoryオブジェクトを取得できます。
     このQWebHistoryオブジェクトはQWebViewのURL移動の履歴を持っており、QWebHistoryオブジェクトのbackメソッドとforwardメソッドを呼ぶだけで本体のQWebViewの現在のURLが変更され、履歴も自動的に更新されます。(ソースコード68/73行目)
     また、このQWebHistoryオブジェクトのcanGoBack/canGoForwardメソッドで、履歴が戻れるか/進めるかがわかるので、この状態に応じて戻る・進むボタンのEnabledを変更してやるだけで、簡単に履歴ボタンの状態を更新してあげる事ができます。

     履歴の管理とそれに合わせたUIの更新は地味に面倒なんで、こういった機能が標準でサポートされていると楽ちんですな( ´∀`)bグッ!


     Qtでウェブページを表示できると、Shotogunなどのウェブベースの進捗管理システムを導入している場合、Mayaなどのアプリ上でサクっと見れたりするんで非常に便利っす(・∀・)
    スポンサーサイト

    コメントの投稿

    非公開コメント

    プロフィール

    Eske

    Author:Eske
    萌えイラストレーターを目指す3DCGイラストレーター。
    現在ポケモンカードゲーム、ガンダムトライエイジ、ガンダムコンクエスト、妖怪ウォッチとりつきカードゲームなどで3DCGを使用したイラストレーターとして参加中。

    主にここでは日々気づいたメモなんかを残してます。
    イラストのお仕事も受け付けております。ココのメールアドレスからご連絡できますので、お気軽にご相談下さい。

    最新記事
    最新コメント
    カテゴリ
    最新トラックバック
    月別アーカイブ
    検索フォーム
    リンク
    QRコード
    QR