mieki256's diary

JavaScriptを使わずに、HTMLを表示したいだけなら、Lazarus は TIpHtmlPanel や THtmlViewer というコントロールを持ってるらしい。

_TIpHtmlPanel - Free Pascal wiki
_LazarusでHTMLをレンダリングする - 高見知英の技術ログ
_BerndGabriel/HtmlViewer
_Webbrowser - Free Pascal wiki

ちなみに Delphi の場合は TWebBrowser があるらしい。IEのコンポーネントを利用するのだとか。

_Delphi/400 VCLのTWebBrowserを最新バージョンのIEとして実行し続ける | Migaro. Tips
_サンプル: "TWebBrowserを使ってみる"

今回は JavaScript も動かしたいと思っているので、上記以外を使いたい。

ググってみたら、以下の3つのパッケージが良さそうだなと…。

• WebView4Delphi : Windows専用。WebView2が利用できる。DelphiとついているけれどLazarusでも使える。
• fpwebview : クロスプラットフォーム対応。Windows, Linux, Mac で使える。各OSの標準ブラウザのコンポーネントを利用できるようにしてくれる。らしい。
• CEF4Delphi : クロスプラットフォーム対応。Chromiumベースのブラウザががっつり入ってる。どのOS上でもChromiumベースが使えるけれど、その分ファイル数やファイルサイズが大きくなって100-200MBぐらいは使うらしい。

_WebView4Delphi - Lazarus wiki
_salvadordf/WebView4Delphi
_fpwebview - Lazarus wiki
_PierceNg/fpwebview
_salvadordf/CEF4Delphi

今回は Windows11上で動けばいいと考えているので、WebView4Delphi が良さそうかなと…。

ちなみに WebView2 というのは…。Webブラウザ Microsoft Edge (Chromiumベース)のレンダリングエンジンをアプリに組み込むためのコンポーネント、とAIが言っている。

Windows11は標準ブラウザが Edge だから、WebView2 を別途インストールする必要は無い…はず。

ただ、Lazarus側から WebView2 を利用するためには、橋渡しをする WebView2Loader.dll が必要になるらしい。その WebView2Loader.dll は WebView4Delphi の配布ファイルの中に入っていて、アプリ(.exe)と同じフォルダに置いておく必要がある模様。

Lazarus 4.4 の場合、オンラインパッケージマネージャからインストールできる。

1. パッケージ → Online Package Manager。
2. 開いたウインドウの検索欄に「webview」と打ち込めば「WebView4Delphi」がリストアップされる。
3. チェックをつけて「Install」をクリック。
4. ダウンロード後、Lazarus IDEがビルドされる。数分待たされる。
5. ビルドが終わると Lazarus IDEが再起動する。

今回は、1.0.1823.32 がインストールされた。

パッケージのダウンロード先は、Online Package Manager の Options → Folders で確認できる。Windowsの場合、デフォルトでは以下になるのかな…。

C:\Users\(USERNAME)\AppData\Local\lazarus\onlinepackagemanager\packages\

WebView2Loader.dll をダウンロード先からコピーして、プロジェクトフォルダに入れないといけない。以下のどちらかを使う。作るアプリが32bit版なら bin32/*.dll を、64bit版なら bin64/*.dll を選ぶ。

C:\Users\(USERNAME)\AppData\Local\lazarus\onlinepackagemanager\packages\WebView4Delphi\bin64\WebView2Loader.dll
C:\Users\(USERNAME)\AppData\Local\lazarus\onlinepackagemanager\packages\WebView4Delphi\bin32\WebView2Loader.dll

github からダウンロードして、パッケージの参照先として設定してインストールする方法もあるらしいけど、そっちは試してない…。

WebView4Delphi のインストールができると、以下の2つのコントロールが利用できるようになる。

• TWVWindowParent : 表示を担当。
• TWVBrowser : 制御を担当。フォーム上のどこに置いてもいい。

Lazarus IDE の上のほうに「WebView4Delphi」というタブが増えて、そこから選ぶこともできるし、コンポーネント一覧ウインドウの検索欄に「twv」と言って絞り込むこともできる。

この2つのコンポーネントは両方共フォーム上に必要。表示だけでは制御ができないし、制御だけでは表示ができない。

TWVWindowParent (WVWindowParent1) をフォーム上に置いたら、プロパティの Browser には TWVBrowser (WVBrowser1) を指定しておく必要がある。

ソースコードは、demos/Lazarus/SimpleBrowser/uSimpleBrowser.pas が参考になりそう。

_WebView4Delphi/demos/Lazarus/SimpleBrowser/uSimpleBrowser.pas at main - salvadordf/WebView4Delphi

• .pas の最後のほうで initialization を記述して初期化。
• フォームの OnFormShow で GlobalWebView2Loader.Initialized を呼んで初期化する。
• 初期化に成功したら WVBrowser1.CreateBrowser(WVWindowParent1.Handle) でブラウザを作る、のかな。
• このソースは TTimer も置いて、初期化に失敗したらタイマーを起動して少し時間が経ってから初期化のリトライをしている模様。WebView2 の初期化はLazarusアプリの処理と非同期で行われるからソースコードの順序通りに動くとは限らないので、こういう処理が必要、とドキュメントに書いてあった気がする。

手元で実験していたけれど、ハマった点としては…。

TWVBrowser の AfterCreated 内で TWVWindowParent#UpdateSize を呼ばないと何も表示されない。UpdateSize を呼ばないとブラウザ部分の表示サイズが小さいままになるっぽい。


また、起動直後にフルスクリーン表示になるようにしてみたのだけど。

  // フォームの全画面表示
  BorderStyle := bsNone;
  WindowState := wsMaximized;

フォームの背景色その他を黒にしていても、数秒ほど灰色のウインドウが表示されてしまう。WebView2 の初期化で時間がかかってるのかな…？

AIに尋ねたら、最前面に黒いパネルを置いて、その時が来るまでフォーム全体をパネルで隠しておいて、TWVBrowser の NavigationCompleted が呼ばれるタイミングでパネルを非表示にする方法を提案された。試してみたところ上手く誤魔化せた。

ちなみに、TWVWindowParent も TPanel も、Align に alClient を指定すればフォーム全体を覆う見た目になる。


ローカルに保存されてるHTMLファイルを開く時は以下。

    WVBrowser1.Navigate(UTF8Decode('file:///' + HTMLPath)):

また、HTMLファイルの内容に相当する文字列を指定する場合は、.NavigateToString() が使える。