Qt WebEngine 特徴

Qt WebEngine は以下の機能をサポートしています：

• オーディオおよびビデオコーデック
• Chromium DevTools
• クライアント証明書
• カスタムスキーム
• ドラッグ＆ドロップ
• ファビコン
• フルスクリーン
• ハードウェアアクセラレーション
• HTML5 DRM
• HTML5 ジオロケーション
• HTML5 ウェブソケット
• HTTP/2 プロトコル
• ローカル・ストレージ
• ネイティブ・ダイアログ
• PDFファイル閲覧
• ページライフサイクルAPI
• PDFへの印刷
• プッシュ通知
• スペルチェッカー
• タッチ
• ソースの表示
• ウェブ通知
• ウェブエンジンドライバー
• WebGL
• ウェブRTC

オーディオおよびビデオコーデック

Qt WebEngine MPEG-4 Part 14 (MP4) ファイル フォーマットは、H.264 や MPEG layer-3 (MP3) など、必要な独自のオーディオおよびビデオ コーデックが有効になっている場合にのみサポートされます。独自コーデックは、Qt 構成時にconfigure ツールに以下のオプションを渡すことで有効にすることができます：

-webengine-proprietary-codecs

例えば、Qt をトップレベルでビルドするために Qt を設定するときに、以下のオプションを渡すことができます：

configure -webengine-proprietary-codecs

詳細については、Qtの設定オプションを参照してください。

cmakeを使用してQt WebEngine モジュールだけをビルドする場合、以下のコマンドを使用して設定とビルドを行うことができます（この例では、Qt WebEngine のソースコードはC:\qt\qtwebengine にあります）：

qt-configure-module C:\qt\qtwebengine -webengine-proprietary-codecs
cmake --build . --parallel

FFmpegは、オーディオとビデオを記録、変換、ストリーミングするためのクロスプラットフォームソリューションです。FFmpegは複数のコーデックで使用するように設定でき、コーデックライブラリを配布する際にライセンスの問題が発生します。いくつかのコーデックについては、OpenH264のようなオープンソースの実装が利用可能です。

Chromium DevTools

Chromium DevToolsは、ウェブコンテンツのレイアウトやパフォーマンスの問題を検査し、デバッグする機能を提供します。

この機能は、コマンドラインオプション--remote-debugging-port=[your-port] を指定してQt WebEngine アプリケーションを起動するか、環境変数QTWEBENGINE_REMOTE_DEBUGGING を設定して Chromium ベースのブラウザ（Simple BrowserやNano Browser など）を使用してhttp://localhost:[your-port] に接続することでテストできます。

--webEngineArgs --remote-debugging-port=5000

リモートデバッグ中のWebSocketエラーを回避するには、追加のコマンドライン引数--remote-allow-origins=<origin>[,<origin>, ...] を追加します。<origin> はリクエストの発信元を指します。すべてのオリジンからの接続を許可するには、--remote-allow-origins=* を使用する。何も指定しない場合、Qt WebEngine はリモートデバッグが有効になっているときにコマンドライン引数に--remote-allow-origins=* を追加し、すべてのオリジンからのリクエストを許可します。

Chromium DevToolsページをアプリケーション内に表示することもできます。これを設定するには、this ページに暗黙のうちに DevTools をロードするQWebEnginePage::setInspectedPage() を検査対象のページに呼び出すか、QWebEnginePage::setDevToolsPage() をthis ページに呼び出します。

それぞれのQMLプロパティはWebEngineView.devToolsView とWebEngineView.inspectedView です。

詳しくは、Qt WebEngine デバッグとプロファイリングを参照してください。

クライアント証明書

ウェブサーバーによっては、特に多くのイントラネットサイトでは、クライアント証明書と呼ばれる証明書でクライアントを認証する必要があります。Qt WebEngine 、macOSとWindowsではシステム設定にインストールされているクライアント証明書を、LinuxではNSSデータベースにインストールされているクライアント証明書を読み取ります。証明書は、pk12util ツールを使用して NSS データベースにインストールできます。

デフォルトでは、Qt WebEngine 、サーバーにクライアント証明書を提供しません。これは、そうすることでユーザーを一意に識別し、プライバシーの期待に反する可能性があるためです。

クライアント証明書のサポートを有効にするには、アプリケーションがQWebEnginePage::selectClientCertificate またはWebEngineView.selectClientCertificate シグナルをリッスンし、提供される証明書のいずれかを選択する必要があります。信頼できない Web サイトにナビゲートできるアプリケーションでは、リモート・サーバにユーザーを一意に識別する前に、常にユーザーに選択肢を与えることを推奨します。

システム設定に保存されているクライアント証明書に加えて、Qt WebEngine はインメモリ・ストアも提供している。QWebEngineClientCertificateStore インスタンスはQWebEngineProfile::clientCertificateStore() メソッドで取得できる。アプリケーションはこのクラスを使用して、QWebEngineClientCertificateStore::add （）コールで新しい証明書を追加できます。selectClientCertificate 呼び出しの間、Qt WebEngine は、システムおよびインメモリに保存されたクライアント証明書の両方を一覧表示することに注意してください。

