FxOSコードリーディングミートアップ＃２１用資料

1. Firefox OSアーキテクチャクイックツアー
FxOSコードリーディング向け追記版
株式会社グローバルサイバーグループ
マネージャ
藪下 正美

2. はじめに

3. 自己紹介
• 藪下正美
– わんくまでは普段あおいたんとか名乗ってる人
– 大阪は＃４５以来ですおひさしぶりです
• 株式会社グローバルサイバーグループから来ました
• Firefox OSコミュニティから来ました
• Codezineで記事書きました
– Firefox OSアプリ開発が楽しくなるハードウェアAPIの概要と、センサーAPIや音声APIを
使った楽器アプリの作例
– http://codezine.jp/article/detail/8540

4. 会社紹介
• 株式会社グローバルサイバーグループ
– 関西出身の組み込み系の会社
• 携帯電話とか業務用コピー機とかデジカメとかの中の人やってます
• 最近はAndroidのすごい下の方か各モバイルOS向けアプリを主にやってます
– Firefox OSの勉強会を支援する事業やってるので興味があればご相談ください
• http://www.gcg.bz/labo_blog/?page_id=943
– 各種モバイルOSの質問も受け付けてます。ブログで回答します
• http://www.gcg.bz/labo_blog/?page_id=945

5. コミュニティ紹介
• Firefox OSコミュニティで各種イベントのスタッフとかスピーカとかやってま
す
– FxOSコードリーディングというコミュニティのいいだしっぺ
• http://reading.fxos.org/
• 大体毎月Mozilla Japanのオフィスでソースコードを読む会やってます
• 年三回ぐらい成果発表会的なセミナーやってます
• ほかにもHTML5j Webプラットフォーム部とかWoT的なソフト/ハードを味見す
るコミュニティもやってます

6. 今日のアジェンダ１
• Firefox OSの全体像
– Gaia
– Gecko
– Gonk

7. 今日のアジェンダ２
• Gaiaについて少し詳しく
– Gaiaの全体像
– アプリの権限
– ChromeプロセスとContentプロセス
– Chromeプロセスで動くアプリ
– Contentプロセスで動くアプリ

8. 今日のアジェンダ３
• Geckoについて少し詳しく
– Gecko概要
– 三大機能と三つのツリー

9. 今日のアジェンダ４
• Gonkについて少し詳しく
– HAL
– AOSP Linux
• 全体まとめ
• さいごに

10. Firefox OSの全体像
• Firefox OSは大別して三つの
モジュールで構成される

11. Firefox OSの全体像
• Firefox OSは大別して三つの
モジュールで構成される
– Gaia
• UIやプリインアプリなど
ユーザに見える基本機能を
提供する
• すべてHTML5で書かれている
• ソースコードはB2G/gaiaにある

12. Firefox OSの全体像
• Firefox OSは大別して三つの
モジュールで構成される
– Gecko
• Gaiaやユーザアプリが
使用するAPIやHTML5の
ランタイムを提供する
• C++、JS、IDLなど多くの
言語で実現されている
• ソースコードはB2G/geckoにある

13. Firefox OSの全体像
• Firefox OSは大別して三つの
モジュールで構成される
– Gonk
• OS、HALなどを含む層
• C/C++で書かれている
• ソースコードはB2G/gonk-miscや
B2G/gecko/b2g

14. Gaia
• UIやプリインアプリなどでデバ
イスの基本的な操作を提供する
• すべてHTML5で書かれている
• Geckoに依存するがプラット
フォームに依存しない
– B2Gデバイス、デスクトップ、シ
ミュレータなどGeckoが動作する環
境であれば広く動作する
• Gaiaはプロファイルに応じて提
供する機能やUIの変更が多い
• 主に読むのはB2G/gaia/apps、
B2G/gaia/shared、
B2G/gaia/tv_appsあたり

15. Gecko
• Gaiaやユーザアプリが使用する
APIやHTML5のランタイムを提供
する
• C++、JS、IDLなど多くの言語で
実現されている
• FirefoxやThunderbirdなどの
Mozilla製品で共通のランタイム
• 読むところいっぱいあるので
ソースコードの話は後述

