Firefox と Thunderbird はどのようにして Gecko エンジンを共有しているのか（派生についても解説）

殴り書きで適当にまとめた以下の記事が思ったより好評だったので続編です。今回はバックエンドを共有している Firefox、Thunderbird、Waterfox、Floorp、Pulse Browser、Dot ブラウザーについて（全部 Gecko エンジン使用）の構造についてまとめています。

https://qiita.com/surapunoyousei/items/4559b3588a460e756175

今回はタイプミスが無いようにゆっくりと書きました。気が向けばコードの書き方もリクエストがあれば解説します。

（以下前回と同文）
記載されている内容が面白いと思った方は是非 GitHub で Floorp のリポジトリ（Firefox フォーク）のソースコードを見てみてください。また、理転をしたい文系の大学１年生の青二才が書いているため、間違っている場合があります。指摘はコメント欄まで。

1.5 年以上をかけて得た情報なので書くか滅茶苦茶迷いました。（Mozilla が MDN からほぼすべての Firefox に関する情報を消したため、少ない情報を基に長年でもない経験を加えて書いています。）


## 解説前に

以下のブロックの解説を読んだことを前提としています。XUL とは何かを理解しておいてください。知っていないと理解できません。

https://qiita.com/surapunoyousei/items/4559b3588a460e756175#firefox-%E3%81%A7%E4%BD%BF%E7%94%A8%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E6%8A%80%E8%A1%93

## Firefox・Thunderbird のビルドシステム・構造について

Firefox は Thunderbird とエンジン部分のソースコードを共有しているため、当たり前ですがビルドシステムも同じです。

Firefox のビルドガイドドキュメント↓
https://firefox-source-docs.mozilla.org/setup/windows_build.html

Thunderbird のビルドガイドドキュメント↓
https://developer.thunderbird.net/thunderbird-development/building-thunderbird

しかし、2つとも使ったことがある人は知っていると思いますが UI も機能も全然違います。

実は、ここに XUL の強みが生かされているのです。XUL はウェブ言語に近いためウェブページを切り替えるように UI を変更することができます。

もう一度 XUL について簡単に解説しますが、XUL は「XHTML・ちょっと変わっている CSS・変わりすぎている JS」の３つで構成されています。

つまり、Firefox の UI 自体１つの XHTML なのです。Thunderbird も同じように１つの XHTML が根本になっています。XHTML を置き換えれば別の UI を表示できる。これが XUL の強みでありクロスプラットフォーム化を容易にしてくれます。

実際、ウェブ開発ツールで Firefox をインスペクションすることも可能です。（画像は Floorp）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2088622/7a6c72f5-ac60-4cb7-c564-f938438b7689.png)

#### UI の置き換え方ついての解説

次に、どのようにして XHTML を入れ替えているかについて解説します。

<strong>注意：ここは筆者が滅茶苦茶疎い分野です。誤りを記載している可能性があります。</strong>

まず、以下のリポジトリについて紹介します。GitHub ミラーリポジトリの名前から Gecko エンジンだけのリポジトリだと思った人、不正解。
Mercurial リポジトリ：https://hg.mozilla.org/mozilla-unified/
GitHub ミラー：https://github.com/mozilla/gecko-dev

実はこの中に Gecko エンジンの他に Firefox の XUL ファイルとフォルダも含まれています。それが前の記事で軽く解説した　`.\browser` フォルダです。では Thunderbird のソースコードはどこにあるのか？

正解は以下にあります。
https://hg.mozilla.org/comm-central/

別の場所なんですね。最初から統合されているわけではありません（正確には、Firefox のフロントエンドを一部利用している影響で一部は入っている。これに関しては後述）

ようやく本題に行けます。Thunderbird の場合、以下のコードを `mozconfig`と呼ばれるビルド設定ファイルに記述する必要があります。

`ac_add_options --enable-project=comm/mail`

名前からして明らかに Thunderbird ですね。先ほど紹介した Thunderbird の Mercurial リポジトリを Gecko-dev(Mozilla-unified)の中にクローンしてビルドする必要があります。なおデフォルトは Firefox のフロントエンドである .\browser が指定されているようです。