実装の詳細については、クライアント証明書の例も参照してください。

カスタム・スキーム

Qt WebEngine を使用すると、アプリケーションは、特殊なセキュリティ・ポリシーとトランスポート・メカニズムを持つ独自のカスタムURLスキームを定義できるようになります。

カスタムスキームは、通常のウェブセキュリティポリシーを持つ代替ネットワークプロトコル、ユーザーインターフェイスコンポーネントやデバッグ情報を表示するための特権的な内部スキーム、特別な制限を持つサンドボックススキームなどを実装するために使用できます。

詳しくはQWebEngineUrlScheme とQWebEngineUrlSchemeHandler を参照してください。

ドラッグ＆ドロップ

Qt WebEngine はHTML5のドラッグ＆ドロップをサポートしています。

この機能は、シンプル ブラウザまたはナノ ブラウザで HTML5 Demos - Drag and Drop、HTML5 Demos - Simple Drag and Drop、HTML5 Demos - Drag and Drop, Automatic Upload などの HTML5 ドラッグ アンド ドロップ デモを開いてテストできます。

ブラウザへのファイルのドラッグは、実際にはHTML5の一部ではありませんが、サポートされています。HTML5 Demos - File APIを開いてテストできます。

ファビコン

Qt WebEngine ウェブサイトのURLアイコン、ファビコンをサポートしています。各アイコンはQWebEngineProfile ごとに内部データベースに保存され、QWebEnginePage::icon() 呼び出しまたは現在ロードされているコンテンツのWebEngineView.icon プロパティを使用してアクセスできます。

さらにQt WebEngine は、内部プロファイルのデータベースにすでに保存されているアイコンにアクセスするためのAPIを提供します。

QMLファビコン処理

アイコンにアクセスするために、QQuickImageProvider が登録されています。このプロバイダには、スキームが "image:"、ホストが "favicon "の特別なURLでアクセスすることができます。

Image {
    source: "image://favicon/url"
}

url はファビコンのURLにすることができます：

Image {
    source: "image://favicon/https://www.qt.io/hubfs/2016_Qt_Logo/qt_logo_green_rgb_16x16.png"
}

また、url は、そのアイコンにアクセスするためのページURLにすることもできます：

Image {
    source: "image://favicon/https://www.qt.io/"
}

複数のアイコンが利用可能な場合、Image::sourceSize プロパティを指定して、希望するサイズのアイコンを選択することができます。Image::sourceSize が指定されていないか 0 の場合、利用可能な最大のアイコンが選択されます。

画像プロバイダは、要求されたアイコンを既存のWebEngineView インスタンスから検索します。まず、現在表示されているアイコンに一致するものを探します。一致するものが見つからなかった場合は、データベースからアイコンを要求します。各プロファイルは独自のアイコンデータベースを持ち、永続ストレージに保存されるため、保存されたアイコンはネットワーク接続なしでもアクセスできます。アイコンをデータベースに保存するには、事前に読み込んでおく必要があります。

C++ファビコン処理

ユーザーは、QWebEngineProfile::requestIconForPageURL() またはQWebEngineProfile::requestIconForIconURL() コールを使用して、QWebEngineProfile ごとにロード済みのコンテンツからアイコンを要求できます。プロファイルのデータベースは永続ストレージに保存され、ネットワーク接続なしでアクセスできることに注意してください。

フルスクリーン

Qt WebEngine は、フルスクリーンモードでのウェブコンテンツの表示をサポートしています。詳細については、WebEngineSettings.fullscreenSupportEnabled 、WebEngineView.fullScreenRequested 、QWebEngineSettings::FullScreenSupportEnabled 、QWebEnginePage::fullScreenRequested を参照してください。

この機能は、Video PlayerまたはNano Browser で YouTube のビデオを再生し、フルスクリーンアイコンをクリックしてフルスクリーンモードにすることでテストできます。

ハードウェア・アクセラレーション

Qt WebEngine は、可能な限りウェブコンテンツのレンダリングにハードウェアアクセラレーションを使用するようにしています。実際のレンダリングはChromiumによって実行され、最終的な画像はChromiumのコンポジターによって生成されます。コンポジターは、プラットフォームと利用可能なドライバに応じて、OpenGL、Vulkan、Metal、またはDirect3Dなどの最新のGPU APIを使用します。

この最終画像は、Qt WebEngine によって Qt レンダリングパイプラインにインポートされ、GPU 相互運用性を使用して、不要なコピーなしで GPU リソースを効率的に共有できます。インポートされた画像は、Qt Quick Scene Graphs に渡され、Qt Rendering Hardware Interface（RHI）を介してハードウェアアクセラレーションによるレンダリングも実行されます。

