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 コンポーネント


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
インストール完了




02_ランタイムライブラリのインストール


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





03_必要最小限の機能を実装したサンプル


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
実行画面

リスト1
必要最小限の機能を実装したサンプル
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.




04_その他のサンプル


コンポーネントの ZIP 書庫の [demos] フォルダに各種のサンプルプログラムがあります.



図7
コンポーネントのサンプル