メモがてらに他人に解説できるように書いただけのメモです。質問があれば Twitter または Misskey まで。

Part ２はこちら

ディレクトリ解説の前に（前提）

私は Firefox 系のバックエンドは書いたことがないので主にフロントエンドについて解説します。ちょくちょくFloorp についての情報を入れていますが、Firefox についてしか興味がない方は読み飛ばしてください。

また、面白いと思った方は是非 GitHub で Floorp のリポジトリ（Firefox フォーク）のソースコードを見てみてください。

また、理転をしたい文系の大学１年生の青二才が書いているため、間違っている場合があります。指摘はコメント欄まで。1.5 年以上をかけて得た情報なので書くか滅茶苦茶迷いました。（Mozilla が MDN からほぼすべての Firefox に関する情報を消したため、少ない情報を基に長年でもない経験を加えて書いています。）

Firefox で使用されている技術

Firefox はウェブブラウザーなので当たり前ですが、デスクトップアプリケーションです。その為、多くは C系、Rust などで書かれています。しかし、フロントエンドは XUL で書かれているため、ウェブ言語で作成されている場所も多くあります。

なお、ビルドシステムの場合は Python が使われている場所も多くみられます。

ディレクトリ構造

多くの情報は以下に書かれています。
https://firefox-source-docs.mozilla.org/contributing/directory_structure.html

書いてあることをフロントエンド中心に簡単に解説します。割愛する場所は書きません。

./browser
ここにあるコードはすべて Firefox 専用のコードです。Thunderbird や Seamonkey は Firefox とコードを共有しており、バックエンドは同じものだということは有名です。

"browser" となっている通り、これは Firefox "ブラウザー" 用のコードなのです。なおここには Firefox のフロントエンドのコードが書かれています。つまり多くのファイルはウェブ言語で書かれています。

ただし、ウェブ言語といいつつ完全にウェブ言語ではありません。正しく、何故なら、CSS には特殊なものがあったり、HTML と XML の間の XHTML と呼ばれる古すぎる言語を使う必要があります。同じではないんですね。以上のことを XUL といいます。XUL に関しては以下の Piro 様のブログで解説されています。

What's XUL?
https://piro.sakura.ne.jp/xul/what/

browser の概要については以上。以下で分解しつつ解説する。

browser/extensions

みんな大好き通常のウェブ言語が使えるアドオンが含まれる場所です。

公式には "Contains PDF.js and WebCompat built-in extensions." とありますが、pdf.js 自体はここから移動されているため、現在はこの場所にありません。これに関してはあとで解説。先に WebCompat について。

WebCompat って何？

Webcompat は日本語に訳すと「ウェブの互換性」になります。まあこの時点で大体察しが付く方もいらっしゃるでしょうが、そうです。Firefox に対応しないウェブサイトを Firefox 側で対応するための機能です。

ユーザーエージェントを上書きして、Firefox ではなく Chrome に見せかけてアクセスしたりすることを行っていたりします。ちなみに以下の画像は NHK（日本放送局）の公式サイトで Android 版 Firefox で UA が上書きされていることを暴露する JS です。

上記の JS は私はブラックリストと勝手に呼んでします。

ちなみに一個下には楽天が仲良く並んでいます。色々な意味で面白いですね。

Firefox はサポート対象外に現在はされやすくなっています。晒されないように何とか対応してほしいものです。

参考（窓の杜）：https://forest.watch.impress.co.jp/docs/serial/yajiuma/1423870.html

それ以外の組み込みのアドオン

それ以外の組み込みのアドオンは以下の通り。名前から察してください。

その他にも組み込みのアドオン技術について書きたいことはあるのですが長くなるので割愛。

Floorp の組み込みアドオンは？

Firefox にしか興味がない方は読み飛ばしてください。

Floorp は以下のような状態で組み込みのアドオンを追加しています。

./floorp/browser/extensions/[アドオンの名前]