16. Gonk
• OS、HALなどを含む層
• WindowsやMac OS XなどのOSと
同等にGeckoの移植対象プラット
フォームの一つとして定義され
ている
• Gonkは現状唯一B2Gの要求を満
たすプラットフォーム
– 他のOSでは必要な権限が得られな
い
• Gonkで使用されるOSはAOSP
Linux
• B2G/gonk-miscやB2G/gecko配下
にコードが散在している

17. GAIAについて少し詳しく

18. Gaiaの全体像
• Gaiaのアプリ (以下内部アプリ)
はUIや基本機能を提供する
• 内部アプリは大きく分けて
Chromeプロセスで動くアプリと
Contentプロセスで動くアプリに
分けられる

19. アプリの権限
• アプリには利用できるAPIの範囲
が異なる権限タイプが存在する
– web権限 (ホスト型アプリ/単純な
パッケージ型アプリ)
– trusted権限 (信頼されたホスト型ア
プリ)
– privileged権限 (特権型アプリ)
– certified権限 (内部アプリ)
権限 概要
Web権限
基本的な権限
ハードウェアにアクセスするAPIやプライ
バシーにかかわるAPIが使えない
Trusted権限
V2.1から追加された権限
一部のユーザに許可を求めるタイプの
APIを使用できる
Privileged権限
事業者に関わる課金、重大なプライバ
シー/セキュリティインシデントが予想さ
れるものを除いたAPIが使用できる権限
Certified権限
キャリアやメーカがプリインアプリでのみ
使用可能な権限
すべてのAPIを使用できる

20. ChromeプロセスとContentプロセス
• 内部アプリは特権的な機能を利
用するため認証 (certified) 権限を
持つ
• Geckoの制約上特権的APIは特権
的なプロセスでないと実行でき
ない
• この特権的なプロセスをChrome
プロセスと呼ぶ
Gaia
Gecko
Chrome
プロセス
Content
プロセス
APIs
(Interface)
APIs
(Implement)
API呼び出し

21. ChromeプロセスとContentプロセス
• 内部アプリの大部分を含む一般
的なアプリでは特権的でない
Contentプロセスで動作する
• Contentプロセスで動作するアプ
リでもアプリマニフェストで宣
言し、ユーザに許可された機能
についてはAPIの使用を許可され
る
Gaia
Gecko
Chrome
プロセス
Content
プロセス
APIs
(Interface)
APIs
(Implement)

22. アプリのヒエラルキー
• Firefox OSのアプリは少数の
Chromeプロセスアプリと多数の
Contentプロセスアプリからなる
• Firefox OSで実行されるアプリは
Systemアプリの子プロセスとし
て実行される
• 子プロセスはContentプロセスと
して起動される
Gaia
Gecko
Chrome
プロセス
Content
プロセス
APIs
(Interface)
APIs
(Implement)

23. Chromeプロセスで動くアプリ
• Chromeプロセスで動くアプリと
しては以下のものが挙げられる
– Systemアプリ
– Settingsアプリ
– ブラウザアプリ
– キーボードアプリ
– 検索アプリ
• これらのアプリにはSystemアプ
リの一部として動作するものも
ある
System Settings
ブラウザ キーボード
検索

24. Systemアプリ
• アプリの管理とか共通して使わ
れるUIを管理するアプリ
• Firefox OSで見た目のあるアプリ
すべての親
– 見た目がないアプリもいくつかぶら
下がっている
• アプリ起動時のアニメーション
やアプリの切り替えなども
Systemアプリの管轄
• ソースコードは
B2G/gaia/apps/system
• B2G/gaia/sharedとかAPIの実装と
かいろいろ見ることになるので
楽しい
Settings
ブラウザ キーボード
検索
System

25. Settingsアプリ
• 特定のアプリによらない設定を
行うアプリ
• 端末設定を変更するのは特権的
機能なのでChromeプロセスで動
作する
• Systemアプリが提供している機
能の設定はSettingsアプリの仕事
となる
ブラウザ キーボード
検索
System Settings
今日は省略

26. ブラウザアプリ
• その名の通りブラウザアプリ
• webブラウズだけでなくアプリの
インストール経路にもなるので
特権的な位置づけにある
Settings
キーボード
検索
System
ブラウザ
今日は省略

