Firefox OSことはじめ

株式会社 グローバルサイバーグループ システム開発２課マネージャ 藪下 正美 (a.k.aあおいたん)

はじめに

自己紹介

• 名前 藪下 正美

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

• どんな人？

– @aoi_nagatsuki

–プログラミング言語とかスマホとか好き

会社紹介

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

–やる気と人間性を大切にする総合開発企業

–とかはどうでもよくて

• ブログやってます

–ＧＣＧ研究所で検索！

–ネタ募集中！

–空いてる時に調べてブログに書くのでなんか聞いてね！

まえふり

• 今日は情報量多いです

• メモって質問！

•メモって質問！ –※これ大事！

今日のアジェンダ（１／４）

• 大まかな話

– FxOSとは

–なぜwebなのか

–大まかな構造

–アプリの概要

今日のアジェンダ（２／４）

• アプリ開発

–開発環境

–シミュレータ

–開発者ツール

–次期開発ツール

– AppMaker

今日のアジェンダ（３／４）

• FxOSの開発

–開発機

–ホストOS

–ビルド環境の構築

–ビルド

今日のアジェンダ（４／４）

• 宣伝

–コミュニティ紹介

–勉強会予定

– Advent Calendar

大まかな話

FxOSとは

• FirefoxやThunderbirdを開発しているMozilla財団が開発しているオープンソースのモバイルOS

• いわゆるWebOSの一つでHTML5をネイティブアプリケーションプラットフォームとしている

なぜwebなのか

• 現在のアプリエコシステムの問題点

• 潜在的な開発者の多さ

• 課題の克服

現在のアプリエコシステムの 問題点

• 各OS毎に専用のアプリフォーマット

• 各OS毎に専用のアプリマーケット

各OS毎に専用の アプリフォーマットの問題点

• OS毎の開発が必要

–プログラミング言語、APIはOSに依存

–開発環境が制限されることもある

• WebView+HTML5でマルチプラットフォームを謳うライブラリもあるがWebViewはサブセットなのでOS毎に差異がある

各OS毎に専用の アプリマーケットの問題点

• 販路が独占的

–恣意的なレビュー

–基準がマーケットによってまちまち

• 課金が独占的

–他の課金システム利用不可(iOS/Windows Store)

潜在的な開発者の多さ

• iOS

– 10万人

• Android

– 45万人

• HTML5

– 100万人

iOS

Android

HTML5

0 500000 1000000

課題の克服

• Webの問題点

–機能的な制約

–パフォーマンスの悪さ

–マーケットの不在

• 解決の兆しが見えている

機能的な制約の克服

• WebAPIとしてW3Cで勧告

• これまで弱点だったデバイスの制御やシステムの制御もAPIが定義されてきている

• もちろん得意分野のコンテンツ技術も進化している

これまでできなかったこと

• システムステータスの取得・設定

–通信状況、バッテリー状態、等

• デバイス制御

–環境光センサー、近接センサー、加速度センサー、等センサー制御

– WiFi、USB、BT、NFC、等多機能デバイス制御

API環境図（１／６）

API環境図（２／６）

API環境図（３／６）

API環境図（４／６）

API環境図（５／６）

API環境図（６／６）

パフォーマンスの悪さの克服

• JavaScriptの高速化

• 次世代JavaScriptへの移行による高速化

• AltJSによる高速化

• WebAPIの定義による高速化

JavaScriptの高速化

• Firefox 22からJavaScriptエンジンがOdinMonkeyに変更になった

– asm.js効果で高速に

• Banana Benchが二倍ぐらい速い

– FxOSはv1.1までGecko18ベースだがv1.2でGecko26ベースに

次世代JavaScriptへの 移行による高速化

• Class、Typed Array、ParallelArray、等

• 静的解析しやすい言語仕様に

• 現状Firefoxが一番移行が進んでいる

AltJSによる高速化

• Asm.jsでネイティブ並みの速さに

–ただしマイクロベンチベース

• Unreal Engineがブラウザ上で動く

– Emscriptenでasm.js形式に

–変換に五日ぐらいかかったとかなんとか

WebAPIの定義による高速化 （ファイル操作）

• ストレージAPI

– IndexedDB、SessionStorage、FileHandle

• マルチメディアAPI

– WebAudio、 WebRTC、Camera

WebAPIの定義による高速化 （デバイス制御）

• ヒューマンインターフェイス

–タッチイベント、バイブレーション、ゲームパッド

• センサーAPI

– Geolocation、Orientation、Ambient Light、Proximity

• ハードウェア制御

– USB、BT、FM Radio、NFC

WebAPIの定義による高速化 （通信系）

• 通信API

– WebSocket、TCP Socket、UDP Diagram Socket、WebAPI

• 連携

– WebActivity、WebIntent？、Push Notification

WebAPIの定義による高速化 （システム系）

• システム情報

–通信状態、バッテリー状態

• システム制御

–リソース制御、システム設定、アラーム動作、バックグラウンド動作

• セキュリティ

– Permission API、CSP

マーケットの不在の克服

• Firefox Market

–ただこれだけだとOSごとにしかマーケットがない状況が変わらない

