Delphi Programming / Object Pascal
[掲載 2022年03月06日] [更新 2022年03月07日] Delphi サンプルプログラム集 |
936_WebView4Delphi コンポーネント |
動作確認等 |
Windows 10 ビルド 19042 + Delphi XE5(UP2) Pro VCL-32
Microsoft Edge 97.0.1072.55 |
|
936_WebView4Delphi.zip [1.0 MB] 2022年03月07日版 (EXE 同梱) |
WebView4Delphi コンポーネントは,TWVWindowParent コンポーネントと TWVBrowser コンポーネントを含めた呼称です.WebView4Delphi コンポーネントを使用すると,Chromium ベースのブラウザの機能を,アプリに実装できます.
WebView4Delphi コンポーネントは,Microsoft Edge WebView2 ランタイムと Microsoft.Web.WebView2NuGet パッケージを使用して,WebView2 インターフェイスを利用します.
WebView4Delphi コンポーネントは,Chromium 版の Microsoft Edge がインストールされている環境でないと利用できません. |
Delphi 10.4 では,、Microsoft WebView2 コンポーネントのラッパークラスである TEdgeBrowser コンポーネントが実装されています. |
01_WebView4Delphi コンポーネントのイントール |
WebView4Delphi コンポーネントは,以下からダウンロードできます.今回は ZIP 書庫をダウンロードしてテストしています. |
|
図1
コンポーネントをダウンロード |
コンポーネントのファイル構成は下図のようになっています.
[packages] フォルダ内のパッケージファイル WebView4Delphi_designtime.dpk を IDE で開き,[インストール] [上書き保存] でインストール終了です. |
|
図2
パッケージをインストール |
TWVWindowParent コンポーネントと,VCL と FMX 用の TWVBrowser コンポーネントがコンポーネントパレットに登録されます.登録タブは,コンポーネントの名前のままの [WebView4Delphi] です. |
|
図3
インストール完了 |
WebView4Delphi コンポーネントを使用するには,Microsoft が提供している WebView2 ランタイムが必要です.以下からダウンロードできます.ダウンロードした EXE ファイルは,インストーラになっています.
今回は 32 ビットの EXE で使用すので x86 のファイルをダウンロードしました.64 ビットの EXE で使用する時は,x64 をダウンロードしてインストールします.
この他に [ダウンロード] のボタンがあります.そのボタンからもダンロードしてインストーラてきます. |
|
図4
ランタイムをダウンロード |
[備考 1]
WebView2 ランタイムは,Windows 11 にはインストールされています. |
[備考 2]
ARM64 は、英アーム (Arm) 社が提供している CPU で使用されている 64 ビット処理のアーキテクチャです.Intel 社の CPU における 64 ビット処理のアーキテクチャは x64 です.
PC に実装されている CPU の種類は,以下のリンクをクリックするか,コマンドとして実行したダイアログの,[プロセッサ] で確認できます,
ms-settings:about |
WebView4Delphi コンポーネントに添付されている,[demos] [Delphi_VCL] [SimpleBrowser] のコードをコピーして作成したサンプルです.必要最小限の機能だけのウェブブラウザとなっています.
EXE の実行には,EXE がある場所 (フォルダ) に WebView2Loader.dll が必要です.32 ビットの EXE には [bin32] 内の DLL を,64 ビットの EXE には [bin64] 内の DLL を使用します. |
|
図5
設計時画面
- 以下を配置
TEdit
TWVWindowParent
TWVBrowser
TTimer
- EXE の生成場所 (フォルダ) に WebView2Loader.dll が必要
|
実行結果です.TEdit に URL を入力して [Enter] キーを押下すると,その URL のウェブページを表示するようにしています. |
|
図6
実行画面 |
unit Unit1;
interface
uses
Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes,
Vcl.Graphics, Vcl.Controls, Vcl.Forms, Vcl.Dialogs, Vcl.StdCtrls,
uWVBrowser, uWVWinControl, uWVWindowParent, uWVTypes, uWVConstants, uWVTypeLibrary,
uWVLibFunctions, uWVLoader, uWVInterfaces, uWVCoreWebView2Args, uWVBrowserBase,
Vcl.ExtCtrls;
type
TForm1 = class(TForm)
WVWindowParent1: TWVWindowParent;
WVBrowser1: TWVBrowser;
Timer1: TTimer;
Edit1: TEdit;
procedure FormShow(Sender: TObject);
procedure WVBrowser1AfterCreated(Sender: TObject);
procedure WVBrowser1InitializationError(Sender: TObject;
aErrorCode: HRESULT; const aErrorMessage: wvstring);
procedure Timer1Timer(Sender: TObject);
procedure Edit1KeyDown(Sender: TObject; var Key: Word; Shift: TShiftState);
private
{ Private 宣言 }
protected
procedure WMMove(var Message: TWMMove); message WM_MOVE;
procedure WMMoving(var Message: TWMMoving); message WM_MOVING;
public
{ Public 宣言 }
end;
var
Form1: TForm1;
implementation
{$R *.dfm}
//=============================================================================
// フォーム表示開始前の処理
// 環境の準備ができていない場合に備えて,タイマーを使用してブラウザを作成
//
// 本サンプルでは WVWindowParent1.browser の値を WVBrowser1 にしている
// 本サンプル開発時の TWVBrowser.TargetCompatibleBrowserVersion は 97.0.1072.55
//
// 本サンプルのコンパイルには,uses に各種のユニットが必要
//=============================================================================
procedure TForm1.FormShow(Sender: TObject);
begin
if GlobalWebView2Loader.InitializationError then begin
showmessage(GlobalWebView2Loader.ErrorMessage);
end else begin
if GlobalWebView2Loader.Initialized then begin
WVBrowser1.CreateBrowser(WVWindowParent1.Handle)
end else begin
Timer1.Enabled := True;
end;
end;
end;
//=============================================================================
// Edit1 の OnKeyDown イベント処理
// [Enter] キー押下で Exit1.Text の URL を表示
//=============================================================================
procedure TForm1.Edit1KeyDown(Sender: TObject; var Key: Word;
Shift: TShiftState);
begin
if Key = VK_RETURN then begin
WVBrowser1.Navigate(Trim(Edit1.Text));
Key := 0;
end;
end;
//=============================================================================
// WVBrowser1 の OnAfterCreated イベント
// ブラウザが生成されたらウェブページを表示
//=============================================================================
procedure TForm1.WVBrowser1AfterCreated(Sender: TObject);
begin
WVWindowParent1.UpdateSize;
Caption := 'シンプルブラウザ';
Edit1.Enabled := True;
Edit1.Text := 'http://mrxray.on.coocan.jp/';
WVBrowser1.Navigate(Edit1.Text);
end;
//=============================================================================
// WVBrowser1 の OnInitializationError イベント
// 初期化に失敗した場合
//=============================================================================
procedure TForm1.WVBrowser1InitializationError(Sender: TObject;
aErrorCode: HRESULT; const aErrorMessage: wvstring);
begin
showmessage(aErrorMessage);
end;
//=============================================================================
// Timer1 の OnTimer イベント
// 本サンプルでは Timer1.Enabled を False にしている
// 本サンプルでは Timer1.Interval を 300 にしている
//=============================================================================
procedure TForm1.Timer1Timer(Sender: TObject);
begin
Timer1.Enabled := False;
if GlobalWebView2Loader.Initialized then begin
WVBrowser1.CreateBrowser(WVWindowParent1.Handle);
end else begin
Timer1.Enabled := True;
end;
end;
//-----------------------------------------------------------------------------
// WM_MOVE メッセージ処理
// WM_MOVE, WM_MOVING の処理がないとウェブページの描画がかすれることがある
//-----------------------------------------------------------------------------
procedure TForm1.WMMove(var Message: TWMMove);
begin
inherited;
if (WVBrowser1 <> nil) then begin
WVBrowser1.NotifyParentWindowPositionChanged;
end;
end;
//-----------------------------------------------------------------------------
// WM_MOVING メッセージ処理
// WM_MOVE, WM_MOVING の処理がないとウェブページの描画がかすれることがある
//-----------------------------------------------------------------------------
procedure TForm1.WMMoving(var Message: TWMMoving);
begin
inherited;
if (WVBrowser1 <> nil) then begin
WVBrowser1.NotifyParentWindowPositionChanged;
end;
end;
//-----------------------------------------------------------------------------
// initialization 部
// GlobalWebView2Loaderをロードしてグローバル環境を非同期的に初期化
//
// UserDataFolder はキャッシュやクッキー等の保存場所
// 指定しないとコンポーネントのデフォルトの名前になる
//-----------------------------------------------------------------------------
initialization
GlobalWebView2Loader := TWVLoader.Create(nil);
GlobalWebView2Loader.UserDataFolder := ExtractFileDir(Application.ExeName)
+ '\CustomCache';
GlobalWebView2Loader.StartWebView2;
end.
コンポーネントの ZIP 書庫の [demos] フォルダに各種のサンプルプログラムがあります. |
|
図7
コンポーネントのサンプル |
|