Qt WebEngine の概要

Qt WebEngine モジュールは、ネイティブの Web エンジンを持たないプラットフォーム上で、World Wide Web のコンテンツを Qt アプリケーションに簡単に埋め込むことができる Web ブラウザエンジンを提供します。

Qt WebEngine は、HTML、XHTML、SVG ドキュメントをレンダリングするための C++ クラスと QML タイプを提供します。HTML ドキュメントは、HTML 要素のcontenteditable 属性を使用して、ユーザーが完全に編集できるようにすることができます。

Qt WebEngine のアーキテクチャ

Qt WebEngine の機能は、以下のモジュールに分かれています：

• ウィジェットベースのウェブアプリケーションを作成するQt WebEngine Widgets モジュール
• Qt Quick ベースのウェブアプリケーションを作成するQt WebEngine モジュール
• Chromium とやり取りするためのQt WebEngine Core モジュール

ページのレンダリングと JavaScript の実行は、GUI プロセスから Qt WebEngine プロセスに分離されています。Qt WebEngine コアモジュールは、Qt ライブラリがアプリケーションにバンドルされている場合、アプリケーションと共に出荷される必要があるライブラリです。

Qt WebEngine ウィジェット モジュール

ウェブエンジンビューは、Qt WebEngine モジュールのメインウィジェットコンポーネントです。ウェブコンテンツを読み込むために、様々なアプリケーションで使用することができます。ビューの中で、Web エンジン・ページは、Web コンテンツ、ナビゲートしたリンクの履歴、およびアクションを担当するメイン・フレームを保持します。ビューとページは共通の機能を提供するため、よく似ています。

すべてのページは、共有設定、スクリプト、およびクッキーを含むウェブエンジンプロファイルに属します。プロファイルを使用して、ページを互いに分離することができます。典型的な使用例は、情報が永久に保存されないプライベートブラウジングモード専用のプロファイルです。

コンテンツは、グラフィックカード（GPU）の機能を使用してレンダリングされます。シーングラフは、GPU が持つさまざまな機能やAPIを抽象化するレイヤーとしてQt Rendering Hardware Interfaceに依存しています。レンダリングパイプラインを調整する方法については、Qt Rendering Hardware Interface によるレンダリングを参照してください。

Qt WebEngine モジュール

Qt WebEngine QML の実装には、Qt WebEngine Widgets の実装と同じ要素が含まれています。サポートされているページの機能は、Web エンジン ビューに統合されています。

Qt WebEngine コアモジュール

Qt WebEngine コアはChromium Project をベースにしています。Chromium は独自のネットワークエンジンとペインティングエンジンを提供し、依存モジュールと緊密に連携して開発されています。QtNetwork スタックは使用されませんが、そのセットアップは Qt WebEngine と同期できます。詳細はProxy Support、Managing Certificates、Client Certificates、QWebEngineCookieStore を参照してください。

使用されている Chromium のバージョンは、Qt WebEngine の現在のバージョンで Qt の機能がフリーズした時点で、最新の安定した Chrome のバージョンで使用されているものです。追加のセキュリティパッチは、パッチリリースのたびに新しい Chrome リリースから選択されますが、Qt パッチリリースの凍結に合わせてリリースされたセキュリティパッチも含まれます。Chrome がリリースウィンドウの外で重要な修正をリリースした場合、次のパッチリリースは、パッチの詳細が公開される前にパッチが適用された Qt WebEngine がリリースされるように早められます。

Qt WebEngine は、Qt LTS まで遡った古いバージョンの Qt でのビルドをサポートしています。例えば、Qt WebEngine 6.3、6.4、6.5 はすべて Qt 6.2 でビルドできます。Qt LTS のリリースでは、セキュリティパッチを適用しやすくするために、Qt WebEngine を新しいバージョンに完全に置き換えることができます。

該当する Chromium のバージョンは、qWebEngineChromiumVersion() メソッドを使って実行時に読み込むこともできます。また、qWebEngineChromiumSecurityPatchVersion() を使って、現在のセキュリティパッチレベルを読み込むこともできます。また、Qt WebEngine のソースの CHROMIUM_VERSION ファイルでもバージョンを確認できます。

Qt WebEngine プロセス

Qt WebEngine プロセスは、Web ページのレンダリングと JavaScript の実行に使用される独立した実行ファイルです。これにより、セキュリティの問題が軽減され、特定のコンテンツに起因するクラッシュが隔離されます。

ウィジェットベースのアプリケーションへの Web コンテンツの埋め込み

最も簡単な方法でウェブページを表示するには、QWebEngineView クラスを使用します。ウィジェットなので、QWebEngineView をフォームに埋め込み、その便利な機能を使用して Web サイトをダウンロードして表示することができます。

