Firefox OSアーキテクチャクイックツアーFxOSコードリーディング向け追記版

株式会社グローバルサイバーグループ

マネージャ

藪下正美

はじめに

自己紹介

• 藪下正美

–わんくまでは普段あおいたんとか名乗ってる人

–大阪は＃４５以来ですおひさしぶりです

• 株式会社グローバルサイバーグループから来ました

• Firefox OSコミュニティから来ました

• Codezineで記事書きました

– Firefox OSアプリ開発が楽しくなるハードウェアAPIの概要と、センサーAPIや音声APIを使った楽器アプリの作例

– http://codezine.jp/article/detail/8540

会社紹介

• 株式会社グローバルサイバーグループ

–関西出身の組み込み系の会社

• 携帯電話とか業務用コピー機とかデジカメとかの中の人やってます

• 最近はAndroidのすごい下の方か各モバイルOS向けアプリを主にやってます

– Firefox OSの勉強会を支援する事業やってるので興味があればご相談ください

• http://www.gcg.bz/labo_blog/?page_id=943

–各種モバイルOSの質問も受け付けてます。ブログで回答します

• http://www.gcg.bz/labo_blog/?page_id=945

コミュニティ紹介

• Firefox OSコミュニティで各種イベントのスタッフとかスピーカとかやってます

– FxOSコードリーディングというコミュニティのいいだしっぺ

• http://reading.fxos.org/

• 大体毎月Mozilla Japanのオフィスでソースコードを読む会やってます

• 年三回ぐらい成果発表会的なセミナーやってます

• ほかにもHTML5j Webプラットフォーム部とかWoT的なソフト/ハードを味見するコミュニティもやってます

今日のアジェンダ１

• Firefox OSの全体像

– Gaia

– Gecko

– Gonk

今日のアジェンダ２

• Gaiaについて少し詳しく

– Gaiaの全体像

–アプリの権限

– ChromeプロセスとContentプロセス

– Chromeプロセスで動くアプリ

– Contentプロセスで動くアプリ

今日のアジェンダ３

• Geckoについて少し詳しく

– Gecko概要

–三大機能と三つのツリー

今日のアジェンダ４

• Gonkについて少し詳しく

– HAL

– AOSP Linux

• 全体まとめ

• さいごに

Firefox OSの全体像

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

Firefox OSの全体像

• Firefox OSは大別して三つのモジュールで構成される– Gaia

• UIやプリインアプリなどユーザに見える基本機能を提供する

• すべてHTML5で書かれている

• ソースコードはB2G/gaiaにある

Firefox OSの全体像

• Firefox OSは大別して三つのモジュールで構成される– Gecko

• Gaiaやユーザアプリが使用するAPIやHTML5のランタイムを提供する

• C++、JS、IDLなど多くの言語で実現されている

• ソースコードはB2G/geckoにある

Firefox OSの全体像

• Firefox OSは大別して三つのモジュールで構成される– Gonk

• OS、HALなどを含む層

• C/C++で書かれている

• ソースコードはB2G/gonk-miscやB2G/gecko/b2g

Gaia

• UIやプリインアプリなどでデバイスの基本的な操作を提供する

• すべてHTML5で書かれている

• Geckoに依存するがプラットフォームに依存しない

– B2Gデバイス、デスクトップ、シミュレータなどGeckoが動作する環境であれば広く動作する

• Gaiaはプロファイルに応じて提供する機能やUIの変更が多い

• 主に読むのはB2G/gaia/apps、B2G/gaia/shared、B2G/gaia/tv_appsあたり

Gecko

• Gaiaやユーザアプリが使用するAPIやHTML5のランタイムを提供する

• C++、JS、IDLなど多くの言語で実現されている

• FirefoxやThunderbirdなどのMozilla製品で共通のランタイム

• 読むところいっぱいあるのでソースコードの話は後述

Gonk

• OS、HALなどを含む層

• WindowsやMac OS XなどのOSと同等にGeckoの移植対象プラットフォームの一つとして定義されている

• Gonkは現状唯一B2Gの要求を満たすプラットフォーム

– 他のOSでは必要な権限が得られない

• Gonkで使用されるOSはAOSP

Linux

• B2G/gonk-miscやB2G/gecko配下にコードが散在している

GAIAについて少し詳しく

Gaiaの全体像

• Gaiaのアプリ (以下内部アプリ)

はUIや基本機能を提供する

• 内部アプリは大きく分けてChromeプロセスで動くアプリとContentプロセスで動くアプリに分けられる

アプリの権限

• アプリには利用できるAPIの範囲が異なる権限タイプが存在する

