このブログでは、WINSOFT社のFireMonkeyで動作するChromiumベースのWebViewコンポーネントを紹介いたします。
目次
はじめに
RAD Studio 10.4 Sydneyでは、「TEdgeBrowser」という新しいWebブラウザコンポーネントが追加されました。TEdgeBrowserコンポーネントは、従来のTWebBrowserに代わるWebブラウザコントロールで、Microsoft Edge ChromiumベースのWebView2コントロールをラップしています。TEdgeBrowserの使用方法について、こちらを参照ください。
しかしながら、現時点ではTEdgeBrowserコンポーネントは、VCLアプリケーションでのみ利用可能です。では、もしこれと同じ機能をFireMonkeyアプリケーションでも利用したい場合はどうすればいいのでしょうか？
WINSOFT社のWebView for FireMonkeyコンポーネントは、FireMonkeyで利用可能で、アプリケーション内でWebコンテンツをホストすることができます。
WebView for FireMonkeyの動作要件
- Microsoft WebView2 APIを使用
- Windows 32-bitおよびWindows 64-bitをサポート
- Delphi/C++Builder 6 – 10.4で利用可能
- Microsoft Edge (Chromium) バージョン 84.0.515.0 以上が必要
※WebView for FireMonkeyは、Windows専用でmacOS、iOS、Android、Linuxには未対応
インストール
WebView for FireMonkeyは、こちらのURLからダウンロードできます。詳しいインストールの手順は、以下のビデオをご覧ください。
WebView for FireMonkeyコンポーネントを実行するためには、実行ファイルと一緒にWebView2Loader.dllというダイナミックリンクライブラリが必要です。WebView2Loader.dllは、Microsoft WebView2 SDKの一部のファイルで、アプリケーションからMicrosoft Edgeを利用するために必須のモジュールです。そのため、このダイナミックリンクライブラリは、アプリケーションの実行パス内から参照できるパスに配置しておく必要があります。
WebView2Loader.dllは、WebView for FireMonkeyのインストーラーにバンドルされており、インストールが完了するとデフォルトで以下のパスに配置されます。
Win32用:
C:¥Program Files (x86)¥Winsoft¥WebView for FireMonkey¥Library¥Win32
Win64用:
C:¥Program Files (x86)¥Winsoft¥WebView for FireMonkey¥Library¥Win64
注意: WebView for FireMonkeyを利用したアプリケーションを実行し、下図のようなエラーが表示された場合は、Microsoft Edgeのインストールが必要です。
TFWebViewコンポーネントの概要
WebView for FireMonkeyコンポーネントのインストールが完了後、Delphi/C++BuilderのIDEからFireMonkeyプロジェクトを作成し、ツールパレットの[System]カテゴリからTFWebViewコンポーネントをフォーム上に配置してください。
TFWebViewの使い方は、TWebBrowserやTEdgeBrowserと非常に似ています。
それでは、TFWebViewコンポーネントの機能について見ていきましょう。
- Uriプロパティを使用して、Uniform Resource Identifier（URI）を指定できます。
|
1 2 |
FWebView.Active:=True; FWebView.Uri := 'https://winsoft.sk/fwebview.htm'; |
- Zoomプロパティでは、ビューをコントロールできます。
|
1 2 |
FWebView.Zoom := FWebView.Zoom – 0.1; FWebView.Zoom := FWebView.Zoom + 0.1; |
- 以下のコードでWebドキュメントのタイトルを取得できます。
|
1 |
Caption := 'WebView – ' + FWebView.DocumentTitle; |
CapturePreviewプロシージャは、TFWebViewコンポーネントのスクリーンショットを取得して、TMemoryStreamを使用できるスクリーンショットを保存します。 そのユースケースは、以下の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
procedure TFormMain.SpeedButtonCaptureClick(Sender: TObject); begin if CapturePreviewStream = nil then CapturePreviewStream := TMemoryStream.Create else CapturePreviewStream.Clear; FWebView.CapturePreview(pfPng, CapturePreviewStream, CapturePreviewCompleted); end; procedure TFormMain.CapturePreviewCompleted(Sender: TObject); const FileName = 'preview.png'; begin CapturePreviewStream.SaveToFile(FileName); FreeAndNil(CapturePreviewStream); Open(FileName); end; |
- TFWebViewには、HTMLドキュメントへのWebメッセージの投稿などの驚くべき機能がいくつかあります。
- または、HTML / CSS / JSコードをShowHtmlプロシージャのパラメータとして指定して、TFWebView内にドキュメントを作成するように、メモリ内にHTMLを表示します。
- さらに、ExecuteScriptプロシージャを利用することで、Java Scriptコードを実行することができ、例えば、IDで要素を取得や、新しい値を設定など、HTMLドキュメントを操作することができます。
- 最後に、一番の特徴は開発者ツールで遊ぶことです。例えば、getVersion関数を実行するように、ブラウザのメソッドを使用します。このオプションを使用するには、CallDevToolsプロシージャを呼び出すことができます。
今回の記事はここまでです。次回は続きとして TFWebViewコンポーネントのもう少し具体的な使用例について解説いたします。
現時点では、TEdgeBrowser、WebView for FireMonkeyどちらもWindows専用となりますが、VCLではなく、FireMonkeyでWindows向けのアプリケーションの構築も考えており、既存のTWebBrowser(IEベースのコントロール)からの置き換えを検討されている場合は、WebView for FireMonkeyはとても有用な選択肢の一つとなります。もし興味がありましたら、是非WebView for FireMonkeyをお試しください!
WebView for FireMonkeyライブラリは、WinSoft社の製品です。この記事に記載された機能を利用するには、WinSoft社のサイトからこのライブラリを購入する必要があります。このライブラリに関するサポートは、WinSoft社によって提供されます。
Design. Code. Compile. Deploy.
Start Free Trial Upgrade Today
Free Delphi Community Edition Free C++Builder Community Edition