QWebEngineView *view = new QWebEngineView(parent);
view->load(QUrl("http://www.qt.io/"));
view->show();

QWebEngineView のインスタンスは、QWebEnginePage を1つ持っています。QWebEnginePage は、ページのナビゲーション履歴へのアクセスを提供するQWebEngineHistory と、ウェブページにアクションを適用するQAction オブジェクトをいくつか持つことができます。さらに、QWebEnginePage は、ページのメインフレームのコンテキストで JavaScript コードを実行する機能と、カスタム認証ダイアログの表示など、特定のイベントに対するハンドラのカスタマイズを可能にする機能を備えています。

各QWebEnginePage はQWebEngineProfile に属し、ページ設定を指定するためのQWebEngineSettings 、ページ上でスクリプトを実行するためのQWebEngineScriptCollection 、Chromium の HTTP Cookie にアクセスするためのQWebEngineCookieStore を持つことができます。QWebEnginePage は、スクリプトコレクションを直接指すこともできます。

ウィジェットベースのアプリケーションの場合、ウェブエンジンは自動的に初期化されます。その場合、アプリケーションのメイン・ソース・ファイルでQtWebEngineQuick::initialize を使用して初期化する必要があります：

int main(int argc, char **argv)
{
    QtWebEngineQuick::initialize();

    QApplication app(argc, argv);

    QMainWindow window;
    window.show();

    return app.exec();
}

Qt Quick アプリケーションへの Web コンテンツの埋め込み

WebEngineView QML タイプを使うと、Qt Quick アプリケーションで動的な Web コンテンツのリージョンをレンダリングすることができます。A WebEngineViewタイプは他の QML タイプと画面を共有することもできますし、Qt Quick アプリケーション内で指定された画面全体をカバーすることもできます。

GUIプロセスとレンダリングプロセスの間でOpenGLコンテキストを共有できるようにするには、アプリケーションのメインソースファイルでQtWebEngineQuick::initialize 、Webエンジンを初期化する必要があります：

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QtWebEngineQuick::initialize();

    QQmlApplicationEngine engine;
    engine.load(QUrl("qrc:/main.qml"));

    return app.exec();
}

アプリケーションは、URL または HTML 文字列を使用してWebEngineView にページをロードし、セッション履歴内を移動することができます。デフォルトでは、異なるページへのリンクは同じWebEngineView オブジェクト内にロードされますが、Webサイトでは新しいタブ、ウィンドウ、ダイアログとして開くように要求されることがあります。

以下のサンプルQMLアプリケーションでは、url プロパティを使用してWebページを読み込んでいます：

import QtQuick
import QtQuick.Window
import QtWebEngine

Window {
    width: 1024
    height: 750
    visible: true
    WebEngineView {
        anchors.fill: parent
        url: "https://www.qt.io"
    }
}

スクリプト・インジェクション

Qt WebEngine では、ページのドキュメントオブジェクトモデル(DOM)に直接アクセスすることはできません。しかし、スクリプトをインジェクションすることで、DOMを検査し、適合させることができます。

ページの DOM は、ドキュメントの準備ができたとき、通常はページが完全に読み込まれたときに構築されます。したがって、ドキュメントが作成されるとすぐにスクリプトを実行することは、DOMが準備できるまで待たなければならないDOM操作には適していません。

さらに、注入されたスクリプトは、ページ上で実行される他のスクリプトと同じ世界を共有するため、競合が発生する可能性があります。これを避けるために、QWebEngineScript クラスとWebEngineScript QML タイプは Chromium API forContent Script Extensions を実装しています。これらは、実行するスクリプト、注入ポイント、スクリプトが実行されるワールドを指定します。これにより、ワールド内で DOM にアクセスして操作できるようになります。

Qt 5.8 以降、Qt WebEngine は、以下のGreasemonkey のような属性を使用してスクリプトを拡張することをサポートしています：

• @exclude <regexp>
• @include <regexp>
• @match <regexp>
• @name <free text>
• @run-at [document-start|document-end|document-idle]

この属性は、ユーザースクリプトが実行されるかどうか、またいつ実行されるかを決定します。この属性は、ユーザースクリプトが実行されるかどうか、またいつ実行されるかを決定します。これらの属性は、スクリプトの冒頭で、==UserScript== コメントの中に記述する必要があります：

// ==UserScript==
// @include http://*.qt.io/*
// @exclude http://wiki.qt.io/*
// ==/UserScript==

window.alert("Page is from qt.io, but not wiki.qt.io");

あなたのWebEngine アプリケーションが Qt Quick Compiler を使ってビルドされ、アプリケーションが .qrc リソースの中に JavaScript ファイルを含んでいる場合、Qt Resource Files の JavaScript Files のセクションを読んでください。