• Web Payment API

–特定のマーケットによらない課金の仕組みがW3C勧告に

– Paypal慣れてるとおなじみの手順の課金方法を実現するAPI

Web＝Nativeへ

• ないものを取り込んでAPI化

• ブラウザ技術からプラットフォームへ

他のモバイルOSと比較 （Androidの構造）

• Androidではブラウザの機能はWebKitが実現する

• プラットフォーム固有部分の実装はNative層

• AndroidのAPIはJNIを通じてJavaでWebViewとして提供される

• HTML5アプリはWebViewの上に乗る

他のモバイルOSと比較 （iOSの構造）

• iOSではブラウザの機能はWebKitが実現する

• プラットフォーム固有部分の実装はCoreService層

• ブラウザ部分はCocoa層でUIWebViewとして提供される

• HTML5アプリはUIWebViewの上に乗る

他のモバイルOSと比較 （Firefox OSの構造）

• FxOSではブラウザの機能はGeckoが実現する

• プラットフォーム固有部分の実装はGeckoとGonk（HAL）層

• ブラウザ部分もGeckoで定義されるがデスクトップブラウザと違ってChromeはほとんど何もない

• HTML5アプリはGeckoの上に乗る – 余計なVMやコンポーネントが間に挟まらなくてシンプル

他のモバイルOSと比較（一覧）

Android iOS FxOS

大まかな構造

• 大きく以下の三つからできている – Gaia(システムアプリ)

– Gecko(ブラウザ/HTMLエンジン)

– Gonk(HAL)

• 引用元 – https://developer.mo

zilla.org/ja/docs/Mozilla/Firefox_OS/Platform/Architecture

Gonk

• HAL層のインターフェイスをGeckoに合致させるための層

• カーネルとドライバ自体はAndroidのものを使う

• FxOSの主要な層の中では実装量が極端に少ない

Gecko

• HTMLエンジンとブラウザを実装している層

• デスクトップのFirefoxで使用されるものと同じもの

– 現在デスクトップ版が25

– FxOSの商用端末（v1.1）では18

– 12月のFirefoxリリースでどちらも26になる

• HTMLやCSSのレンダリング、JSの評価、WebAPIの提供など主要な部分はすべてGeckoで実装されている

Gaia

• システムアプリやプリインアプリを実装している層

• Geckoが起動してChromeプロセスを作るとSystemアプリがロードされる

• ここに置かれるアプリはSystemアプリを除いてContentプロセスという制限プロセスになる – ContentプロセスはChromeプロセスのプラグインとして動くことになる

– デスクトップでいうFlashなどと同じ仕組み

アプリの概要 （さわり）

• いわゆるHTML5アプリ

• デバイスの制御などもWebAPIとして提供される

• 標準化されていないもの、されないものはmozプリフィックス付でglobal.windowかglobal.window.navigatorあたりにぶら下がっているはず

アプリの概要 （通常のWebアプリとの違い）

• Manifest.webappを用意することでインストールできるようになる

• すでに動いているWebアプリがあるなら5分でFxOSアプリ

アプリの概要 （権限による違い）

種別 配置場所 権限

Hostedアプリ Web Webアプリにmanifest.webappを加えたもの。 端末のデバイスを触る機能に制限が強い。

Packagedアプリ 端末 Hostedアプリをパックして端末内にインストールできるようにしたもの。

Privilegedアプリ 端末 特権を要求するアプリ。デバイスの操作や通信が必要なものはこれ。 審査が厳しくなる。

Certifiedアプリ 端末 端末メーカがプリインアプリでのみ使用可能な強い権限のアプリ。 カメラなど一部の機能はCertifiedでないと使えない。

アプリ開発

開発環境

• FxOSのアプリはただのHTML5なので お気に入りのHTML5アプリ開発環境を 使える

–ちなみに藪下はvimで書いてFirefoxとかChromeの開発者ツールでデバッグしてます

• 最近よく聞くのはAptana StudioとかIntel XDKとか

シミュレータ

• Firefoxアドオンとして提供されている

–アドオンセンターでFirefox OS Simulatorで検索してAddしてみると簡単に導入できる

–エンジンやAPIはFxOSもデスクトップも 同じGeckoなのでシミュレータで動けば ほぼ実機で動く

–デバイス制御系はさすがにないので Firefox for Androidとかで試しましょう

シミュレータのデモ

開発者ツール

• 今どきのブラウザはJSの実行をブレークしたりステップ実行したりできる

• もちろん変数がウォッチできるし値も 変えられる

• ただコードとかスタイルとかは書き換えられない

開発者ツールのデモ

次期開発ツール

• これまでの開発ツールは力不足 – シミュレータが複数入れられないしバージョンが指定できない

– スタイル書き換えたりできない

• AppManagerの追加 – 複数シミュレータが使えるようになった

• 開発者ツールも進化 – スタイル書き換えたりできるようになった

• ただしこれらのツールがFirefoxでリリースされるのはまだ先 – 今はNightlyとAuroraで使用可能

次期開発ツールのデモ

AppMaker

• 開発ツールかというとちょっと違うかも • 簡単なRIA環境

