Windows10/11上のWSL2/WSLg環境でWebKitをビルド、実行する

Windows 上での WebKit のビルドとしては Cairo on Windows（WinCairo）ポートがよく使われますが、最近の Windows には WSL2（WSLg）環境がありますので、今回は WebKitGtk ビルドと実行を行います。

# 注意

* Git によりソースコード類を取得してのビルドを行います。 Tarball を用いたビルドはまた別の記事にしたいと考えています。
* あくまでもビルドを通してサンプルアプリケーション（MiniBrowser）を起動、サイト閲覧ができるまでを扱っています。公式ドキュメントの [Building WebKitGTK](https://trac.webkit.org/wiki/BuildingGtk) にもあるように、本ビルドによる生成物はテストや試用、開発目的での利用に留めてください。セキュリティ上からも実用目的には向きません。
* ビルドを通すことを第一目的としているため、一部環境の変更など無理をしている部分もあります。
* リポジトリの origin/main を取得するため、そのときのコードやリポジトリの状態によってビルドや動作が不安定な場合があります。
  * WebKitGTK のリリースタグ（`webkitgtk-xx.yy.zz`）で取得するのもよいでしょう。

# ビルドを行う環境例

* Windows 11 22H2（OSビルド 22621.819）
  * Windows 10 （OSビルド 19044.2311）でも動作を確認できています。
* WSL 1.1.0.0 以降
  * Microsoft ストアからのアップデート適用済み。 `wsl --update` でも大丈夫です。
  * 記事更新時点（2024/08/20）での最新版は WSL 2.2.4.0 です。
* Ubuntu 22.04 LTS
  * 導入方法は割愛します。
  * apt 等で各モジュールは最新にしておきます。

## あった方がいいもの

* ホストPCのメモリ16GB以上、できれば32GB程度
* ホストPCにコア数の多いCPU
  * 多いとビルドのときに楽になりますが、4物理コアでも時間はかかりますが大丈夫です。
* 速いインターネット回線
  * ソースコードと依存ライブラリで合わせて数十GB程度のダウンロードが発生します。
* ある程度のストレージ
  * ストレージを30GBぐらい消費します。

# ビルド準備

ビルドの準備、ビルドとも、基本的には公式 trac の [Building WebKitGTK from git](https://trac.webkit.org/wiki/BuildingGtk#BuildingWebKitGTKfromgit) に従います。ここでは主に通常のデスクトップ Linux とは異なる動作をする場面において説明を加える形になります。

## systemd 有効化

WSL v0.67.6 から systemd が起動できるようになりました。これにより systemd に依存した多くのライブラリが動作します。今回のビルドでも必要になりますので、有効化します。

Ubuntu 上に `/etc/wsl.conf` という設定ファイルを作成し、そこに systemd 有効化の設定を書き込みます。（すでに wsl.conf がある環境では追記します）

```ini:/etc/wsl.conf
[boot]
systemd=true
```

その後、一旦 WSL を再起動します。
Ubuntu を終了させ、ホスト側の PowerShell で以下を実行し WSL 自体も終了させます。

```powershell:PowerShell
PS > wsl --shutdown
```

その後、再度 Ubuntu を起動します。

## 必要なパッケージのインストール

ライブラリ取得やビルド、minibrowser の起動に必要となるパッケージをインストールします。

```shell_session:ubuntu
$ sudo apt install flatpak
$ sudo apt install python3-pip
$ sudo apt install cmake
```

## ~~`/dev/shm` の修正~~

:::note info
(2024/01/25追記）
この操作は 2023年1月に更新された WSL 1.1.0 で不要になりました。
参考:
* https://kledgeb.blogspot.com/2023/01/wsl-256-wsl-110.html
* https://github.com/microsoft/WSL/issues/8996

<details><summary>過去の記述</summary>
WSL では `/dev/shm` が `/run/shm` へのシンボリックリンクになっているため、ビルド作業の途中や MiniBrowser 起動時に `/dev/shm` を見失ってエラーが発生することがあります。このためこれを実ディレクトリに作り直します。

※これは WSL を終了すると元に戻ってしまいます。 MiniBrowser の起動でも同じところで引っかかるので、WSL を再起動した際は再度この対応を行う必要があります。

```shell-session:ubuntu
$ sudo mv /dev/shm /dev/shm-temp
$ sudo mkdir /dev/shm
$ sudo chmod 777 /dev/shm
```
</details>
:::


# ソースコードの取得～ビルド

## ソースコードの取得

Git の基本的な設定は完了しているのを前提とします。
公式ドキュメントの [Getting the Code](https://webkit.org/getting-the-code/) に従って、Git リポジトリからコードを取得します。

```shell-session:ubuntu
$ git clone https://github.com/WebKit/WebKit.git WebKit
```

※ SSH でも問題ありません。

取得が出来たらリポジトリのディレクトリに移動して以降の作業を行います。

```shell-session:ubuntu
$ cd WebKit
```

## 依存ライブラリの取得（Ubuntu）

その他ビルドに必要なソフトウェアをインストールします。スクリプト内でaptを実行するのでsudoで動かした方が良いでしょう。

```shell-session:ubuntu
$ Tools/gtk/install-dependencies
```

## 依存ライブラリの取得（flatpak）

Git リポジトリからのビルドでは、依存ライブラリをホストPCのものを使用せず全て個別に用意します。そのために flatpak を用いて依存ライブラリ等を取得します。
実際は WebKit で用意されたスクリプトがやってくれます。

```shell-session:ubuntu
$ Tools/Scripts/update-webkitgtk-libs
```

## ビルド

以下のスクリプトを実行しビルドを行います。

```shell-session:ubuntu
$ Tools/Scripts/build-webkit --gtk --makeargs="-j8"
```

* `--gtk` で GTK ビルドを指定します。
* `--makeargs` は、ビルドコマンドに渡したいオプションを指定します。
  * `-j8` は並列ビルド数を指定しています。WSL上でのビルドでは、この数値を **物理CPUコア数以下** にします。指定しなかったり物理コア以上に設定すると、ビルド時に不定のタイミングでエラーが発生します。
* 必要に応じて `--debug` オプションも使用可能です。

ビルドが成功すると、以下のように出力されます。（時間は一例）

```:stdout
====================================================================
 WebKit is now built (1h:53m:27s).
 To run MiniBrowser with this newly-built code, use the
 "Tools/Scripts/run-minibrowser" script.
====================================================================
```

## minibrowser の実行

サンプルアプリである minibrowser を実行します。これもスクリプトになっています。

```shell-session:ubuntu
$ Tools/Scripts/run-minibrowser --gtk
```

※ `--debug` オプションを付けた場合はこちらにも `--debug` オプションを付けます。

以下のようなウインドウが表示されれば成功です！

![wslg_webkit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38697/c0a50e8b-4e42-fd3a-295a-5f384af9aead.png)


# 参考

https://github.com/WebKit/WebKit

https://trac.webkit.org/wiki/BuildingGtk

https://webkit.org/getting-the-code/

https://trac.webkit.org/wiki/WebKitGtkLayoutTests