Qt も Chromium も GPU アクセラレーションに依存していますが、必ずしも同じグラフィック API を使用しているとは限りません。実際には、Qt WebEngine 、可能な限り Chromium の GPU バックエンドを Qt が使用するバックエンドに合わせるようにしています。互換性と最適なパフォーマンスを確保するために、Qt が選択したバックエンド設定をデフォルトとしていますが、必要に応じてこれらのデフォルトを手動で上書きすることも可能です。

ハードウェアアクセラレーションが利用できない、または失敗した場合、Qt WebEngine は自動的にソフトウェアレンダリングにフォールバックしようとします。

ソフトウェアレンダリングの強制使用

ソフトウェアレンダリングへの自動フォールバックは常に可能というわけではなく、Qt WebEngine 、ウェブコンテンツを正しく表示できなかったり、エラーメッセージが表示されて終了したりすることがあります。このような場合は、ハードウェアアクセラレーションを明示的に無効にし、代わりにソフトウェアレンダリングを使用する必要があります。

ソフトウェアレンダリングを強制する方法は複数あります：

• Chromium でハードウェアアクセラレーションを無効にする：

  export QTWEBENGINE_CHROMIUM_FLAGS=--disable-gpu

• Qt Quick Scene Graph でハードウェアアクセラレーションを無効にする：

  export QT_QUICK_BACKEND=software

Qt でグラフィックス API バックエンドを変更する

グラフィックスAPIのバックエンドを選択する方法は2つあります：

• アプリケーションを起動する前にQSG_RHI_BACKEND 環境変数を設定する。
• 最初のQQuickWindow を構築する前に、QSGRendererInterface::GraphicsApi と組み合わせてQQuickWindow::setGraphicsApi() を呼び出します。

詳細はQt Rendering Hardware Interface を参照してください。

ChromiumのグラフィックスAPIバックエンドの変更

Chromium のグラフィック API バックエンドを変更することは、互換性の問題や一貫性のないレンダリング動作を引き起こす可能性があるため、一般的に推奨されません。可能な限り、QSG_RHI_BACKEND 環境変数を使用してください。ただし、デバッグやドライバ固有の問題の一時的な回避策として必要な場合もあります。

Chromiumのバックエンドをオーバーライドするには、QTWEBENGINE_CHROMIUM_FLAGS 環境変数を設定して、対応するChromiumコマンドラインフラグ（--use-gl= や--use-angle= など）を渡します。

Qt WebEngine において、Chromium は現在、ハードウェアアクセラレーションがサ ポートされているすべてのプラットフォームで、デフォルトでANGLEバックエンドを使用しています。ANGLE は、Chromium のクロスプラットフォームグラフィックス抽象化レイヤであ り、基盤となるネイティブグラフィックスバックエンドを隠蔽します。

Qt WebEngine が使用するデフォルトの設定は次のとおりです：

export QTWEBENGINE_CHROMIUM_FLAGS="--use-gl=angle --use-angle=default"

特定の設定下でANGLEがクラッシュする場合、ハードウェアアクセラレーションによるレンダリングにVulkanを使用しながら、ANGLEを完全に無効にすることができます：

export QTWEBENGINE_CHROMIUM_FLAGS="--use-gl=stub --enable-features=Vulkan --use-vulkan=native"

注：WebGLなどの特定の機能は、このようなカスタム構成では動作しない可能性があります。別の方法として、次の構成では、WebGLサポートのためにANGLEを有効にしたまま、レンダリングにVulkanを使用します：

export QTWEBENGINE_CHROMIUM_FLAGS="--use-gl=angle --enable-features=Vulkan --use-vulkan=native"

対応するChromiumコマンドラインフラグの詳細については、Chromiumのソースコードを参照してください：対応するChromiumコマンドラインフラグの詳細については、 Chromiumのソースコードを参照してください：//ui/gl/gl_switches.cc

Linux上のNVIDIA

NVIDIA GPUを搭載したLinuxシステムでは、Chromiumは強制的にVulkanをレンダリングに使用します。

Qt WebEngine は、GBMバッファオブジェクトを使用して、ChromiumからQtのグラフィックスパイプラインにテクスチャをインポートします。しかし、NVIDIAドライバは現在、これらのバッファオブジェクトの割り当てをサポートしていません。回避策として、Qt WebEngine 、Chromium を強制的に Vulkan でレンダリングし、Vulkan 相互運用性を使用してテクスチャをインポートします。

ロギングとトラブルシューティングの有効化

レンダリングの問題が発生した場合、問題を効果的に調査し報告するためには、失敗した設定とハードウェアアクセラレーションの現在の状態を知ることが重要です。

この情報を確認する最も簡単な方法は、chrome://gpu 内部ページをロードして、その内容を分析することです。ただし、レンダリングの問題が発生している間、このページが常に読めるとは限りませんし、利用できるとは限りません。

