Qt最新事情-QtでWebKitを使ってみよう

第5回 Qt WebKit~ブラウザ機能の基本

この記事を読むのに必要な時間:およそ 11 分

Webブラウザらしくする

いくつか機能を追加してWebブラウザらしくすると,図4のようになります。本格的なブラウザ機能を実装するには,Qt Demo Browser(ソースコードはQt配布コード中のdemos/browser/)のように1万行以上のコード記述が必要です。この簡単なブラウザには辿れないリンクがあるなど不備はありますが,3ファイルで合わせて120行程度でブラウザらしいプログラムができてしまいますリスト3~5⁠。

図4 簡単なブラウザ

図4 簡単なブラウザ

リスト3 mainwindow.h

01: #ifndef MAINWINDOW_H
01: #define MAINWINDOW_H
02: 
03: #include <QMainWindow>
04: class QWebView;
05: class QLineEdit;
06: class QProgressBar;
07: 
08: class MainWindow : public QMainWindow

QMainWindowを用いて,メニューバー,ツールバー,ステータスバーを持つ一般的なアプリケーションを作ります。

10: {
11:      Q_OBJECT
12: 
13: public:
14:     MainWindow();
15: 
16: protected slots:
17:     void changeLocation();
18:     void loadFinished();
19:     void showLinkHover( const QString& link );
20: 
21: private:
22:     QWebView* webView;
23:     QLineEdit* urlEdit;
24:     QProgressBar* progress;
25: };
26: 
27: #endif

リスト4 mainwindow.cpp

01: #include <QtWebKit>
02: #include <QWebView>
03: #include <QLineEdit>
04: #include <QProgressBar>
05: #include <QMenuBar>
06: #include <QToolBar>
07: #include <QStatusBar>
08: #include "mainwindow.h"
09: 
10: MainWindow::MainWindow()
11:   : QMainWindow( 0 ) 
12: {
13:     webView = new QWebView( this ) ;
14:     setCentralWidget( webView );

QWebViewのインスタンスを処理の中心となるウィジェットとして設定しています。

15: 
16:     progress = new QProgressBar( this );
17:     progress->setRange( 0, 100 );
18:     progress->setMinimumSize( 100, 20 );
19:     progress->setSizePolicy( QSizePolicy::Minimum, QSizePolicy::Minimum );
20:     progress->hide();
21:     statusBar()->addPermanentWidget( progress );
22: 
23:     connect( webView, SIGNAL( loadProgress( int ) ), progress, SLOT( show() ) );
24:     connect( webView, SIGNAL( loadProgress( int ) ), progress, SLOT( setValue( int ) ) );
25:     connect( webView, SIGNAL( loadFinished( bool ) ), progress, SLOT( hide() ) );

ステータスバーにロード状況を表示するためにプログレスバーを埋め込みます。この他に,ステータスバーには,ポインタの下にリンクがあればそのURLも表示しします。

26: 
27:     urlEdit = new QLineEdit( this );
28:     urlEdit->setSizePolicy( QSizePolicy::Expanding, urlEdit->sizePolicy().verticalPolicy() )
29:     connect( urlEdit, SIGNAL( returnPressed() ), SLOT( changeLocation() ) );

URLの入力欄です。横に広がりやすくするようにサイズポリシーを設定し,リターンキーが押されたらスロットchangeLocation()を呼出します。

30: 
31:     QToolBar* bar = addToolBar( "Navigation" );
32:     bar->setMovable( false );
33:     bar->addAction( webView->pageAction( QWebPage::Back ) );
34:     bar->addAction( webView->pageAction( QWebPage::Forward ) );
35:     bar->addAction( webView->pageAction( QWebPage::Reload ) );
36:     bar->addAction( webView->pageAction( QWebPage::Stop ) );
37:     bar->addWidget( urlEdit );

ナビゲーションのためのツールバーを作成しています。QActionのインスタンスは,アイコンも含めてQWebViewが用意しているのでとても簡単です。このようなコードだけで,ナビゲーションアイコンが付いたツールバーが作れてしまいます。

38: 
39:     QMenu* fileMenu = menuBar()->addMenu( "&File" );
40:     fileMenu->addAction( "Quit", qApp, SLOT( quit() ) );
41: 
42:     connect( webView, SIGNAL( loadFinished( bool ) ),
43:              this, SLOT( loadFinished() ) );
44:     connect( webView, SIGNAL( titleChanged( const QString& ) ),
45:              this, SLOT( setWindowTitle( const QString& ) ) );
46:     connect( webView->page(), SIGNAL( linkHovered( const QString&, const QString&, const QSt& ) ),
47:              this, SLOT( showLinkHover( const QString& ) ) );

QWebViewは,操作やWebページの表示状況に対応して,適切なシグナルを数多く用意しているので,必要な処理をするスロットをシグナルと接続します。setWindowTitle()はQWidgetのスロットで,QWebViewのタイトルが変わったならば,それを表示するようにしています。

48: }
49: 
50: void MainWindow::changeLocation() 
51: {
52:     QUrl url = urlEdit->text().simplified();
53:     urlEdit->setText( url.toString() );
54:     webView->load( url );
55:     webView->setFocus( Qt::OtherFocusReason );
56: }

URLが入力されてリターンキーが押されると呼出されるスロットです。入力値の頭と末尾の空白を取り除くようにしています。ロード後にQWebViewにフォーカスを設定して,表示領域にキー入力を移しています。

57: 
58: void MainWindow::loadFinished() 
59: {
60:     urlEdit->setText( webView->url().toString() );
61: }

リンクを辿って表示した場合に,表示されたページのURLをURL入力欄に表示しています。

62: 
63: void MainWindow::showLinkHover( const QString& link ) 
64: {
65:     if ( link.isEmpty() )
66:         statusBar()->clearMessage();
67:     else
68:         statusBar()->showMessage( QString( tr( "Open %1" ).arg( link ) ) );
69: }

ポインタがリンクの上にあるときにそのURLをステータスバーに表示し,ポインタがリンクの外に出たらステータスバーを消去しています。

リスト5 main.cpp

01: #include <QApplication>
02: #include <QWebSettings>
03: 
04: #include "mainwindow.h"
05: 
06: int main( int argc, char** argv )
07: {
08:     QApplication app( argc, argv );
09: 
10:     QWebSettings* webSettings = QWebSettings::globalSettings();
11:     webSettings->setAttribute( QWebSettings::PluginsEnabled, true );
12: 
13:     MainWindow mainWindow;
14:     mainWindow.show();
15: 
16:     return app.exec();
17: }

QMainWindowを継承してカスタマイズしたMainWindowのインスタンスを生成し表示しています。

著者プロフィール

杉田研治(すぎたけんじ)

1955年生まれ。東京都出身。株式会社SRAに勤務。プログラマ。

仕事のほとんどをMac OS XとKubuntu KDE 4でQtと供に過ごす。