– web権限 (ホスト型アプリ/単純なパッケージ型アプリ)

– trusted権限 (信頼されたホスト型アプリ)

– privileged権限 (特権型アプリ)

– certified権限 (内部アプリ)

権限 概要

Web権限

基本的な権限ハードウェアにアクセスするAPIやプライバシーにかかわるAPIが使えない

Trusted権限

V2.1から追加された権限

一部のユーザに許可を求めるタイプのAPIを使用できる

Privileged権限

事業者に関わる課金、重大なプライバシー/セキュリティインシデントが予想されるものを除いたAPIが使用できる権限

Certified権限

キャリアやメーカがプリインアプリでのみ使用可能な権限すべてのAPIを使用できる

ChromeプロセスとContentプロセス

• 内部アプリは特権的な機能を利用するため認証 (certified) 権限を持つ

• Geckoの制約上特権的APIは特権的なプロセスでないと実行できない

• この特権的なプロセスをChrome

プロセスと呼ぶ

Gaia

Gecko

Chromeプロセス

Contentプロセス

APIs(Interface)

APIs(Implement)

API呼び出し

ChromeプロセスとContentプロセス

• 内部アプリの大部分を含む一般的なアプリでは特権的でないContentプロセスで動作する

• Contentプロセスで動作するアプリでもアプリマニフェストで宣言し、ユーザに許可された機能についてはAPIの使用を許可される

Gaia

Gecko

Chromeプロセス

Contentプロセス

APIs(Interface)

APIs(Implement)

アプリのヒエラルキー

• Firefox OSのアプリは少数のChromeプロセスアプリと多数のContentプロセスアプリからなる

• Firefox OSで実行されるアプリはSystemアプリの子プロセスとして実行される

• 子プロセスはContentプロセスとして起動される

Gaia

Gecko

Chromeプロセス

Contentプロセス

APIs(Interface)

APIs(Implement)

Chromeプロセスで動くアプリ

• Chromeプロセスで動くアプリとしては以下のものが挙げられる

– Systemアプリ

– Settingsアプリ

– ブラウザアプリ

– キーボードアプリ

– 検索アプリ

• これらのアプリにはSystemアプリの一部として動作するものもある

System Settings

ブラウザ キーボード

検索

Systemアプリ

• アプリの管理とか共通して使われるUIを管理するアプリ

• Firefox OSで見た目のあるアプリすべての親

– 見た目がないアプリもいくつかぶら下がっている

• アプリ起動時のアニメーションやアプリの切り替えなどもSystemアプリの管轄

• ソースコードはB2G/gaia/apps/system

• B2G/gaia/sharedとかAPIの実装とかいろいろ見ることになるので楽しい

Settings

ブラウザ キーボード

検索

System

Settingsアプリ

• 特定のアプリによらない設定を行うアプリ

• 端末設定を変更するのは特権的機能なのでChromeプロセスで動作する

• Systemアプリが提供している機能の設定はSettingsアプリの仕事となる

ブラウザ キーボード

検索

System Settings今日は省略

ブラウザアプリ

• その名の通りブラウザアプリ

• webブラウズだけでなくアプリのインストール経路にもなるので特権的な位置づけにある

Settings

キーボード

検索

System

ブラウザ

今日は省略

キーボードアプリ

• ユーザが文字入力を行うためのアプリ

• ここではキーボードそのものではなくキーボードが動作するフレームワークになる部分を指している

• 実際操作される部分はユーザが選択可能であり作成可能である

Settings

ブラウザ

検索

System

キーボード

今日は省略

検索

• ホーム画面上部にある検索ボックス

• v2.1からはアプリ起動中もステータスバーに常駐するようになった

• 検索ボックスもアプリのインストール経路になるので特権的な位置づけになる

Settings

ブラウザ キーボード

System

検索

今日は省略

Contentプロセスで動くアプリ

• Contentプロセスで動くアプリは多数あるが大別すると以下の二つ

– プリインアプリ (内部アプリ)

– ユーザアプリ

プリインアプリ

ユーザアプリ

プリインアプリ

• ダイアラやメッセージングなどの工場出荷状態でインストール済みのアプリ

• 一部の特権アプリを除いてほぼ認証権限を持つ

• 一般の開発者によるアプリも採用されることがある

ユーザアプリ

プリインアプリ

ユーザアプリ

• ユーザアプリは出荷後にユーザによってインストールされるアプリ

• 基本的には検索やマーケットプレイスを通して入手する

プリインアプリ

ユーザアプリ

今日は省略

GECKOについて少し詳しく

Geckoの全体像