v.10.5.0 までは Firefox と同じ位置にアドオンを追加してビルドしていましたが、機能が増えるたびにソースコードが複雑になってしまったために Floorp と Firefox のコードは v10.6.0 から可能な限り分離しています。10.0.0 系までは TST もここにありました。

余談：Firefox や Firefox 派生では組み込みのアドオンが "about:support" から確認できます。

この部はこれで解説おしまい。

browser/themes

この部分には Firefox の CSS・アイコン関係のソースコードが含まれています。

また、OS ごとに CSS ディレクトリが異なっていることもわかると思います。（分割方法については割愛）

名称見ればどの OS かわかると思います。Firefox は OS ごとに使用しているアイコンなどが異なっています。

Linux (WSLg):

Windows 11:

アイコンが異なるのであれば当然 CSS も異なります。というわけで以下の様に OS 専用 CSS があります。

Firefox UI 専用の CSS の書き方は割愛します。

なお、browser/themes には Firefox の組み込みのテーマアドオンが入っています。

組み込みのテーマの詳細仕様については割愛しますが、一言で言うと CSS を内蔵でき、完全テーマみたいなことができます（有効化すれば Vivaldi 以上のカスタマイズが可能。ちなみに Nightly ビルドでは CSS の入ったテーマのインストールを試せます。）

Floorp の CSS はどうなっているのか？

Floorp も Firefox と同じように OS ごとにわけている。。。わけではないんですね。

designs icons newtabbg の三つだけフォルダがあります。

Floorp は Proton UI を上書きする CSS を用いているため、OS ごとに分ける必要がありません。Floorp は第三者によって作成された userChrome.css を内蔵し、ブラウザーのデザインを切り替えられるようにして UI を変えています。以下の写真に記載されている通りです（tabbar・options 以外は userChrome.css より引用）

Floorp のデザイン切り替え設定

ただし、Floorp 8 まではデザイン切り替え機能は上記で書いた完全テーマを使用して組み込みをしていました。（完全テーマだと色を変えられない問題があって設定に移動された背景があったりします。）

以上が Firefox のドキュメントの内容の私が付け加えた詳細解説です。。。。終わります。

......少ない。もっと書きます（公開されている量では理解不能）

記載されていないフロントエンドの解説。

Firefox の構造は実際はもっと複雑なんですが、公開されいる Firefox 固有のドキュメントは明らかに不足しているのでもっと別のディレクトリを自己解釈したもので解説します。

`./browser/app`

スマホ版 Firefox アプリケーションだと思ったそこの君！不正解！

このディレクトリには firefox.exe などの Firefox 本体に関するソースコードと Firefox 固有のデフォルト設定が含まれています。

./browser/app/profile/firefox.js

見ての通り Firefox の設定ですね。Floorp は遥か昔はここに設定を追記していました。多分1000000年前の話です。

browser\app\floorp.exe.manifest

見ての通り Windows での floorp.exe(firefox.exe)のマニフェストファイルですね。割愛。

Floorp の設定はどこにあるの？

写真の場所にあります。000 から始まっているのは Firefox の設定を上書きするためです。ここでテレメトリー設定を変えたり Firefox の挙動を Floorp に合わせるための様々な設定を書いています。

アプリケーション自体の manifest は Floorp 独自のファイルを作成はしていません。設定ファイルだけです。

./browser/app の説明はこれでおしまい。簡単。ここはファイル数が少なめ。

`./browser/base/content`

Firefox の UI（Chrome）に当たっている JS 群。これが無いと UI は表示されません。

ここは解説してもしょうがないレベルの量なので割愛します。マジで密です。読まない方が体には優しい気がします。もし読みたいのであれば、Floorp にある同等の JS を見ることをお勧めします。

Floorp の UI に当たっている JS 群↓
https://github.com/Floorp-Projects/Floorp/tree/ESR102/floorp/browser/base/content

`./browser/base/componets`