完全にフロントエンドとバックエンドが隔離されていることがよくわかると思います。（このコードを維持し続ける Mozilla って本当にすごいと思う）

以下は Floorp のビルド中のコンソール出力です。青くなっている場所はブラウザーの根元となる XHTML ファイルです。Thunderbird ではまたこの表記が変わります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2088622/ed25fe99-7a65-529d-65f7-b36a4f244d15.png)

Thunderbird の出力は以下の通り。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2088622/73400bd0-2b82-ceef-d0bd-c1a6c514d800.png)


Thunderbird はあまり触ったことがないので解説できるのはここまでです。以下余談。

#### 余談：エラーがあまりにも多すぎて死にたくなる Firefox ビルドシステム

Firefox に興味があるなら余談ですが、読んでみることをお勧めします。

ご存じの通り、大規模ソフトウェアはビルドに長い時間を要します。これだけなら耐えれそうですが、比例してエラーも増えます。

昨日通ったビルドが今日通らなくなることもよくあります。Floorp はバックエンドを書かないので大体 Mozilla 側のコードがエラーでビルドがエラーになります。

最近では、いじったこともない Python コードでエラーが発生しました。（優秀な開発者が解決していましたが）もう少し安定してくれないかなぁ。。。と心から願うばかりです。

ERROR!!!!!!!!!!!!!!!!!!!
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2088622/6df6aa11-766c-2bc4-f106-e776f1e2a1e2.png)

公式は、いまだに Visual Studio 2017 を使っていたりとちょくちょく新しすぎる環境で問題が発生するんですよね。。。。派生作成は苦労します。

### 追記解説：Firefox と Thunderbird のフロントエンドの共有

先ほど、Firefox と Thunderbird はフロントエンドを置き換えて Gecko だけを共有していると書きましたが、半分正解で半分間違いです。これには理由があります。

Firefox には Webextension の「フロントエンド」の実装があります。実装されている場所は `./toolkit/components/extensions` にあります。

https://github.com/mozilla/gecko-dev/tree/master/toolkit/components/extensions

...気づいた人もいるでしょう。普通、Firefox のフロントエンドの実装は `./browser` にあります。

気づかない人にはもう一つ。Thunderbird にも Webextensions の実装があります。

もうわかりましたね。`./toolkit` は Firefox と Thunderbird がフロントエンドを共有している場所なんです。検索エンジンなんかもそうです。ベースとなる機能は共有している場合が多くあります。ただし、派生ブラウザーはあまりここは操作しているイメージがありません。少しだけ改変されていることがあります。


#### 余談2: Thunderbird のバージョンが何故途切れ途切れなのか

これについて知っている人は多いと思います。知っている人は読み飛ばしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2088622/7ceee309-bb4c-fdd9-8ad2-9a11eea37887.png)

先ほど、Firefox と Thunderbird は "同じバックエンド" を使用していると書きましたが、半分正解で半分不正解です。「通常版 Firefox」と「通常版 Thunderbird」は同じバックエンドを使用していません。

Firefox の通常ロゴを纏ったバージョンは２つあります。

1. ラピッドリリース版 Firefox（通常版）
2. ローリングリリース版 Firefox（ESR版)

通常版 Firefox は４週間にメジャーアップデートが提供される Firefox のことです。

ローリングリリース版 Firefox は名前の通り長い期間メジャーアップデートが提供されない Firefox のことです。ESR とは拡張サポートリリース（Extended support release) の頭文字をとったものです。セキュリティアップデートが代わりに４週間に一回提供されます。

通常版は一般利用者向けでローリングリリース版 Firefox は企業向けです。（一般利用者も利用可能）

話を戻します。Thunderbird はローリングリリース版 Firefox とバックエンドを共有しています。なので、ローリングリリース版 Firefox とバージョン番号が同じになっています。

Thunderbird 自体メーラーでありブラウジング機能はほぼ不要なのでこうなっています。ラピッドリリース版のアップデートをマージし続けるのはほぼ無駄でありバグを引き起こしかねないのでローリングリリース版を採用していると言われています。なので、このように途切れ途切れになっているのです。