– もともとプログラミング教育を研究している チームが中高生でも簡単にアプリを作れる環境を 作りたかった

• ポチポチやると意外と楽しい • コンポーネント次第で化ける

– のでAppMakerでアプリ作ったり コンポーネント追加するハッカソンやりました • Webプラットフォーム勉強会1311 • http://atnd.org/events/44944

AppMakerのデモ

Firefox OSの開発

開発機

• ボード

• スマートフォン

• エミュレータ

ボード

• Pandaboard

– OMAPなのでSnapdragonが多いFxOS界隈ではちょっとニッチ

• 一部ではRaspberry Piで動かそうとしている人たちがいるとか

–結構みんな独立にやってるっぽい

–かくいう藪下もその一人です

スマートフォン

• Unagi/Otoro – この辺りはGeeksphoneの開発端末のコードネーム

• Keon/Peak/Peak+ – Geeksphoneから一般に発売中の開発端末

• Inari – ZTE Openのコードネーム

• ZTE Open – eBayでSIMフリー版が発売中 – 日本からだとeBay HKあたりなら買えるはず

• Nexus S/Nexus S 4G/Nexus 4 • Galaxy Nexus/Galaxy S2

エミュレータ

• デスクトップ – Firefoxの上でGaiaを動かすもの

• エミュレータ（ARM/ｘ８６） • エミュレータJB（ARM/ｘ８６）

– Firefox OS本体を修正した場合などは主にエミュレータで動作確認する

– JB版はv1.2以降で下敷きにするAndroidのバージョンが4.3になるのでそのためのもの

• シミュレータ – 前述のシミュレータ – 今後バージョンごとに出そう – 実は全言語版がこっそりある

• http://r2d2b2g.flod.org/

ホストOS

• Mac OS X – Lion推奨

– 山Lion以降の場合Xcodeのバージョン的に 注意点がある

• 各種Linux – 各ディストリビューションの差異でビルド 環境構築の注意点が違うかも

– 基本的にはAndroidのビルド環境と同じなので 注意点はAndroid4.0以降向けの情報を探せばOK

• Windows – Cygwinではつらかとです。。。

ビルド環境の構築

• 基本的にはAndroidと同じなのでざっくり以下のパッケージを 入れればよい – autoconf 2.13 – Bison/flex – Bzip2/ 32-bit zlib – ccache – curl – gawk – git – gcc / g++ / g++-multilib (4.6.3 以前) – make – OpenGL headers – X11 headers – 32-bit ncurses

• 詳しくはこちら – https://developer.mozilla.org/ja/docs/Mozilla/Boot_to_Gecko/B2G_bui

ld_prerequisites

ビルド

• config.sh

• build.sh

• flash.sh

config.sh

• 各デバイス向けのコンフィグと リポジトリのクローン、更新、チェックアウトをしてくれる

–デバイス名がわからないときは引数なしで 実行すると一覧される

• 対応機種以外は地道な移植作業が 待ってます。。。

build.sh

• コンフィグが完了したらbuild.shで ビルド開始する

– Androidでもおなじみマルチスレッド スイッチがあるのでコア数に合わせて -j<数字>をつける

– Gaiaとかgeckoとつけるとモジュールごと ビルドも可能

flash.sh

• 実機への焼きこみスクリプト

– build.sh同様gaiaとかgeckoをつけると モジュールごと焼きこみが可能

• 端末によってはsudoしないとfastbootがこけるかも

run-emulator.sh

• エミュレータの実行

–基本はAndroidのエミュレータを使っているのでAndroidのものと同様のオプションが使えるはず

宣伝

コミュニティはじめました

• FxOSコードリーディング

– https://www.facebook.com/groups/fxos.code.reading/

FxOSコードリーディングって？

• FxOSのソースコードを読みます

–好きなところを読みます

–気軽に読みます

–必要なのは読みたい気持ちとソースだけです

–気軽に知ってることを教えあいましょう

• そのソースここらへんとかそれにはこれが参考になるかもとか

ミートアップの様子

• たまには集まって 読みます

– １１／４にやったミートアップイベントのようすです。

• 参加者のいいづかさんのQiitaから

– http://qiita.com/iizukak/items/fea7fb927e3056230a43

勉強会登壇予定

• わんくま勉強会名古屋＃２９ – １１／２３

• 関西Firefox OS勉強会5th GIG – １１／２３ – こちらは弊社丸山（か新谷）がスピーカー やります（どっちもLTやることになりそう）

• 関東Firefox OS勉強会５th – １１／２６

• FxOS Gecko勉強会その２ – １２／１９

Advent Calendar

• Firefox OS Advent Calendar

– http://www.adventar.org/calendars/103

ConoHa VPS

• FxOSコードリーディングではGMO様 よりコミュニティ支援でConoHa VPSを お借りしてます – ConoHaについて詳しくはこちら

• http://www.conoha.jp/

• アカウントの音声認証でこのはたんがアナウンスしててビビりました

–コミュニティ支援についてはこちら • http://www.conoha.jp/news/674.html

–チラシをもらってきたので配ります

おしまい

ご清聴ありがとうございました