一言で言いえば、独立したコンポーネントの集合体。「新しいタブ」「設定ページ」「プライベートウインドウの新しいタブ」など内部ページ系も入っています。

・新しいタブ（about:home , about:newtab）に注目してみます。

見ればわかりますが、Node.js を用いています。XUL でも比較的モダンな言語に近い感じがします。Firefox 改造にチャレンジしたい方は是非新しいタブからやってみてはいかがでしょうか？（これに関しては後述）

・今度はエンタープライズポリシーについて。

エンタープライズポリシーは Firefox の管理方法の１つで有名ですね。それがここで実装されています。上記の写真の通り、ESR版のみの制限を加えられているものもあります。（ここ false にすると通常版でも検索エンジンの設定をポリシーで変えられるようになったりします。）

上記を見ればちゃんと分けられているように感じますが、実はかなりもっと複雑になっています。上記の写真の通り、ポリシー管理による検索エンジンの設定を構成しているのはここ以外にも検索エンジン自体を管理するファイルに書かれていたり、場所がよくわからないことが多くあります。大規模ソフトの宿命でしょうが難しい。コード書けるようになるまで時間がかかります。

・最後にブラウザー移行モジュールを見る。

これも複雑ですねぇ。ブラウザーごとにプロファイルの構造は異なるので１つ１つ対応が必要なのでより複雑です。ただ、Chromium ごと、IE ごとに分けられたりしているので非常にわかりやすいコードになっています。

ちなみに、Firefox をリフレッシュする機能もここにあったりします。実は、ブラウザーデータの移行の場所にあるんですね。以下に写真を貼っていますが、その証拠にブラウザーデータの移行時のウインドウでは隠されているだけなんです。（ここを押すとリフレッシュ機能が起動する）

かなり合理的に作られているのかよくわかります。余談ですが、派生ブラウザーではデフォルトの状態ではリフレッシュ機能がプロファイル位置の問題上使えないようになっています。（非表示になっている）

Floorp の browser/componets には何があるのか。

上記の通り、Firefox の1/7ぐらいあります。私が作っていないものもあるので解説するのは Notes だけにします。

Notes はメモ機能で、サイドバーと通常のビュワーで使えます。Notes は名称の通り、UI に干渉せず、独立しているためここにあります。定義はあいまいですが Floorp ではそのように解釈しています。

ちなみに Notes は JS は特殊ですが、なんと HTML で書かれています(！？)

実は内臓するウェブサイトには HTML が使えたりします。

以上。

`browser/fonts`

名前がすべてを語っていますが、フォントです。Firefox には TwemojiMozilla がデフォルトで内臓されています。

組み込み：

内臓場所：

ここは解説することはないので代わりに Floorp でのフォント事情をお話します。

YouTube で発生していた謎過ぎる日本語フォントバグ

今は起きてないっぽいですが、Floorp が 10.4.0 ? あたりの頃、YouTube の動画のコメント欄で「続きを見る」が続きがないコメントで発生しまくる問題がありました。

デフォルトのメイリオが悪さしていると考えた Floorp は組み込みのフォントに "Noto Sans JP" を追加し、YouTube でのデフォルトを変えたことがあります。

なおこのことを WebDINO Japan のとある方に話したら日本語フォントは重すぎて Firefox に組み込むのは難しい！と言われ、全くその通りだと思いました（？）

`browser/installer`

コッチも言うまでもない。インストーラーですね。

Linux はつまらんので Windows 版のインストール事情について少し書きます。

Firefox の Windows 版インストーラーは大きく分けて３つあります。

Firefox ウェブインストーラー（stub-installer.exe）
Firefox オフラインインストーラー（Firefox Setup XXX.exe）
Firefox MSI等（ストア向けインストーラー）

まだあったりしますが、割愛します。

ここで解説したいのは１のウェブインストーラーです。

ウェブインストーラーは Floorp が導入するのが難しかったインストーラー方式です。