27. キーボードアプリ
• ユーザが文字入力を行うための
アプリ
• ここではキーボードそのもので
はなくキーボードが動作するフ
レームワークになる部分を指し
ている
• 実際操作される部分はユーザが
選択可能であり作成可能である
Settings
ブラウザ
検索
System
キーボード
今日は省略

28. 検索
• ホーム画面上部にある検索ボッ
クス
• v2.1からはアプリ起動中もステー
タスバーに常駐するようになっ
た
• 検索ボックスもアプリのインス
トール経路になるので特権的な
位置づけになる
Settings
ブラウザ キーボード
System
検索
今日は省略

29. Contentプロセスで動くアプリ
• Contentプロセスで動くアプリは
多数あるが大別すると以下の二
つ
– プリインアプリ (内部アプリ)
– ユーザアプリ
プリインアプリ
ユーザアプリ

30. プリインアプリ
• ダイアラやメッセージングなど
の工場出荷状態でインストール
済みのアプリ
• 一部の特権アプリを除いてほぼ
認証権限を持つ
• 一般の開発者によるアプリも採
用されることがある
ユーザアプリ
プリインアプリ

31. ユーザアプリ
• ユーザアプリは出荷後にユーザ
によってインストールされるア
プリ
• 基本的には検索やマーケットプ
レイスを通して入手する
プリインアプリ
ユーザアプリ
今日は省略

32. GECKOについて少し詳しく

33. Geckoの全体像
• ざっくり分けてブラウザ機能、
通信系、レンダラ、描画系、ス
クリプトエンジン、プラグイン
コンテナ、プラットフォーム固
有層、プラットフォーム抽象化
層で構成される
• 全部は話せないのでざっくり分
けた機能について一言ずつと代
表的な機能の中でも密接な関係
を持っている部分について述べ
る
Gecko
プラットフォーム固有層
プラットフォーム抽象化層
プラグインコンテナ スクリプトエンジン
レンダラ
通信系
ブラウザ機能

34. Gecko概要
• ブラウザ機能
– 履歴やブラウザコンテキストの管理、
トップレベルオブジェクトの提供な
どを行う
– ソースコードはB2G/gecko/docshell
あたりから読み始める感じ
• 通信系
– 主にプロトコルに応じた処理へディ
スパッチするプロトコルハンドラ、
サーバとの通信を行うチャネル、
URI文字列の構文チェックや正規化
を行うURIオブジェクトを中心概念
として構成される
– ソースコードが割と膨大だけど
B2G/gecko/netwerkあたりにあるの
でがんばれ
Gecko
プラットフォーム固有層
プラットフォーム抽象化層
プラグインコンテナ スクリプトエンジン
レンダラ
通信系
ブラウザ機能

35. Gecko概要
• レンダラ
– CSSやstyle属性、JSからの操作に
よって決定されるDOMツリーの表
示表現を作り描画系に指示を与える
– ソースコードはB2G/gecko/layoutあ
たり？ 自信ない
• 描画系
– プラットフォームに依存しない抽象
化された描画フレームワーク
Moz2D、旧フレームワークの
Thebes、レイヤシステム、APZ
(Asynchronous Pan and Zoom) など
からなる
– ソースコードはB2G/gecko/gfxだけ
ど結構構造が込み合ってるので別
途資料見たほうが良い
Gecko
プラットフォーム固有層
プラットフォーム抽象化層
プラグインコンテナ スクリプトエンジン
通信系
ブラウザ機能
レンダラ

36. Gecko概要
• スクリプトエンジン
– JavaScriptエンジン、XPConnect
(XPCOM)、WebIDLバインディングな
ど数種類の言語処理系を持つ
– JSエンジンはB2G/gecko/js
– XPCOMはB2G/gecko/xpcom
– WebIDLはB2G/gecko/dom/webidlと
B2G/dom/bindings
• プラグインコンテナ
– Flashプレイヤーなどのサードパー
ティプラグインやDRMシステム、ビ
デオハードウェア、その他埋め込み
オブジェクトなどをブラウザ本体の
プロセスから切り離し影響を最小化
するためのコンテナ機能を提供する
– B2G/gecko/ipc/contentprocあたり参照
Gecko
プラットフォーム固有層
プラットフォーム抽象化層
レンダラ
通信系
ブラウザ機能
プラグインコンテナ スクリプトエンジン