• ざっくり分けてブラウザ機能、通信系、レンダラ、描画系、スクリプトエンジン、プラグインコンテナ、プラットフォーム固有層、プラットフォーム抽象化層で構成される

• 全部は話せないのでざっくり分けた機能について一言ずつと代表的な機能の中でも密接な関係を持っている部分について述べる

Gecko

プラットフォーム固有層

プラットフォーム抽象化層

プラグインコンテナ スクリプトエンジン

レンダラ

通信系

ブラウザ機能

Gecko概要

• ブラウザ機能– 履歴やブラウザコンテキストの管理、トップレベルオブジェクトの提供などを行う

– ソースコードはB2G/gecko/docshellあたりから読み始める感じ

• 通信系– 主にプロトコルに応じた処理へディスパッチするプロトコルハンドラ、サーバとの通信を行うチャネル、URI文字列の構文チェックや正規化を行うURIオブジェクトを中心概念として構成される

– ソースコードが割と膨大だけどB2G/gecko/netwerkあたりにあるのでがんばれ

Gecko

プラットフォーム固有層

プラットフォーム抽象化層

プラグインコンテナ スクリプトエンジン

レンダラ

通信系

ブラウザ機能

Gecko概要

• レンダラ– CSSやstyle属性、JSからの操作によって決定されるDOMツリーの表示表現を作り描画系に指示を与える

– ソースコードはB2G/gecko/layoutあたり？ 自信ない

• 描画系– プラットフォームに依存しない抽象化された描画フレームワークMoz2D、旧フレームワークのThebes、レイヤシステム、APZ (Asynchronous Pan and Zoom) などからなる

– ソースコードはB2G/gecko/gfxだけど結構構造が込み合ってるので別途資料見たほうが良い

Gecko

プラットフォーム固有層

プラットフォーム抽象化層

プラグインコンテナ スクリプトエンジン

通信系

ブラウザ機能

レンダラ

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

プラットフォーム固有層

プラットフォーム抽象化層

レンダラ

通信系

ブラウザ機能

プラグインコンテナ スクリプトエンジン

Gecko概要

• プラットフォーム抽象化層

– NSPR、XPCOMなどのクロスプラットフォーム用抽象化ライブラリや文字列、数などのプラットフォームによらず表現を一定にしたいプリミティブなデータ表現を提供する

– B2G/gecko/nsprpubあたり？ 自信なし

• プラットフォーム固有層

– ウィジェット、ファイル、ソケット、ヒューマンインターフェイスなど低レイヤ機能

– B2G/gecko/widgetとかB2G/gecko/network/socketとか

Gecko

プラグインコンテナ スクリプトエンジン

レンダラ

通信系

ブラウザ機能

プラットフォーム固有層

プラットフォーム抽象化層

三大機能と三つのツリー

• ここからはブラウザ機能、レンダラ、描画系、スクリプトエンジンにまたがるGeckoの主要機能について述べる

Gecko

プラットフォーム固有層

プラットフォーム抽象化層

プラグインコンテナ

通信系

スクリプトエンジン

レンダラ

ブラウザ機能

三大機能と三つのツリー

• Geckoはブラウザの機能としてHTMLパーザ、JSエンジン、CSS

レンダラを持つ

• これらはそれぞれDOMツリー、JSオブジェクトツリー、レンダリングツリーという密接に関係した三つのツリー構造を持つ

Gecko

プラットフォーム固有層

プラットフォーム抽象化層

プラグインコンテナ

通信系

スクリプトエンジン

レンダラ

ブラウザ機能 HTMLパーザ

JSエンジン

CSSレンダラ

三大機能と三つのツリー

• HTMLがパースされDOMツリーになると、DOMツリーと対応したJSオブジェクトのツリー、DOM

ツリーにCSSやJSによる操作を適用して描画を行うためのレンダリングツリーも連動して生成される

<html>

<head>

<title> <meta> …

<body>

<header>

…

<section>

… …

HTMLElement

HTMLHeadElement

HTMLTitleElement

HTMLMetaElement

…

HTMLBodyElement

Element

…

Element

… …

<html>

<body>

<head>

…

<section>

… …

HTMLパーザとDOMツリー

• パーザはHTMLを解釈するとDOM

と呼ばれるツリー上のデータ構造を構築する

• DOMツリーはHTMLとして記述された木構造とその構造上のオブジェクトに対する操作、状態を表したオブジェクト

– JavaScriptから操作することによってHTMLの状態や見た目の状態を変更することができる

HTMLElement

HTMLHeadElement

HTMLTitleElement

HTMLMetaElement

…

HTMLBodyElement

Element

…

Element

… …

<html>

<body>

<head>

…

<section>

… …

<html>

