2026年02月27日

Vue.js 開発:wxWebView を使ったバックエンド(Windows版)

 「Vue.js 開発:wxWebView を使ったバックエンド」の続きです。Windows 版の wxWebView は、デフォルトだと IE ベースになります(wxWidgets 3.2.5 を想定)。この WebView ではモダンな JavaScript は動作しませんので、Edge ベースに切り替える必要があります(詳しくは wxWebView のドキュメント参照)。

 やってみました。公式ドキュメントの説明に沿って、まず webview2 SDKをマイクロソフトの公式ページからダウンロードします。少しわかりにくいのですが、右のカラムにある "Download package" というリンクです。

20260227-1.jpg

 .nupkg という拡張子を持つファイルが得られます。中身は zip パッケージなので、拡張子を .zip に変更すると、普通に展開できます。展開して得られたフォルダを webview2 という名称に変更して、wxWidgets の 3rdparty フォルダに入れます。

20260227-2.jpg

 wxWidgets をビルドし直します。configure--enable-webviewie --enable-webviewedge を加えるのがポイントです(--enable-webviewie はなくてもいいかもしれない)。

$ cd path/to/wxWidgets
$ export BASEDIR=$PWD
$ mkdir build-win-temp; cd build-win-temp
$ ../configure --host=x86_64-w64-mingw32 --disable-shared --enable-monolithic  --enable-webviewie --enable-webviewedge --prefix=$BASEDIR/build-win | tee configure.log
$ make -j 4 2>&1 | tee make.log
$ make install
$ mv *.log ../build-win
$ cd ..; rm -rf build-win-temp

 特に問題なくビルドできました。Makefile の記述にも一部変更が必要です。

WEBVIEW_LIB = $(WX_DIR)/3rdparty/webview2/build/native/x86/WebView2Loader.dll
WX_LDFLAGS = -L$(WX_LIB_DIR) -Wl,-(中略) $(WEBVIEW_LIB)

 WebView2Loader.dll を、実行ファイルと同じディレクトリにコピーする必要があります。

cp $(WEBVIEW_LIB) $(DESTPREFIX)/$(PRODUCT_DIR)

 Edge ベースの wxWebView を使えるかどうかは、下のように判断します。

static bool
shouldUseWebView(void)
{
#if defined(__WXMSW__)
  if (wxWebView::IsBackendAvailable(wxWebViewBackendEdge))
    return true;
  else
    return false;
#else
  return false;
#endif
}

 あっさり動きました。ウィンドウサイズの調整が必要ですが(スクロールバーが表示されている=Mac版と比べてウィンドウ内の有効範囲が狭い)、まあ微修正です。

20260227-3.jpg

Posted at 2026年02月27日 23:43:04
email.png