サイトアイコン Embarcadero RAD Studio, Delphi, & C++Builder Blogs

TEdgeBrowserを使用してスクリプトを実行する方法

Embarcadero Japan Support
delphi webview2 labs

10.4で「TEdgeBrowser」という新しいWebブラウザコンポーネントが追加されました。

TEdgeBrowserコンポーネントは、従来のTWebBrowserに代わるWebブラウザコントロールで、Microsoft Edge ChromiumベースのWebView2コントロールをラップしています。 このVCLコンポーネントは、既存のTWebBrowserに比べて多くの改善を提供します。

先日リリースされたRAD Studio 10.4.2 Sydneyでは、既存のTEdgeBrowserコンポーネントの機能がアップデートされ、MicrosoftEdgeおよびMicrosoftEdgeWebView2ランタイムのGAバージョンで動作するようになりました。

このブログでは、TEdgeBrowserコンポーネントを利用するための環境設定と、任意のHTMLをレンダリング、そして任意のJavaScriptを実行し、WebページからHTMLソースを取得する方法を紹介いたします。

まず、TEdgeBrowserを利用するためには、以下の3つのステップが必要です。

TEdgeBrowserコンポーネントの環境設定

1. Web(Edge)View2 SDKのインストール

Edge(Web)View2 SDKをインストールする方法は、

GetItを利用する以外にもマイクロソフト(nuget)のサイトからWebView2 SDKを入手方法もあります。最新版のWebView2 SDKを入手し、インストールする方法は、こちらを参照ください。

2. Microsoft WebView2 ランタイムのインストール

こちらのサイトからMicrosoft WebView2 ランタイムをダウンロードできます。

Microsoft WebView2 ランタイムは、3種類あります。

Microsoft WebView2ランタイムのインストールは、構築しているアプリケーションの種類によって異なります。Win32の場合はx86バージョン、Win64の場合はx64バージョン、Win32/Win64どちらも構築している場合は、両方をインストールしてください。

3. WebView2Loader.dllを任意のパスへ配置

WebView2Loader.dllは、アプリケーションからMicrosoft Edgeを利用するために必須のモジュールです。

(Edge)WebView2 SDKのインストールが完了しても、そのままの状態では、RAD Studioあるいは作成したアプリケーションからWebView2Loader.dllは参照できないので、任意の実行パスへ配置してください。これを行う最も簡単な方法は、プログラムから参照可能なパス(例えば、環境変数PATHが通っているパス)に手動で配置するか、以下のコマンドをプロジェクトオプションのビルド後イベントで使用することです。

アプリケーションをデプロイする際には、正しいWebView2Loader.dllを含め、Microsoft WebView2 ランタイムがインストールされていることを確認する必要があります。WebView2Loader.dllはデフォルトでインストールされますが、最も簡単な方法は、エバーグリーン ブートストラップを使用することです。

任意のHTMLを表示する

任意のHTMLをTEdgeBrowserに読み込むには、HTMLの文字列を渡してNavigateToStringメソッドを呼び出します。

[crayon-676ba40970144064466171/]

上記のコード例でHTMLはすぐにブラウザに表示されます。ファイルに保存するなどの面倒な作業は必要ありません。

任意のJavaScriptを実行する

TEdgeBrowserでは、ExecuteScriptメソッドでJavaScriptを実行できます。

[crayon-676ba40970152762910403/]

このスクリプトは、あたかもブラウザでJavaScriptコンソールを開いたかのように、現在のページで実行されるので、DOMと対話することもできます。

HTMLソースを表示する

ページのソースを表示するための基本は、ExecuteScriptメソッドを実行することは同じですが、もう少し複雑です。スクリプトは非同期に実行されるため、スクリプトの実行終了時のイベントハンドラが用意されています。このイベントを利用して、JSONオブジェクトを返すこともできます。この場合、JSONオブジェクトとはHTMLソースのことを指します。

[crayon-676ba40970155770902041/]

これはDOM（Document Object Model）を使用してDocument Element（ルート要素、つまり<HTML>）を取得し、Document Elementを含むすべてのHTMLであるouterHTMLを要求します。そしてencodeURIを使ってエンコードします。

以下は、OnExecuteScripteventハンドラのコード例です。

[crayon-676ba40970156005200107/]

このイベントは、ExecuteScriptが呼び出されるたびに発生しますが、結果が返ってこない場合は、AResultObjectAsJsonがnullになります。そのためnull値は無視します。それ以外の場合は、TNetEncoding.URL.Decodeを使用してエンコーディングを削除し、DeQuotedString('"')で引用符を削除します。

この結果を取得して、NavigateToString()を呼び出してすぐに送り返すことができます。

まとめ

詳しくは、GitHubから入手できるRAD Studio-DemoKit/10.4.2-demos/EdgeView/のデモをご覧ください。
TEdgeBrowserは、10.4.2 Sydneyで提供されている素晴らしい新機能・機能改善の一つです。まだアップグレードされていない方は、ぜひお試しください。

今すぐ10.4.2を使い始めよう

すでに、10.4.2のトライアル版が利用可能になっており、今後製品を購入いただくと、10.4.2をダウンロードいただけるようになります。また、すでに製品をお持ちの方は、有効なアップデートサブスクリプションがあれば、既存のライセンスを使用してRAD Studio 10.4.2をご利用いただけます。10.4.2のダウンロードは、新しいカスタマーポータルサイト（my.embarcadero.com）から行えます。

詳細については、以下の情報をご確認ください。

エンバカデロでは、10.4.2において行った作業について大きな成果を上げることができたと考えており、皆さんがこの新しいリリースをご活用いただけるものと期待しています。

モバイルバージョンを終了