覚え書きブログ

読者です 読者をやめる 読者になる 読者になる

Qtの覚え書き(Webの表示編)

ツール&ソフト

Qtで、下図のようにWebページを表示するGUIアプリケーションを作成してみた。
f:id:hirotaka_hachiya:20160527222309p:plain

Qtには、Qt WebEngineというQT独自のWebブラウザのエンジンがあり、HTML、XHTMLSVGCSSおよびJavaScriptに対応している。Qt5.4までは、WebKitがWebブラウザのエンジンとして用いられていたが、Qt5.5からはWebEngineが推奨されている。
http://doc.qt.io/qt-5/qtmultimedia-index.html

手順を一応メモっておく。

1).proファイルにWebEngineモジュールを追加する。
QT += webenginewidgets

2)デザイン画面にて、下図のように「webview」という名前のQWidgetオブジェクトを追加し、QWidgetからQWebEngineViewに格上げする。
格上げ方法としては、webviewオブジェクトを右クリックして、「格上げ先」->「QWebEngineView」を選択する。
もし、格上げ先に、QWebEngineViewが無ければ、「格上げ先を指定」を選択し、「格上げされたクラス名」に、「QWebEngineView」を入力して、「格上げ」をクリックする。
f:id:hirotaka_hachiya:20160527214348p:plain

5)ヘッダーファイルQWebEngineViewを追加する。
【dialog.h】

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>

// headers for web view
#include <QWebEngineView>

namespace Ui {
class Dialog;
}

class Dialog : public QDialog
{
    Q_OBJECT

public:
    explicit Dialog(QWidget *parent = 0);
    ~Dialog();

private:
    Ui::Dialog *ui;
};

#endif // DIALOG_H

5)ヘッダーファイルQWebEngineViewを追加する。

【dialog.cpp】

#include "dialog.h"
#include "ui_dialog.h"

Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);

    //----------------------
    // set web browser
    ui->webView->load(QUrl("http://www.google.com"));
}

Dialog::~Dialog()
{
    delete ui;
}

5)ビルドして実行する。

以上のように、QtのWebEngineを用いると非常に簡単にWebブラウザが作れてしまう。しかも、クロスプラットフォームにも対応している。
ちなみに、WebEngineは、以前紹介したmotionのストリーミング映像を表示することもできる。