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つのステップが必要です。
Table of Contents
TEdgeBrowserコンポーネントの環境設定
1. Web(Edge)View2 SDKのインストール
Edge(Web)View2 SDKをインストールする方法は、
- GetItパッケージマネージャ経由でインストール
- GetItCmdとRAD Studioコマンドプロンプトを介して（AutoGetItも使用可能)インストール
getitcmd -ae -i=EdgeView2SDK-1.0.664.37
GetItを利用する以外にもマイクロソフト(nuget)のサイトからWebView2 SDKを入手方法もあります。最新版のWebView2 SDKを入手し、インストールする方法は、こちらを参照ください。
2. Microsoft WebView2 ランタイムのインストール
こちらのサイトからMicrosoft WebView2 ランタイムをダウンロードできます。
Microsoft WebView2 ランタイムは、3種類あります。
- エバーグリーン ブートストラップ(推奨):現在のアーキテクチャに合った最新バージョンのランタイムをダウンロードしてインストールします。アプリケーションと一緒にインストールする場合に使用します。
- Evergreen スタンドアロン インストーラー:Win32またはWin64向けののオフラインインストーラー
- 修正済みバージョン: Evergreenインストーラーが提供する最新バージョンではなく、(特定の)過去のバージョンをダウンロードしてインストールすることができます。
Microsoft WebView2ランタイムのインストールは、構築しているアプリケーションの種類によって異なります。Win32の場合はx86バージョン、Win64の場合はx64バージョン、Win32/Win64どちらも構築している場合は、両方をインストールしてください。
3. WebView2Loader.dllを任意のパスへ配置
WebView2Loader.dllは、アプリケーションからMicrosoft Edgeを利用するために必須のモジュールです。
(Edge)WebView2 SDKのインストールが完了しても、そのままの状態では、RAD Studioあるいは作成したアプリケーションからWebView2Loader.dllは参照できないので、任意の実行パスへ配置してください。これを行う最も簡単な方法は、プログラムから参照可能なパス(例えば、環境変数PATHが通っているパス)に手動で配置するか、以下のコマンドをプロジェクトオプションのビルド後イベントで使用することです。
- Win32向け:
copy /y "$(BDS)¥Redist¥win32¥WebView2Loader.dll" "$(OUTPUTDIR)" - Win64向け:
copy /y "$(BDS)¥Redist¥win64¥WebView2Loader.dll" "$(OUTPUTDIR)"
アプリケーションをデプロイする際には、正しいWebView2Loader.dllを含め、Microsoft WebView2 ランタイムがインストールされていることを確認する必要があります。WebView2Loader.dllはデフォルトでインストールされますが、最も簡単な方法は、エバーグリーン ブートストラップを使用することです。
任意のHTMLを表示する
任意のHTMLをTEdgeBrowserに読み込むには、HTMLの文字列を渡してNavigateToStringメソッドを呼び出します。
|
1 |
EdgeBrowser1.NavigateToString('<h1>Hello From Delphi</h1>'); |
上記のコード例でHTMLはすぐにブラウザに表示されます。ファイルに保存するなどの面倒な作業は必要ありません。
任意のJavaScriptを実行する
TEdgeBrowserでは、ExecuteScriptメソッドでJavaScriptを実行できます。
|
1 |
EdgeBrowser1.ExecuteScript('alert("hello Delphi!");') |
このスクリプトは、あたかもブラウザでJavaScriptコンソールを開いたかのように、現在のページで実行されるので、DOMと対話することもできます。
HTMLソースを表示する
ページのソースを表示するための基本は、ExecuteScriptメソッドを実行することは同じですが、もう少し複雑です。スクリプトは非同期に実行されるため、スクリプトの実行終了時のイベントハンドラが用意されています。このイベントを利用して、JSONオブジェクトを返すこともできます。この場合、JSONオブジェクトとはHTMLソースのことを指します。
|
1 |
EdgeBrowser1.ExecuteScript('encodeURI(document.documentElement.outerHTML)'); |
これはDOM（Document Object Model）を使用してDocument Element（ルート要素、つまり<HTML>）を取得し、Document Elementを含むすべてのHTMLであるouterHTMLを要求します。そしてencodeURIを使ってエンコードします。
以下は、OnExecuteScripteventハンドラのコード例です。
|
1 2 3 4 5 6 7 8 9 |
uses System.NetEncoding; procedure TEdgeViewForm.EdgeBrowser1ExecuteScript(Sender: TCustomEdgeBrowser; AResult: HRESULT; const AResultObjectAsJson: string); begin if AResultObjectAsJson <> 'null' then memoHTML.Text := TNetEncoding.URL.Decode(AResultObjectAsJson).DeQuotedString('"'); end; |
このイベントは、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）から行えます。
詳細については、以下の情報をご確認ください。
- RAD Studio 10.4.2 Sydney Release 2の提供開始を発表
- 10.4.2の新機能
- DocWikiの10.4.2新機能ページ
- RAD Studio 10.4.2 における新機能と修正された顧客から報告された問題
エンバカデロでは、10.4.2において行った作業について大きな成果を上げることができたと考えており、皆さんがこの新しいリリースをご活用いただけるものと期待しています。
Design. Code. Compile. Deploy.
Start Free Trial Upgrade Today
Free Delphi Community Edition Free C++Builder Community Edition