どうでもいいですが、以下の窓の杜の記事に書かれている通り、Thunderbird 側では最初次の ESR が114だと誤って公開されていました。（実際は 115）
https://forest.watch.impress.co.jp/docs/news/1427824.html

以上余談でした。

## 派生ブラウザーの構造について

興味がない人は読み飛ばしてください。

### Waterfox

現在 Reddit での投稿によって完全に Floorp を敵視しているっぽい Waterfox の構造を最初に解説します。

Waterfox はレガシーアドオンを滅茶苦茶維持しようと頑張っていることで有名ですね。ちなみに筆者はレガシーアドオンが使いたいなら「basilisk」をお勧めします。アップデートが定期的に来ているためです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2088622/d60616fa-3959-facc-e9a7-9a82ab0b36eb.png)

https://www.basilisk-browser.org/releasenotes.shtml

Waterfox Classic はアップデートが 2022年11月で止まっている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2088622/629da789-9b1a-55be-be9d-6a68c885e4e8.png)

話を戻します。まず最初に Waterfox について理解しておく必要があるので簡潔に解説。

Waterfox は２つのバージョンがあります。

１つは上で書いた「Waterfox Classic」であり、Firefox Quantum (v57）以前のバージョンをベースとしています。

２つ目は Floorp と同じ Firefox ESR をベースとした通常版の Waterfox です。

ここでは、２つ目について解説します。

Waterfox は Floorp と同じく Waterfox のソースコードを分離し、Firefox のソースコードに最大限干渉しないよう作成されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2088622/9ad28e7e-de58-ab36-2e57-38374ef36305.png)

しかし、UI 部分に新しい XUL 要素を追加する場合 XHTML を追記する必要があります。（JS ではバグることが多い）

そこで、Waterfox で採用されているのは「Overlay」と呼ばれる技術です。

XUL アドオンで使用されていた技術です。詳細な仕様は以下の記事が参考になります。
https://so-zou.jp/add-on/tech/firefox/ui/xul/overlays/

ただ、今はこのアドオンで使用できたこの技術はもう使えません。ではどうするのか？

Waterfox では以下のモジュールを使用していることがソースコードから読み取れます。
https://github.com/WaterfoxCo/Waterfox/blob/current/waterfox/browser/extensions/common/Overlays.jsm

上記のモジュールは JavaScript を用いて Overlay を使用できるようにしています。これによって Firefox への干渉を抑えています。現在の Waterfox で設定を開いたとき、一瞬設定が表示されないのはこれが原因です。

実はこのモジュールのコード、Thunderbird からのコピーである説が有力です。以下のファイルと内容が一致しています。

https://searchfox.org/comm-esr68/source/common/src/Overlays.jsm
ちなみに Thunderbird のライセンス表記は Waterfox に見当たりません。なんでなんですかね。もしかしたら自作なのかもしれません。

また、ステータスバーやプライベートタブ等は .\waterfox\browser\components\ 下にあります。

なおこれらの機能も他の拡張機能や XUL 系のソフトウェアを参考にしているようです。

##### Firefox-scripts
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2088622/f5af5ca6-bc11-0847-c604-76f24940d899.png)
##### Waterfox
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2088622/e1a73677-4e37-1294-2ddd-11ec3fad3b55.png)


上記のような感じで構成されています。安定させるための努力してそうな感じですね（

## Floorp

簡単に言うと JS 地獄。バニラの JS だらけなため管理がああああああああって感じです。

UI に当たる JavaScript と呼び出される Floorp の XHTML たち
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2088622/f684246e-9414-c3b1-e8e7-d67eb09b67d4.png)

JavaScript モジュールたち：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2088622/01c957a8-ac3e-7123-0cd9-fd7e7d286fa5.png)

Waterfox と同じように Floorp もディレクトリごと Firefox のソースコードと分離しています。ただ、Overlay を作成する技術がないため、JS や CSS、XHTML を Firefox 側のファイルから呼び出すことで最低限にしています。