Qt WebEngine 詳細なグラフィック情報をダンプするために有効にすることができるロギングカテゴリを提供します：

• qt.webenginecontext Qt WebEngine がどのように初期化されたか、検出された GPU、およびグラフィッ クス設定を記録します。
• qt.webengine.compositor Chromium によって使用された設定と、Qt WebEngine が Qt のグラフィックパイプラインにテクスチャをインポートする手順を記録します。

これらのログを有効にするには、例えばQT_LOGGING_RULES 環境変数を設定します：

export QT_LOGGING_RULES="qt.webenginecontext=true;qt.webengine.compositor=true"

これはqt.webenginecontext の GPU ログの例です：

Chromium GL Backend: angle
Chromium ANGLE Backend: default
Chromium Vulkan Backend: disabled

QSG RHI Backend: OpenGL
QSG RHI Backend Supported: yes
QSG RHI Device: AMD AMD Radeon Graphics (radeonsi, raphael_mendocino, LLVM 20.1.8, DRM 3.61, 6.12.41-gentoo-x86_64) 4.6 (Compatibility Profile) Mesa 25.1.9
QSG RHI GPU Vendor: AMD

最初のブロックは Chromium の設定を示しています：

• Chromium GL Backend は--use-gl= の設定値を示しています。
• Chromium ANGLE Backend --use-angle= の設定値を示しています。
• Chromium Vulkan Backend --use-vulkan= の設定値を示しています。

2番目のブロックはQtの設定を示しています：

• QSG RHI Backend 基礎となるネイティブ・グラフィックス API を示します。
• QSG RHI Backend Supported このグラフィックス API がQt WebEngine でサポートされているかどうかを示します。
• QSG RHI Device RHI が使用するグラフィックデバイスのメタデータを示します。
• QSG RHI Vendor RHI が使用するグラフィックデバイスのベンダーを示します。

同じGPUのqt.webengine.compositor 、ANGLEログの例です：

qt.webengine.compositor: ANGLE_OPENGL display is initialized:
GL Renderer: ANGLE (AMD, AMD Radeon Graphics (radeonsi raphael_mendocino LLVM 20.1.8), OpenGL 4.6 (Core Profile) Mesa 25.1.9)
2 GPU(s) detected:
  Nvidia, device id: 0x1d01, driver: Mesa 25.1.9, system device id: 0x0, preference: None, active: no
  AMD, device id: 0x164e, driver: Mesa 25.1.9, system device id: 0x0, preference: None, active: yes
NVIDIA Optimus: disabled
AMD Switchable: disabled

上記のログエントリは、次のことを示しています：

• ANGLE_OPENGL display is initialized ANGLEが指定されたディスプレイタイプで正常に初期化されたことを確認します。
• GL Renderer ANGLEが使用するグラフィックデバイスのメタデータを示します（QSG RHI Device と一致することが期待されます）。
• 2 GPU(s) detected ANGLEが検出したGPUをリストします。
• NVIDIA Optimus およびAMD Switchable は、ANGLEが実行時のGPU切り替えをサポートしているかどうかを示します（現在はサポートされていません）。

HTML5 DRM

Qt WebEngine Widevine CDMプラグインがインストールされている場合、DRM で保護された動画の表示に対応します。このプラグインはバイナリ形式でのみ提供されるため、DRM復号化の実装の詳細を隠すことができます。このプラグインは、サードパーティから入手することも、Google Chrome のインストールから入手することもできます。

起動時に、Qt WebEngine は、デフォルトの Google Chrome インストール・ディレクトリや Linux ディストリビュータ固有のパスなど、いくつかのよく知られた場所でWidevine CDMプラグインを探します。widevine-path を使用して、QTWEBENGINE_CHROMIUM_FLAGS でプラグインの場所を渡すこともできます。

Windows の場合

set QTWEBENGINE_CHROMIUM_FLAGS=--widevine-path="C:/some path/widevinecdm.dll"

Linuxの場合

export QTWEBENGINE_CHROMIUM_FLAGS=--widevine-path="/some path/libwidevinecdm.so"

macOSの場合：

export QTWEBENGINE_CHROMIUM_FLAGS=--widevine-path="/some path/libwidevinecdm.dylib"

DRMサービスで最も一般的に使用されているビデオフォーマットH.264は、独自のオーディオおよびビデオコーデックを必要とします。コーデックの有効化の詳細については、オーディオおよびビデオコーデックを参照してください。

Simple BrowserまたはNano Browser のサンプル プロジェクトでcastLabsまたはBitmovin Playerの動画を再生すると、この機能をテストできます。

HTML5 ジオロケーション