37. Gecko概要
• プラットフォーム抽象化層
– NSPR、XPCOMなどのクロスプラッ
トフォーム用抽象化ライブラリや文
字列、数などのプラットフォームに
よらず表現を一定にしたいプリミ
ティブなデータ表現を提供する
– B2G/gecko/nsprpubあたり？ 自信
なし
• プラットフォーム固有層
– ウィジェット、ファイル、ソケット、
ヒューマンインターフェイスなど低
レイヤ機能
– B2G/gecko/widgetとか
B2G/gecko/network/socketとか
Gecko
プラグインコンテナ スクリプトエンジン
レンダラ
通信系
ブラウザ機能
プラットフォーム固有層
プラットフォーム抽象化層

38. 三大機能と三つのツリー
• ここからはブラウザ機能、レン
ダラ、描画系、スクリプトエン
ジンにまたがるGeckoの主要機能
について述べる
Gecko
プラットフォーム固有層
プラットフォーム抽象化層
プラグインコンテナ
通信系
スクリプトエンジン
レンダラ
ブラウザ機能

39. 三大機能と三つのツリー
• Geckoはブラウザの機能として
HTMLパーザ、JSエンジン、CSS
レンダラを持つ
• これらはそれぞれDOMツリー、
JSオブジェクトツリー、レンダリ
ングツリーという密接に関係し
た三つのツリー構造を持つ
Gecko
プラットフォーム固有層
プラットフォーム抽象化層
プラグインコンテナ
通信系
スクリプトエンジン
レンダラ
ブラウザ機能 HTMLパーザ
JSエンジン
CSSレンダラ

40. 三大機能と三つのツリー
• HTMLがパースされDOMツリーに
なると、DOMツリーと対応した
JSオブジェクトのツリー、DOM
ツリーにCSSやJSによる操作を適
用して描画を行うためのレンダ
リングツリーも連動して生成さ
れる
<html>
<head>
<title> <meta> …
<body>
<header>
…
<section>
… …
HTMLElement
HTMLHeadElem
ent
HTMLTitleEleme
nt
HTMLMetaElem
ent
…
HTMLBodyElem
ent
Element
…
Element
… …
<html>
<body>
<head>
…
<section>
… …

41. HTMLパーザとDOMツリー
• パーザはHTMLを解釈するとDOM
と呼ばれるツリー上のデータ構
造を構築する
• DOMツリーはHTMLとして記述さ
れた木構造とその構造上のオブ
ジェクトに対する操作、状態を
表したオブジェクト
– JavaScriptから操作することによっ
てHTMLの状態や見た目の状態を変
更することができる
HTMLElement
HTMLHeadElem
ent
HTMLTitleEleme
nt
HTMLMetaElem
ent
…
HTMLBodyElem
ent
Element
…
Element
… …
<html>
<body>
<head>
…
<section>
… …
<html>
<head>
<title> <meta> …
<body>
<header>
…
<section>
… …

42. JSエンジンとJSオブジェクトツリー
• JSエンジンはHTMLから参照され
ているJavaScriptのソースコード
やscriptタグ内に記述された
JavaScriptを読み込んで実行する
<html>
<head>
<title> <meta> …
<body>
<header>
…
<section>
… …
<html>
<body>
<head>
…
<section>
… …
HTMLElement
HTMLHeadElem
ent
HTMLTitleEleme
nt
HTMLMetaElem
ent
…
HTMLBodyElem
ent
Element
…
Element
… …

43. <html>
<body>
<head>
…
<section>
… …
JSエンジンとJSオブジェクトツリー
• この時DOMツリーとして構築さ
れた木構造と関連してJavaScript
から操作可能なオブジェクトを
構築していく
– その結果JavaScriptからDOMツリー
を操作したり、何らかの要因で変更
されたDOMツリーに対応して
JavaScriptから参照できるオブジェ
クトの状態も変化する関係が作られ
る
<html>
<head>
<title> <meta> …
<body>
<header>
…
<section>
… …
HTMLElement
HTMLHeadElem
ent
HTMLTitleEleme
nt
HTMLMetaElem
ent
…
HTMLBodyElem
ent
Element
…
Element
… …

