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

第6回 Qt WebKit~WebコンテンツとQtの連携

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

Webコンテンツ内でのQtのウィジェットの利用

ここまでの説明で,Qt/C++でWebKitをどのように使うかが掴めたと思います。最後に,QtのウィジェットをWebフォームで使う方法について説明します。

図6は,Qt Labsで紹介されているQtWebKitを利用し,flickrの画像を検索して表示し,輝度やぼかしをクライアント側で行うサンプルです。このサンプルでは,QtのウィジェットをWebフォーム中で利用しているよい例です。このソースコードは,svn://labs.trolltech.com/svn/webkit/demo から入手できます。

図6 Qt LabsのWebKitデモ

図6 Qt LabsのWebKitデモ

Qtウィジェットの利用方法

Qt Labsのサンプルでは,CSSを使ったり,HTMLを切り換えてスタイルを指定したりといろいろなことをしているので,簡単なサンプルでQtのウィジェットをWebフォームで扱う方法についてのみ説明しましょう。図7は簡単なサンプルリスト9を実行したもので,説明文はHTMLで記述され,ウィジェットの配置もHTMLで行っています。

図7 QtのウィジェットのWebフォームでの使用

図7 QtのウィジェットのWebフォームでの使用

リスト9 embeddedwidget.html

01: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
02: <head>
03:   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
04: </head>
05: 
06: <body>
07:         <h1>
08:             QtのウィジェットをWebフォームで使っています。
09:         </h1>
10: 
11:         <ul>
12:             <li>スライダーを動かすと数値が表示されます。</li>
13:             <li>ボタンをクリックすると終了します。</li>
14:         </ul>
15: 
16:         <table>
17:         <tr>
18:         <td>
19:              <object classid="LCDNumber" type="application/x-qt-styled-widget" width=250 height=60>
20:              </object>

QtのウィジェットをHTML中で使うには,<OBJECT>タグを使います。classid属性は,使うウィジェットを識別するための名前です。

type属性には,application/x-qt-pluginまたはapplication/x-qt-styled-widgetを指定します。後者を指定すると,Qtのスタイルシートが使われるようになり,style属性でスタイルシートを指定できます。

widthやheightなどの属性は,Qtのウィジェットに対してsetProperty()を呼び出して,プロパティが設定されます。つまり,widthとheightでウィジェットの大きさを指定していることになります。

21:         </td>
22:         </tr>
23:         <tr>
24:         <td>
25:              <object classid="Slider" type="application/x-qt-styled-widget" width=250 height=30>
26:                  <param name="orientation" value="Horizontal">
27:              </object>
28:         </td>
29:         </tr>
30:         <tr>
31:         <td>
32:              <object classid="Button" type="application/x-qt-styled-widget" width=60 height=30>
33:                  <param name="text" value="終了">
34:              </object>
35:         </td>
36:         <td>
37:         </td>
38:         </tr>
39:         </table>
40: </body>
41: 
42: </html>

リスト10 embeddedwidget.cpp

01: #include <QApplication>
02: #include <QWebView>
03: #include <QWebPage>
04: #include <QUrl>
05: #include <QPushButton>
06: #include <QSlider>
07: #include <QLCDNumber>
08: #include <QVariant>
09: #include <QDebug>
10: 
11: class WebPage : public QWebPage
12: {
13:     Q_OBJECT
14: 
15: public:
16:     WebPage( QWebView* parent = 0 );
17: 
18:     QObject* createPlugin( const QString& classid, const QUrl& url, const QStringList& paramNames, const QStringList& paramValues );
19: 
20: private:
21:     QLCDNumber* lcdNumber;
22:     QSlider* slider;
23:     QPushButton* pushButton;
24: };
25: 
26: WebPage::WebPage( QWebView* parent ) 
27:     : QWebPage( parent ) 
28: { 
29:     parent->setPage( this ); 
30: 
31:     slider = new QSlider;
32:     lcdNumber = new QLCDNumber;
33:     pushButton = new QPushButton;
34:     

Webフォームで使う3つのウィジェットを用意しています。

35:     connect( slider, SIGNAL(valueChanged(int)), lcdNumber, SLOT(display(int)) );
36:     connect( pushButton, SIGNAL(clicked()), qApp, SLOT(quit()) );
37: }
38: 
39: QObject* WebPage::createPlugin( const QString& classid, const QUrl& url, const QStringList& paramNames, const QStringList& paramValues ){
40:     QWidget* widget = 0;
41: 
42:     if ( classid == QString( "Slider" ) )
43:         widget = slider;
44:     else if ( classid == QString( "LCDNumber" ) )
45:         widget = lcdNumber;
46:     else if ( classid == QString( "Button" ) )
47:         widget = pushButton;
48:     else
49:         return 0;
50: 
51:     for ( int i = 0; i < paramNames.size(); ++i )
52:         widget->setProperty( paramNames.at( i ).toLatin1().constData(), paramValues.at( i ) );
53:     return widget;
54: }
55: 

HTML中の<OBJECT>タグのtype属性がapplication/x-qt-pluginかapplication/x-qt-styled-widget の場合に呼び出されるのでウィジェットのインスタンスを生成して返します。コンストラクタで生成したウィジェットを返すようにしていますが,新しくインスタンスを生成して返すこともできます。実際にQt Labsのサンプルでは,この部分はリスト11のようになっています。

コンストラクタで生成したものもcreatePlugin()で生成したもののどちらについても,ここで返しているインスタンスはQt側が不要になったときにメモリ解放をしているのでメモリリークは起きません。

56: int main( int argc, char** argv )
57: {
58:     QApplication app( argc, argv );
59: 
60:     QWebSettings::globalSettings()->setAttribute( QWebSettings::PluginsEnabled, true );
61: 
62:     QWebView webView;
63:     WebPage* webPage = new WebPage( &webView );
64:     webView.load( QUrl( "qrc:html/embeddedwidget.html" ) );
65:     webView.show();
66: 
67:     return app.exec();
68: }
69: 
70: #include "embeddedwidget.moc"

リスト11

QWidget *w = 0;
if (classid == QLatin1String("QLineEdit"))
    w = new QLineEdit;
else if (classid == QLatin1String("QPushButton"))
    w = new QPushButton;
else if (classid == QLatin1String("ImageView"))
    w = m_imageView;
else if (classid == QLatin1String("Slider"))
    w = m_slider;
else if (classid == QLatin1String("EffectCombo"))
    w = m_effectsCombo;
else if (classid == QLatin1String("StyleCombo"))
    w = m_styleCombo;
else
    return 0;

まとめ

この特集では,Qtで実際にプログラミングするための基本的な機能,最新バージョンQt 4.4の機能と来年初頭のQt 4.5の予定機能,Qt 4.4で追加されたQt WebKitの基本的活用方法について説明しました。Qt WebKitは,Qt 4.5でWebKitをフルに利用できるようになり,QtとWebを融合させたいろいろなおもしろいアプリケーションが作れるようになるでしょう。なお,Qt Creatorについてはあらためてリリース時に詳しい解説を予定しています。

著者プロフィール

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

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

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