Qt WebEngine は JavaScript Geolocation API をサポートしています。 Qt Positioningをバックエンドとしてサポートしています。HTML5 ジオロケーションはデフォルトで無効になっています。明示的に許可するには、アプリケーションはQWebEnginePage::permissionRequested をリッスンする必要があります。QWebEnginePermission::PermissionType::Geolocation のタイプを持つパーミッション要求を受信すると、受信したオブジェクトでQWebEnginePermission::grant() を呼び出して、必要なパーミッションを許可できます。

Qt WebEngine がQt Positioning サポート付きでビルドされている場合、マップを使用してユーザーの現在位置を検索することで、この機能をテストできます。

参照 Qt Positioningを参照してください。GPSまたはIPベースの測位のようなバックエンドのセットアップが可能です。

HTML5パーミッション

Qt WebEngine は、QWebEnginePermission API を介して、いくつかのタイプのウェブ機能パーミッションをサポートしています。ページがユーザーのカメラや位置情報へのアクセスのような潜在的にセンシティブなユーザー情報を要求するたびに、ウェブドメインにパーミッションを付与（または拒否）することができます。

アプリケーション開発者は、エンドユーザーに許可を求めるか、自動的に許可を与えるかを選択できる。さらに、既知のドメインからの要求が予想される場合、特定のパーミッションを事前に許可または拒否することもできます。

QWebEngineProfile オブジェクトは、個々のドメインに許可または拒否されたすべてのパーミッションを保存します。現在のプロファイルがoff-the-recordでない限り、これらのパーミッションはディスクに保存され、次にアプリケーションが開かれたときに呼び出される。しかし、この動作は変更することができ、開発者はアプリケーションが終了するまでパーミッションを保存するだけにしたり、Webサイトがパーミッションを要求するたびにパーミッションの要求をトリガーするようにすることもできます。

現在サポートされているウェブパーミッションの完全なリストは、in the QWebEnginePermission documentation にあります。

フレーム

QWebEngineFrame API を使用すると、開発者はウェブページ内の個々の<iframe> 要素を検査し、操作することができます。これを使ってJavaScriptを注入したり、フレームが埋め込まれているページを無視してフレームの内容だけを印刷したりすることができます。フレームは、フレームが他のフレームの中に存在する場合のために、再帰的にアクセスすることもできます。

HTML5 ウェブソケット

Qt WebEngine は、ws:// またはwss:// プロトコルを使用して WebSocket サーバーと通信するための WebSocket JavaScript API をサポートしています。さらに、Qt WebChannel およびQt WebSockets との統合により、JavaScript とアプリケーションのネイティブ側との通信が可能になります。

Qt WebChannel モジュールには、チャットサーバーとそのウェブベースのチャットクライアントの素晴らしい例があります。このクライアントは、Qt WebEngine のサンプルブラウザ（Simple BrowserやNano Browser など）ですぐに動作します。

HTTP/2 プロトコル

Qt WebEngine はHTTP/2プロトコルの Chromium 実装をサポートしています。

この機能は、Simple BrowserまたはNano Browser でAkamai HTTP/2 Demo などの HTTP/2 デモを開くことでテストできます。

ローカルストレージ

Qt WebEngine は、有効期限なしでLocal Storage にキーと値のペアを保存する機能をサポートしています。これはWeb Storage API の一部であり、ユーザーはWindow.localStorage JavaScript プロパティを使用して、指定されたドメインのStorage オブジェクトにアクセスできます。保存されたデータは、ページやブラウザ・アプリケーションが閉じられた後でも持続します。

なお、Local ストレージは、QWebEngineSettings::LocalStorageEnabled 設定で無効にすることもできます。さらに、QWebEngineProfile::setPersistentStoragePath を呼び出すことで、保存パスを調整することができます。

QWebEngineProfile profile("MyProfile");
profile.settings()->setAttribute(QWebEngineSettings::LocalStorageEnabled, isEnabled);
profile.setPersistentStoragePath("/path/to/storage");

Qt WebEngine また、Application パネルにアクセスし、Local Storage メニューを展開することで、Qt WebEngine デベロッパーツールで Local Storage の内容を簡単に調査することもできます。

ネイティブ・ダイアログ

ウェブページは以下の機能のためにダイアログを要求するかもしれません：

• HTTP認証やプロキシ認証のためのユーザー認証情報の入力
• JavaScriptアラート、確認ダイアログ、プロンプトの表示
• 色の選択
• ファイルの選択
• フォーム検証メッセージの表示

Qt WebEngine はこれらの機能のための標準ダイアログを提供します。ウィジェットベースのアプリケーションでは、標準ダイアログはQDialog に基づいていますが、Qt Quick アプリケーションではQt Quick Controls 1 またはQt Quick Controls 2 に基づいています。後者はeglfs プラットフォームでのみ使用されます。

Qt Quick Controls 1 またはQt Quick Controls 2 に基づいたダイアログを明示的に強制するには、QTWEBENGINE_DIALOG_SET 環境変数をQtQuickControls1 またはQtQuickControls2 に設定します。