44. レンダラとレンダリングツリー
• レンダラはCSS、style属性、
JavaScriptによる操作などの結果
DOM要素がどのように描画され
るかを計算する
<html>
<head>
<title> <meta> …
<body>
<header>
…
<section>
… …
HTMLElement
HTMLHeadElem
ent
HTMLTitleEleme
nt
HTMLMetaElem
ent
…
HTMLBodyElem
ent
Element
…
Element
… …
<html>
<body>
<head>
…
<section>
… …

45. レンダラとレンダリングツリー
• レンダラやスタイルシステムは
DOMツリーをもとにスタイルや
JavaScriptによる操作を適用した
描画計算に基づくツリー構造を
作る
– これをレンダリングツリーと呼ぶ
• レンダラにはパイプライン構造
があり、各要素の矩形フレーム
生成、レンダリングツリーの構
築、レイアウト、リフロー、描
画と進む
HTMLElement
HTMLHeadElem
ent
HTMLTitleEleme
nt
HTMLMetaElem
ent
…
HTMLBodyElem
ent
Element
…
Element
… …
<html>
<body>
<head>
…
<section>
… …
<html>
<head>
<title> <meta> …
<body>
<header>
…
<section>
… …

46. GONKについて少し詳しく

47. Gonk概要
• GonkはOSや低レベル機能を含む
層
• 基礎的なOSとしてはAOSP Linux
を使っている
• WindowsやLinux、Mac OS Xのよ
うなGeckoの移植対象の一つとし
て開発されている
Gonk
Daemon
Interfaces
HAL
Drivers
Linux

48. Gonk概要
• 現状Geckoの移植対象OSの中で
は唯一特権的機能にアクセスで
きるため、他のOSでは実現不可
能なAPIなども実装されている
• ここからHAL層とAOSP Linuxにつ
いて少し述べる
Gonk
Daemon
Interfaces
Drivers
Linux
HAL

49. HAL
• その名の通りハードウェアを抽
象化する層
– GeckoのHALラッパー層で上位に提
供するAPI仕様を満たす制御を行い、
GonkのHAL層はGeckoのHALラッ
パーが要求するインターフェイスを
提供する
– 多くの場合GeckoのHALラッパー層
で非同期処理の制御を行い、Gonk
のHAL層では同期的なAPIを提供し
ている
– 詳しくはB2G/gecko/hal/gonkあたり
読んでみよう
Gonk
Daemon
Interfaces
Drivers
Linux
HAL

50. AOSP Linux
• Android Open Source Projectに
よってホストされているLinux
• GonkはAOSP Linuxから不要なモ
ジュール (SurfaceFlingerなど) を
取り除きGeckoの要求するHALイ
ンターフェイスを実装したOSで
ある
• ソースコードはB2Gで見るより
AOSPからカーネルを落としてき
た方が見やすい
Gonk
Daemon
Interfaces
HAL
Drivers
Linux

51. AOSP Linux
• ブートの仕組みはAndroidと同様
にinitがinit.rcを読み込んで記述に
したがって順次プロセスを起動
する
– Firefox OSの場合はinit.b2g.rcという
固有の設定ファイルがinit.rcから参
照されている
– init.b2g.rcの記述にしたがってGecko
を起動しshell.jsという起動用のスク
リプトをGeckoに処理させることで
Firefox OSを起動する
Gonk
Daemon
Interfaces
HAL
Drivers
Linux

52. 全体まとめ
• Firefox OSはGaia、Gecko、Gonkの三層からなる
• Gaiaはユーザの目に触れる部分、ユーザが直接触れる体験を提供する
• Geckoはデスクトップブラウザにも使われてるエンジン。ブラウザに必要な機
能を一通り備えた (=OSの要件を備えた) エンジンをミドルウェアとして利用
している
• GonkはFirefox OSのために作られたOSコア部分。Geckoの移植対象OSでもある

53. さいごに
• ものすごく駆け足でFirefox OSの全体を一攫いしました
• 各部分だけで何セッションかできる骨太機能の集まりなのでどこを見ても楽
しいですよ！
• Firefox OSコミュニティはまだ若い世界です
• あなたも一緒に盛り上げてみませんか？