実は、署名のチェックがあります。Firefox の場合、 Mozilla corp になっているか署名をチェックします。ダウンロード元が正しいのか、改変されていないかを確認しているんですね。セキュアですね。

ただ、Floorp のような派生は署名を獲得しても導入が難しかったことを覚えています。署名のチェックが無いと危険ですし、正しく動いているかをすこしづつ確認していく作業が必要でした。

また、Windows 版のインストーラーは Firefox の情報をレジストリに書き込むため、Firefox という文字を Floorp に置き換える作業も必要でした。いやはや大変大変。

余談：Microsoft Store 上の Firefox について

インストーラーについて話したので、Microsoft Store 上の Firefox についても触れておきます。

実は、Microsoft Store 上の Firefox と通常版 Firefox は異なるビルドです。同じというわけではありません。

まず、アップデート方式が異なります。

通常版の Firefox の場合、設定ページにアップデートを確認する機能がついていますが、Store 上の Firefox の場合、それがありません。Store からアップデートを受けるためですね。

また、アイコンも異なります。タスクマネージャーを見ると Firefox が Microsoft Store 上の Firefox の場少し小さくなっています。

機能面でも差があります。通常版の Firefox は「既定に設定」をクリックするだけで Firefox をデフォルトのブラウザーにできますが、Microsoft Store 上の Firefox はこれができません。いちいち設定から変更する必要があります。面倒ですね。ちなみにこれは Microsoft Store の規約による影響です。

以上。

終わりに（警告）

この記事を読んで Firefox を改造してみようと思ったそこのあなた。再度検討することをお勧めします。また、この解説は圧倒的不十分です。これだけでは無理だと思います。

Firefox は大規模ソフトウェアなのでマニュアル通りにビルドをしてもエラーが出ることが多くあります（体験談）

その為、ネイティブを操作するのはやめた方がいいです。私は２年ぐらいブラウザーを作り続けていますが、新しいバグに遭遇することは多くあります。

また、公開したらしたでアップデートを提供し続けることは人によっては苦痛です。それほど大規模ソフトウェアを提供するのは難易度が高いのです。

公開したらしたで待っているのはプライバシーの問題です。Chrome や Edge、Firefox は大規模であるがゆえにフィンガープリントがユニークになることは少ないですが小規模なブラウザーはフィンガープリントがユニークであることが多くあります。また、Widevine などオープンソースではないウェブ技術も存在します。

これらを背負える覚悟があるなら、やってみましょう！まあ公開する必要性はないんですが。

終わりの終わり

最後に今考えているウェブのリスクについて語ります。主に国内についての話題です。

ブラウザーの主なベンダー（１から作っているところ）は Google と Mozilla、Apple があげられます。しかし、これらはすべて海外の企業です。デジタル庁などが日本で発足して様々な改革が行われていますが、結局海外の大企業依存な部分が多く残っています。

私が最近目にした部分であれば、マイナポータルにアクセスするには「Chrome ウェブストア」または「Firefox アドオンストア」から拡張機能をダウンロードする必要がありました。

また、スマートフォンではマイナンバーをスマホに埋め込む話も出ています。もし断られたらどうするのか私には想像できません。また、国産ソフトウェアが存在すれば日本向けに何か問題が起きても迅速に対応できます。当たり前ですが、外国で同時に問題が起こった場合、大企業の存在する自国が優先されるでしょう。まあ断られることは考えにくいですけども。（まあそもそも、今の日本では海外のソフトウェアを使うこと、日本製がないこと自体になんの違和感も感じていないことが原因ですけどね）

もっとソフトウェア作成が活発にならないかを夢見て毎日コードを書いています。この記事も誰かの大規模ソフトウェア作成を応援する意味でも長くなりましたが書きました。

もっとオープンソースプロジェクトに投資しようとは思いませんか？将来的に、いや、今一番大事なことだと私は考えています。