Qt WebEngine ウィジェット・ダイアログは、QWebEnginePage::chooseFiles(),QWebEnginePage::javaScriptAlert(),QWebEnginePage::javaScriptConfirm(),QWebEnginePage::javaScriptPrompt() 関数を再実装することでカスタマイズできます。

Qt Quick ダイアログは、WebEngineView::authenticationDialogRequested()、WebEngineView::javaScriptDialogRequested()、WebEngineView::colorDialogRequested()、WebEngineView::fileDialogRequested()、WebEngineView::formValidationMessageRequested() シグナルに接続することでカスタマイズできます。

PDF ファイルの表示

Qt WebEngine は、PDF ドキュメントへのナビゲートによる閲覧をサポートします。この機能は、Chromium拡張APIとPDFビューアプラグインを使用してPDF文書を表示します。Simple BrowserまたはNano Browserでテストできます。

この機能は、QWebEngineSettings::PdfViewerEnabled またはWebEngineSettings::pdfViewerEnabled 設定でオン（デフォルト）またはオフにできます。

ページライフサイクルAPI

Qt WebEngine Page Lifecycle API 仕様をサポートしています。これは、ユーザーエージェントがバックグラウンドページを凍結または破棄することによってリソースの消費を抑えることを可能にするための、HTML標準に対する進行中の拡張機能です。この機能はウィジェットAPIとQML APIの両方で公開されています。

QML API の使用例については、WebEngine Lifecycle Example を参照してください。

ライフサイクル状態の概要

各WebEngineView アイテム（またはQWebEnginePage オブジェクト）のライフサイクル状態は、active、frozen、discarded の 3 種類です。これらの状態は、CPU のスリープ状態のように、ウェブビューのリソース使用を制御します。

アクティブ状態は、ウェブビューの通常の制限のない状態です。表示されているすべての Web ビューは常にアクティブ状態であり、読み込みが完了していないすべての Web ビューもアクティブ状態です。他のライフサイクル状態に移行できるのは、不可視のアイドル状態のウェブビューだけです。

フリーズ状態は CPU 使用率が低い状態です。この状態では、ほとんどの HTML タスクソースは一時停止（フリーズ）され、その結果、ほとんどの DOM イベント処理と JavaScript 実行も一時停止されます。この状態ではレンダリングができないため、フリーズするためにはウェブビューが不可視でなければなりません。

破棄された状態は、極端にリソースを節約した状態です。この状態では、Web ビューのブラウズコンテキストが破棄され、対応するレンダラーのサブプロセスがシャットダウンされます。この状態でのCPUとメモリの使用量は実質的にゼロになります。この状態を終了すると、ウェブページが自動的に再読み込みされます。破棄された状態に入るプロセスと出るプロセスは、ウェブビューの閲覧履歴をシリアライズしてビューを破棄し、新しいビューを作成してその履歴を復元するのと似ています。

WebEngineView::LifecycleState も参照してください。ウィジェットAPIにおける同等のものはQWebEnginePage::LifecycleState です。

lifecycleState とrecommendedState プロパティ

WebEngineView 型のlifecycleState プロパティは、ウェブビューの現在のライフサイクル状態を制御する読み書き可能なプロパティです。このプロパティは、どのような状態に遷移できるかについて、できる限り制限を設けないように設計されています。例えば、現在バックグラウンドで音楽を再生しているウェブビューをフリーズさせ、音楽を停止させることができます。ユーザが見ているバックグラウンドのアクティビティを中断しないように、あまり積極的でないリソース節約戦略を実装するには、recommendedState プロパティを使用する必要があります。

WebEngineView 型のrecommendedState プロパティは読み取り専用のプロパティで、ウェブビューの現在のアクティビティを考慮して、lifecycleState プロパティの安全な制限値を計算します。したがって、バックグラウンドで音楽を再生しているウェブビューの例では、推奨される状態はActive になります。アプリケーションがバックグラウンドのアクティビティを中断することを避けたい場合、ウェブビューをrecommendedState で指定されている状態よりも積極的にリソースを節約するライフサイクル状態にすることは避けるべきです。

WebEngineView::lifecycleState とWebEngineView::recommendedState も参照してください。ウィジェットAPIで同等のものは、QWebEnginePage::lifecycleState とQWebEnginePage::recommendedState です。

DOM拡張

lifecycleState プロパティはPage Lifecycle API 仕様に関連しており、freeze とresume の 2 つの新しい DOM イベントを指定し、Document.wasDiscarded の新しいブール値プロパティを追加しています。freeze とresume イベントは、Active からFrozen state に遷移するときに発生し、その逆も同様です。Document.wasDiscarded プロパティは、Discarded 状態からActive 状態に遷移するときにtrue に設定されます。

PDFへの印刷

Qt WebEngine は、ウェブ・ページを PDF ファイルに印刷することをサポートしています。詳細については、QWebEnginePage::printToPdf() およびWebEngineView.printToPdf を参照してください。