証明書の管理

Qt WebEngine は独自のネットワークスタックを使用するため、QSslConfiguration は SSL 接続を開くために使用されません。代わりに、Qt WebEngine はオペレーティングシステムのルート CA 証明書を使用して、相手の証明書を検証します。

WebEngineCertificateError::type とQWebEngineCertificateError::Type の列挙は、発生する可能性のある証明書エラーの種類に関する情報を提供します。このエラーは、WebEngineView::certificateError QML メソッドを使うか、QWebEnginePage::certificateError シグナルに接続することで対処できます。

プロキシのサポート

Qt WebEngine はQt Network のプロキシ設定を使用し、Chromium のネットワーキングスタックに転送します。QNetworkProxy::applicationProxy が設定されている場合、Qt WebEngine でも使用されます。QNetworkProxyFactory::usesSystemConfiguration() が有効な場合、プロキシ設定は自動的にシステムから取得されます。ただし、インストールされているQNetworkProxyFactory からの設定は無視されます。

QNetworkProxy::user() とQNetworkProxy::password() が設定されている場合、これらの認証情報は自動的にプロキシ認証に使用されます。エラー処理のコールバックがないため、有効な認証情報を提供できるかどうかはユーザー次第である。

QNetworkProxy で認証情報が設定されていないが、プロキシが認証を要求している場合、QWebEnginePage::proxyAuthenticationRequired が発行されます。Qt Quickの場合はダイアログが表示されます。

QNetworkProxy のすべてのプロパティが Qt WebEngine でサポートされているわけではありません。つまり、QNetworkProxy::type （）、QNetworkProxy::hostName （）、QNetworkProxy::port （）が考慮されます。QNetworkProxy::rawHeader() のような他のプロキシ設定はすべて無視されます。

高 DPI サポート

高 DPI デバイスをサポートするには、アプリケーション属性Qt::AA_EnableHighDpiScaling を設定して、モニタのピクセル密度に基づいて自動スケーリングを有効にすることをお勧めします。Qt WebEngine アプリケーションでは、スケーリングはデフォルトの拡大率とスクロールバーのサイズに影響します。

例えば

int main(int argc, char *argv[])
{
  QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
  QApplication app(argc, argv);
  // ...
}

Qt WebEngine では、通常解像度と高解像度用の画像をqtwebengine_resources_100p.pakとqtwebengine_resources_200p.pakファイルにバンドルしています。ターゲット解像度に応じて、これらのファイルの1つまたは両方を配置する必要があります。

詳細については、High DPI を参照してください。

WebEngine Core の使用

Qt WebEngine Core は、Qt WebEngine と Qt WebEngine ウィジェットで共有される API を提供し、Chromium のネットワーキングスタックに対して発行された URL リクエストを処理したり、HTTP Cookie にアクセスしたりします。

QWebEngineUrlRequestInterceptor インタフェースを実装し、プロファイルにインターセプタをインス トールすることで、URL リクエスト (QWebEngineUrlRequestInfo) が Chromium のネットワーキングスタッ クに到達する前にインターセプト、ブロック、変更が可能になります。

カスタムURLスキームのサポートを追加するために、プロファイルにQWebEngineUrlSchemeHandler 。スキームに対するリクエストは、QWebEngineUrlRequestJob オブジェクトとしてQWebEngineUrlSchemeHandler::requestStarted() に発行されます。

QWebEngineCookieStore クラスは、Chromium の HTTP Cookie にアクセスするための関数を提供します。この関数を使用して、QNetworkAccessManager とクッキーを同期させたり、ナビゲーション中にクッキーを設定、削除、遮断したりすることができます。

プラットフォーム

Qt WebEngine は現在、Windows、Linux、macOS のみをサポートしています。Chromium のビルド要件により、Qt の他の部分よりも新しいコンパイラが必要になることがよくあります。詳細はQt WebEngine Platform Notesを参照してください。

関連モジュール

Qt WebEngine はQt WebKitモジュールに取って代わります。このモジュールは WebKit プロジェクトをベースにしていますが、Qt 5.2 以降、アップストリームの WebKit コードと積極的に同期しておらず、Qt 5.5 では非推奨となっています。Qt WebKit ウィジェットアプリケーションを Qt WebEngine ウィジェットに変更する方法については、Qt WebKit から Qt WebEngine への移植を参照してください。

Qt WebViewモジュールは、ネイティブの Web ブラウザが利用可能なプラットフォームで使用することができます。

Qt WebChannelモジュールは、C++ 側のQObject オブジェクトと QML 側の JavaScript との双方向通信チャネルを作成するために使用できます。