一部の XHTML に関しては分離の使用がない場合があるのでその場合、あきらめて直書きしています。追従が面倒なので良くはないですね。

ちなみに ESR を採用しているのは機能の互換性の影響です。Floorp は現在、世界中の Firefox 派生と比較しても独自の機能の数では一番多くの数を搭載するブラウザーです。ラピッドリリース版は毎月多くの Firefox の仕様を変更してしまうので、少ない開発者の数では追従が不可能です。その為に ESR 版を採用しています。

余談： Firefox は様々な OSS ソフトウェアを使用して構成されているため、様々なライセンス表記があります。`about:license` から確認できます。なお Floorp もここに使用したOSSについて追記しています。

ちなみに Floorp は Vivaldi とかなり似ています。よく比較されては泣かされています。

## Pulse Browser

https://pulsebrowser.app

Pulse Browser は Floorp が誕生した訳６か月後に登場した Firefox のラピッドリリース版をベースとしたブラウザーです。

Floorp 比較的近い機能を持っていますが、BETA の１つ上、Alpha 版のみリリースされているので常用にはお勧めできません。ちなみに垂直タブ・サイドバータブという機能を持っています。

そんな Pulse Browser は melon（これに関しては後述）という Firefox 開発用のツールをフォークして gluon というツールを使用して開発しています。

gluon は Firefox に対する変更を .diff 形式で保存し、それを管理するツールです。ミスなくパッチを適用できるため迅速な更新が可能です。また、Firefox のソースコードをクローンせずに tar.gz 形式でダウンロードできるので非常にセットアップまでの時間が少なく済みます。

ちなみに Floorp はサイドバーを増設するという作業を行っているため、コードが多くなるのでこのツールは採用していません。ラピッドリリース版追従では不可能に近いです。

正直、派生作成では一番合理的な方法で開発していると思います。開発者もとっても良い方で Floorp と交流があります。私も時々貢献しています。

## Dot ブラウザー

https://dothq.org

リリース日がいつになるかわからない超実験的 of 極実験的ブラウザー。先ほど書いた Melon というツールの開発元です。まあ今は放棄しているようですが。

Melon は gluon とほぼ同じ機能を持っています。アドオンの組み込みで少し異なる以外に違いはありません。

そんな Melon の開発元の Dot の Dot ブラウザーは驚くべき開発方法を用いています。それは Thunderbird と同じ方法です。

この時点でえぐいですね。頭おかしいレベル（褒め言葉）

まあ要は Firefox のフロントエンドを０から書き直しているということになります。それでブラウザーを再構築。すっげぇ、、、、、

一度手伝うか聞かれましたが技術力が足りる気がしなくて断りました。ごめんなさい。以下はリポジトリの URL です。これを０から書いているのは異様。

https://github.com/dothq/browser-desktop

Firefox 派生って色々作り方があるんですねぇ。全部違う方式を採用しています。びっくりびっくり。

## まとめ

え、こんなにあっていいんですか？？？？ってレベルで作り方がたくさんあります。面白いですね。

公式のドキュメントはもう古いので手探りで１年ぐらいかけて解読しているので誤りがあることもあります。あらかじめご了承ください（Ｎ回目）

愚痴ですが、文系学部って１個もプログラミングの授業ないんですね。タイピング練習を繰り返すのは苦痛です。正直まともな場所でプログラミングを学びたいし、能力を発揮したい。まあそんな思いを込めつつこの記事を書きました。

## 最後に宣伝
公式サイト：

https://floorp.app

GitHub：
https://github.com/Floorp-Projects/Floorp

文章読んでてわかった人もいると思いますが、「Floorp」という Firefox 派生のウェブブラウザーを開発しています！

ウェブパネル、多段タブ、デザイン切り替え機能などを搭載しており結構便利だと自負しています（白目

現在、バージョン 10.12.0 ですがそろそろ 11.0.0 を迎えます。
その際に「同期の可能なメモ機能」「垂直タブ」「タブグループ」「Chrome スタイルのダウンロードマネージャ」を導入予定です。

是非是非お試しください。