ブラウザエンジン Servo を動かしてみる

# Servo とは

https://servo.org/

> https://servo.org/about/
> Servo aims to provide an independent, modular, embeddable web rendering engine, allowing developers to deliver content and applications using web standards.

Mozilla によって立ち上げられたプロジェクト。現在は Linux Foundation Europe の下にあります。クロスプラットフォームで再利用可能な Web コンポーネントを目指しています。

OSS であり、 https://github.com/servo/servo で開発されています。バージョンは無いようで、ローリングリリース形式によるリリースが行われています。

また、Servo をブラウザエンジンとするブラウザアプリのプロジェクト Verso (https://github.com/versotile-org/verso) が 2024 年に立ち上がっています。Servo の開発を活性化させて完成度を上げ、Servo を WebView の代替として利用可能なコンポーネントを用意することが狙いのようです。[^verso]

[^verso]: https://www.publickey1.jp/blog/24/rustservowebverso.html https://nlnet.nl/project/Verso/

Servo のアーキテクチャについては、https://book.servo.org を読むと良さそう。
物足りない感じはありますが、一通り読める分量だと思います。

# 環境

- Ubuntu 22.04 X11[^dp]
- Servo (2024/12/07) `fb787306b3f8d89f2b41cb150aa3bb8cdc666138`

[^dp]: Servo（winit）は Wayland にも対応しているので、Wayland 環境でも同様に動作するはず。

# ビルド

方法は Readme に書いてあるので省略。

`time ./mach build` にかかった時間は 2 分程度でした[^hostpc]。Chromium と比べるとずっと早い。
[^hostpc]: Intel Core i7-14700K / RAM 64GB

```
real    1m53.368s
user    16m13.446s
sys     1m42.487s
```

# 動作確認

Chrome や Firefox と比べると完全動作とは行かないものの、よく動いていると思います。
Media Source Extensions は非サポートなので動画サイトは基本動きません。

- https://www.tohoho-web.com/wwwhist.htm

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502849/cd785232-272c-bc1e-8c50-4e58569ed265.png)

- https://amazon.co.jp

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502849/2317e7b0-0714-8d78-b561-f1f0c36ca5fd.png)

- https://www.yahoo.co.jp

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502849/d4d0e4d2-6831-e2f1-59ef-2bcf969767c3.png)

# 簡単なハック

## 指定できるコマンドライン引数

`./servo --help` を確認すれば ok。

例えば、user agent を変えるには `./servo -u "NCSA Mosaic/1.0 (X11;SunOS 4.1.4 sun4m)"`。

`components/config/opts.rs` にコマンドラインのパース処理がありますが、エントリーポイント近くにある `ports/servoshell/desktop/cli.rs` でもコマンドライン引数の値を取り出しているのでこちらもチェック。

## ビルド引数

ビルド時に決まる設定値の一覧は、`resources/prefs.json` にあります。例えば、`"shell.homepage": "https://servo.org"` など。

## マルチプロセス

デフォルトはシングルプロセスで動作します。マルチプロセスで動作させるには、コマンドライン引数 `-M` を追加します。コンテンツごとにプロセスが作成されるようになります。コンテンツごとに作成されるプロセスは、コード中では content process と呼ばれています。

コードを読む限り、Servo ではエントリーポイントである ChromeProcess と コンテンツごとの ContentProcess の 2 種類のみが存在するようです。Chromium は GPU や Zygote とか Network など色々あるので今後さらに増えるかも。

## devtools

https://github.com/servo/servo/wiki/Devtools に方法が書いてあります。
`--devtools=6080` 引数を追加し、Firefoxから `about:debugging` を開いて `localhost:6080` に接続します。

Javascript のエラーや DOM 構造等確認できます。Inspector による要素の編集はできませんでした。

## WebIDL

WebIDL は HTML 標準の仕様でも使用されているインターフェース記述言語です。
WebIDL のファイルフォーマットをパースする python スクリプトが取り込まれており、`third_party/WebIDL` に入っています。
Servo や Chromium はこれを使って WebIDL を Rust や C++ に変換しています。[^webidl]

[^webidl]: ビルド時に `components/script/build.rs` から `components/script/dom/bindings/codegen/run.py` を呼び出して、`components/script/dom/bindings/codegen/CodegenRust.py` で WebIDL を Rust に変換。 Chromium にも同様のコードがある。https://chromium.googlesource.com/chromium/src/+/refs/tags/132.0.6834.39/third_party/blink/renderer/bindings/scripts/bind_gen/interface.py

# お気持ち

正直 Servo という名前は検索しづらい。Servo は Raspberry Pi でも動かせるみたいですが、先駆者が居ないか調べようとしてもサーボモーターの方が出てしまうんですよね。

Qiita のタグも大半がサーボモーターに関する記事で、ブラウザエンジンの Servo は… ちょっとだけ出てきます https://qiita.com/tags/servo

# おわり

ブラウザエンジン Servo を簡単に触ってみました。