この機能はHtml2Pdfを使ってテストすることができます。

プッシュ通知

Qt WebEngine は、JavaScriptPush APIをサポートしており、プッシュ通知の購読と受信ができます。詳しくはQWebEngineProfile::setPushServiceEnabled() とWebEngineProfile.setPushServiceEnabled をご覧ください。

この機能はWebEngine Push Notifications Example でテストできます。

スペルチェッカー

Qt WebEngine は、HTML フォームにスペルチェックのサポートを統合し、ユーザがスペルチェックされたメッセージを送信できるようにします。ユーザがスペルミスの下線を引いた単語をクリックすると、デフォルトのコンテキストメニューに最大 4 つの候補が表示されます。1つを選択すると、スペルミスした単語が置換されます。

スペルチェックには辞書が必要です。Hunspellプロジェクトの辞書をサポートしていますが、特別なバイナリ形式にコンパイルする必要があります。Hunspell辞書は2つのファイルで構成されています：

• .dic 、その言語の単語を含む辞書ファイル。
• 辞書内の特別なフラグの意味を定義する.aff ファイル。

これらの2つのファイルは、Qtに同梱されているqwebengine_convert_dict ツールを使用して、bdic 形式に変換することができます。Qt WebEngine スペルチェッカーが初期化されると、bdict 辞書をロードし、整合性をチェックしようとします。

CMake では、qt_add_webengine_dictionaryコマンドを使用して、Hunspell.dic ファイルを.bdic バイナリ形式に変換できます。このコマンドはqtwebengine_dictionaries ターゲットを作成し、プロジェクトが依存関係として使用できるようにします。

デフォルトでは、Qt WebEngine は、qtwebengine_dictionariesディレクトリが存在すれば、実行ファイルに相対するqtwebengine_dictionariesディレクトリ内の辞書を検索します。存在しない場合は、QT_INSTALL_PREFIX/qtwebengine_dictionaries を検索します。

あるいは、QTWEBENGINE_DICTIONARIES_PATH 環境変数の値として、あるいはコマンドラインから、辞書ディレクトリのパスを設定することもできます：

--webEngineArgs --webengine-dictionaries-path=<path>

オーバーライドが設定されると、アプリケーションは指定されたディレクトリの中だけで辞書を探し、それ以外の場所は探しません。

macOSでは、ビルド時にQt WebEngine がどのように設定されているかによって、スペルチェックのデータがどのように見つかるか2つの可能性があります：

• Hunspell辞書（デフォルト） - 他のプラットフォームと同様に、.bdic辞書が使用されます。
• ネイティブ辞書 - macOSのスペルチェックAPIが使用されます。

したがって、macOS Hunspell の場合、Qt WebEngine は、アプリケーションバンドルResources ディレクトリ内のqtwebengine_dictionariesサブディレクトリと、Qt フレームワークバンドル内のResources ディレクトリを検索します。

要約すると、Hunspellを使用する場合、以下のパスが考慮されます：

• QTWEBENGINE_DICTIONARIES_PATHもし
• QCoreApplication::applicationDirPath()/qtwebengine_dictionaries またはQCoreApplication::applicationDirPath()/../Contents/Resources/qtwebengine_dictionaries (macOS の場合)
• [QLibraryInfo::DataPath]/qtwebengine_dictionaries または path/to/QtWebEngineCore.framework/Resources/qtwebengine_dictionaries (macOS の Qt フレームワークバンドル)

スペルチェックはデフォルトでは無効になっており、ウィジェットベースのアプリケーションではQWebEngineProfile::setSpellCheckEnabled() メソッドを、Qt Quick アプリケーションではWebEngineProfile.spellCheckEnabled プロパティを使用することで、プロファイルごとに有効にすることができます。

スペルチェックに使用される現在の言語はプロファイルごとに定義され、QWebEngineProfile::setSpellCheckLanguages() メソッドまたはWebEngineProfile.spellCheckLanguages プロパティを使用して設定できます。

この機能は、Spellchecker Exampleをビルドして実行することでテストできます。

Qt WebEngine また、webengine-spellchecker configureスイッチを使用すれば、スペルチェッカーをサポートせずにコンパイルすることもできます。

qt-configure-module path\to\qtwebengine\sources -no-webengine-spellchecker

詳細はQt Configure Options を参照してください。

タッチ

Qt WebEngine はタッチデバイスをサポートし、ウェブページをナビゲートしたりインタラクトしたりできるようになります。

JavaScript APIにおけるタッチイベントのサポートは、タッチスクリーンの存在に依存します（つまり、タッチデバイスがシステムに接続されている場合、ontouchstart と関連するハンドラがdocument.window オブジェクトに存在します）。

一部のウェブサイトでは、このAPIを使用してモバイルデバイスで実行するかデスクトップで実行するかを決定し、それに基づいてデザインを決めています。このため、タッチスクリーンのノートパソコンや、偽のタッチデバイスをエミュレートするその他のセットアップでは、望ましくない結果が生じる可能性があります。

