Firefox OSアーキテクチャクイックツアー

わんくま同盟大阪勉強会 #63

Firefox OS アーキテクチャクイックツアー

株式会社グローバルサイバーグループマネージャ藪下正美


はじめに


自己紹介

• 藪下正美– わんくまでは普段あおいたんとか名乗ってる人– 大阪は＃４５以来ですおひさしぶりです

• 株式会社グローバルサイバーグループから来ました• Firefox OS コミュニティから来ました• Codezine で記事書きました

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

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

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

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





コミュニティ紹介

• Firefox OS コミュニティで各種イベントのスタッフとかスピーカとかやってます– FxOS コードリーディングというコミュニティのいいだしっぺ

• http://reading.fxos.org/• 大体毎月 Mozilla Japan のオフィスでソースコードを読む会やってま

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

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

http://reading.fxos.org/

http://reading.fxos.org/


今日のアジェンダ１

• 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 で書かれている


Firefox OS の全体像• Firefox OS は大別して三つの

モジュールで構成される– Gecko

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

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


Firefox OS の全体像• Firefox OS は大別して三つの

モジュールで構成される– Gonk

• OS 、 HAL などを含む層• C/C++ で書かれている


Gaia

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

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

• Gecko に依存するがプラットフォームに依存しない– B2G デバイス、デスクトップ、

シミュレータなど Gecko が動作する環境であれば広く動作する

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


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


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 アプリの管轄

Settings


検索

System


Settings アプリ

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

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

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


検索

System Settings


ブラウザアプリ

• その名の通りブラウザアプリ• web ブラウズだけでなくアプ

リのインストール経路にもなるので特権的な位置づけにある

Settings

キーボード

検索

System

ブラウザ


キーボードアプリ

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

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

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

Settings

ブラウザ

検索

System

キーボード


検索

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

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

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

Settings


System

検索


Content プロセスで動くアプリ

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

プリインアプリ

ユーザアプリ



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

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

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

ユーザアプリ



ユーザアプリ

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

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


ユーザアプリ


GECKO について少し詳しく


Gecko の全体像

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

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

Gecko

プラットフォーム固有層

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

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

レンダラ通信系

ブラウザ機能

描画


Gecko 概要

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

• 通信系– 主にプロトコルに応じた処理へ

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

Gecko




レンダラ描画通信系

ブラウザ機能


Gecko 概要

• レンダラ– CSS や style属性、 JS からの操

作によって決定される DOM ツリーの表示表現を作り描画系に指示を与える

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

Gecko




通信系

ブラウザ機能

レンダラ描画


Gecko 概要

• スクリプトエンジン– JavaScriptエンジ

ン、 XPConnect (XPCOM) 、WebIDL バインディングなど数種類の言語処理系を持つ

• プラグインコンテナ– Flash プレイヤーなどのサードパーティプラグインや DRM システム、ビデオハードウェア、その他埋め込みオブジェクトなどをブラウザ本体のプロセスから切り離し影響を最小化するためのコンテナ機能を提供する

Gecko




ブラウザ機能

描画



Gecko 概要

• プラットフォーム抽象化層– NSPR 、 XPCOM などのクロス

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

• プラットフォーム固有層– ウィジェット、ファイル、ソケット、ヒューマンインターフェイスなど低レイヤ機能

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 を提供している

Gonk

Daemon

Interfaces

Drivers

Linux

HAL


AOSP Linux

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

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

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 コミュニティはまだ若い世界です• あなたも一緒に盛り上げてみませんか？

Engineering

Firefox OSアーキテクチャクイックツアー