<head>

<title> <meta> …

<body>

<header>

…

<section>

… …

JSエンジンとJSオブジェクトツリー

• JSエンジンはHTMLから参照されているJavaScriptのソースコードやscriptタグ内に記述されたJavaScriptを読み込んで実行する

<html>

<head>

<title> <meta> …

<body>

<header>

…

<section>

… …

<html>

<body>

<head>

…

<section>

… …

HTMLElement

HTMLHeadElement

HTMLTitleElement

HTMLMetaElement

…

HTMLBodyElement

Element

…

Element

… …

<html>

<body>

<head>

…

<section>

… …

JSエンジンとJSオブジェクトツリー

• この時DOMツリーとして構築された木構造と関連してJavaScript

から操作可能なオブジェクトを構築していく

– その結果JavaScriptからDOMツリーを操作したり、何らかの要因で変更されたDOMツリーに対応してJavaScriptから参照できるオブジェクトの状態も変化する関係が作られる

<html>

<head>

<title> <meta> …

<body>

<header>

…

<section>

… …

HTMLElement

HTMLHeadElement

HTMLTitleElement

HTMLMetaElement

…

HTMLBodyElement

Element

…

Element

… …

レンダラとレンダリングツリー

• レンダラはCSS、style属性、JavaScriptによる操作などの結果DOM要素がどのように描画されるかを計算する

<html>

<head>

<title> <meta> …

<body>

<header>

…

<section>

… …

HTMLElement

HTMLHeadElement

HTMLTitleElement

HTMLMetaElement

…

HTMLBodyElement

Element

…

Element

… …

<html>

<body>

<head>

…

<section>

… …

レンダラとレンダリングツリー

• レンダラやスタイルシステムはDOMツリーをもとにスタイルやJavaScriptによる操作を適用した描画計算に基づくツリー構造を作る

– これをレンダリングツリーと呼ぶ

• レンダラにはパイプライン構造があり、各要素の矩形フレーム生成、レンダリングツリーの構築、レイアウト、リフロー、描画と進む

HTMLElement

HTMLHeadElement

HTMLTitleElement

HTMLMetaElement

…

HTMLBodyElement

Element

…

Element

… …

<html>

<body>

<head>

…

<section>

… …

<html>

<head>

<title> <meta> …

<body>

<header>

…

<section>

… …

GONKについて少し詳しく

Gonk概要

• GonkはOSや低レベル機能を含む層

• 基礎的なOSとしてはAOSP Linux

を使っている

• WindowsやLinux、Mac OS XのようなGeckoの移植対象の一つとして開発されている

Gonk

Daemon

Interfaces

HAL

Drivers

Linux

Gonk概要

• 現状Geckoの移植対象OSの中では唯一特権的機能にアクセスできるため、他のOSでは実現不可能なAPIなども実装されている

• ここからHAL層とAOSP Linuxについて少し述べる

Gonk

Daemon

Interfaces

Drivers

Linux

HAL

HAL

• その名の通りハードウェアを抽象化する層

– GeckoのHALラッパー層で上位に提供するAPI仕様を満たす制御を行い、GonkのHAL層はGeckoのHALラッパーが要求するインターフェイスを提供する

– 多くの場合GeckoのHALラッパー層で非同期処理の制御を行い、Gonk

のHAL層では同期的なAPIを提供している

– 詳しくはB2G/gecko/hal/gonkあたり読んでみよう

Gonk

Daemon

Interfaces

Drivers

Linux

HAL

AOSP Linux

• Android Open Source ProjectによってホストされているLinux

• GonkはAOSP Linuxから不要なモジュール (SurfaceFlingerなど) を取り除きGeckoの要求するHALインターフェイスを実装したOSである

• ソースコードはB2Gで見るよりAOSPからカーネルを落としてきた方が見やすい

Gonk

Daemon

Interfaces

HAL

Drivers

Linux

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

全体まとめ

• Firefox OSはGaia、Gecko、Gonkの三層からなる

• Gaiaはユーザの目に触れる部分、ユーザが直接触れる体験を提供する

• Geckoはデスクトップブラウザにも使われてるエンジン。ブラウザに必要な機能を一通り備えた (=OSの要件を備えた)エンジンをミドルウェアとして利用している

• GonkはFirefox OSのために作られたOSコア部分。Geckoの移植対象OSでもある

さいごに

• ものすごく駆け足でFirefox OSの全体を一攫いしました

• 各部分だけで何セッションかできる骨太機能の集まりなのでどこを見ても楽しいですよ！

• Firefox OSコミュニティはまだ若い世界です

• あなたも一緒に盛り上げてみませんか？