アプリケーションは、QWebEngineSettings::TouchEventsApiEnabled でこの機能を明示的に設定できます。

APIを無効にしても、タッチイベントはウェブページに配信されます。WebEngine ビュー・フォーカス・プロキシ・オブジェクトにQObject::installEventFilter を使用してイベント・フィルタ・オブジェクトをインストールし、すべてのタッチ・イベントをフィルタリングすることで、ウェブ・ページへのタッチ・イベントの配信を禁止することができます。

ビューソース

Qt WebEngine は、ウェブページの HTML ソースの表示をサポートしています。

この機能はカスタムメニューから使用したり、カスタムイベントに割り当てることができます。詳細については、WebEngineView::WebAction 、およびQWebEnginePage::WebAction を参照してください。

この機能は、Simple BrowserまたはNano Browser でウェブページを開き、コンテキストメニューでPage Source を選択することでテストできます。Page Source コンテキスト・メニュー・エントリは、新しいタブでソース・ビューを開きます。

現在のタブでソース・ビューを開くために、view-source URI スキームを持つ URL もサポートされています。たとえば、以下の URL を URL バーに入力すると、qt.io ウェブページの HTML ソースを表示できます：

view-source:https://www.qt.io/

view-source URIスキームを使用した不完全なURLの自動補完により、この機能をより快適に使用できます。例えば、以下の不完全なURLでもqt.ioウェブページのソースビューをロードします：

view-source:qt.io

ウェブ通知

QtWebEngine は JavaScriptWeb Notifications API をサポートしています。アプリケーションは、QWebEnginePage::Notifications またはWebEngineView.Notifications を使用して、明示的にこの機能を許可する必要があります。

WebEngineDriver

WebEngineDriver を使用すると、ブラウザ間で Web サイトのテストを自動化できます。WebEngineDriver は ChromeDriver をベースにしており、同じように使用できます。ChromeDriverの詳細と使用方法については、ChromeDriverユーザーサイトをご覧ください。

WebEngineDriverは、Qt WebEngine ベースのブラウザに接続できるように、ChromeDriverと比較して若干の変更が加えられています。Simple Browserや Nano Browserなど、Qt WebEngine のサンプルブラウザと互換性があります。

ブラウザの自動化はSelenium WebDriverのようなWebDriverクライアントを通してスクリプト化されます。例えば、WebEngineDriverはSelenium WebDriverのPython言語バインディングで使用できます：

from selenium import webdriver
from selenium.webdriver.chrome.service import Service

service = Service(executable_path='QTDIR/libexec/webenginedriver')
options = webdriver.ChromeOptions()
options.binary_location = 'path/to/browser_binary'

driver = webdriver.Chrome(service=service, options=options)
driver.get("http://www.google.com/")
driver.quit()

この例では

• executable_path を WebEngineDriver のバイナリパスに設定する必要があります。
• QTDIR はQtがインストールされているディレクトリです。
• options.binary_location はブラウザのバイナリパスに設定します。

スクリプトを実行する前に、QTWEBENGINE_REMOTE_DEBUGGING 環境変数を設定する必要があります。その値は、ブラウザと WebEngineDriver の両方が互いに通信するために使用するポート番号です。

export QTWEBENGINE_REMOTE_DEBUGGING=12345

スクリプトを実行すると、指定されたウェブブラウザが開き、Googleのウェブサイトがロードされます。

WebEngineDriverは、リモートデバッグポートが設定された状態で起動されていれば、すでに実行されているブラウザにアタッチすることもできます。options.debugger_address は、スクリプト内でリモートデバッグアドレスに設定する必要があります：

options.debugger_address = 'localhost:12345'

この場合、ブラウザはすでに実行されているため、options.binary_location を設定すべきではありません。options.debugger_address が設定されている場合、環境変数QTWEBENGINE_REMOTE_DEBUGGING は WebEngineDriver によって使用されません。

WebGL

Qt WebEngine は、一部のグラフィックスタックのセットアップでWebGLをサポートします。ユーザーは、QtWebEngine のアプリケーションを使用して chrome://gpu ページにアクセスできます。グラフィックス機能ステータスの概要では、WebGLが現在のプラットフォームセットアップでサポートされているかどうかを確認できます。ユーザーは、WebGLレポートを確認することもできます。

WebGL サポートはデフォルトで有効になっています。QWebEngineSettings::WebGLEnabled 、無効にすることができます。

WebRTC

WebRTC は、シンプルな API を介してブラウザにリアルタイム通信（RTC）機能を提供します。詳細については、WebEngineView.Feature および QWebEnginePage::Feature を参照してください。

この機能は、ウェブカメラまたはマイクをセットアップし、Simple BrowserまたはNano Browserで https://test.webrtc.org/ 。