Firefox OSことはじめ

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

はじめに

自己紹介

• 名前：藪下 正美

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

• どんな人？

– @aoi_nagatsuki

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

会社紹介

• 株式会社グローバルサイバーグループ –やる気と人間性を大切にする総合開発企業

–とかはどうでもよくて

• ブログやってます – http://www.gcg.bz/labo_blog/

–ＧＣＧ研究所で検索！

–ネタ募集中！

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

まえふり

• 今日は情報量多いです

• メモって質問！

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

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

• 大まかな話

– FxOSとは

–なぜwebなのか

–大まかな構造

–アプリの概要

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

• アプリ開発

–開発環境

–シミュレータ

–開発者ツール

– AppMaker

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

• FxOSの開発

–開発機

–ホストOS

–ビルド環境の構築

–ビルド

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

• 宣伝

–コミュニティ紹介

–イベント予定

– ConoHa VPS

大まかな話

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

– ８00万人

iOS

Android

HTML5

-2000000 3000000 8000000

課題の克服

• 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、DeviceStorage、DataStore API

• マルチメディアAPI

– WebAudio、 WebRTC、Camera

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

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

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

• センサーAPI

– Geolocation、Orientation、Ambient Light、Proximity

• ハードウェア制御

– USB、BT、FM Radio、NFC

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

• 通信API

– WebSocket、TCP Socket、 UDP Diagram Socket

• 連携

– 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で使用されるものと同じもの – 現在デスクトップ版が2６

– 日本から手に入るFxOSの商用端末の出荷状態（v1.1）では18

– v1.2にアップデートすると２６になる

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

Gaia

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

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

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

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

• ただしCertifiedというAPIに制限のないアプリタイプを選択できる

アプリの概要 （さわり）

• いわゆる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とかInteli Jとか

シミュレータ

• Firefox OS v1.1 Simulator

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

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

– エンジンやAPIはFxOSもデスクトップも 同じGeckoなのでシミュレータで動けば ほぼ実機で動く • ただしシミュレータのほうが速いとかも普通にある

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

開発者ツール

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

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

• AppManager

– v1.2やv1.3のシミュレータを使うならAppManagerを使う必要がある

–たぶん清水さんが詳しく話してくれます

AppMaker

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

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

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

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

Firefox OSの開発

開発機

• ボード

• スマートフォン

• エミュレータ

ボード

• Pandaboard – OMAPなのでSnapdragonが多いFxOS界隈ではちょっと（だいぶ？）ニッチ

• APC Paper/Rock – ViaからAndroid向けに出ていたボード

– 最近FxOS搭載版が出た

• 一部ではRaspberry Piで動かそうとしている人たちがいるとか – 結構みんな独立にやってるっぽい

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

スマートフォン

• Keon/Peak/Peak+/Unagi/Otoro

– Geeksphoneから一般に発売中の開発端末

– Unagi/OtoroはKeon/Peakのコードネーム

• ZTE Open/Inari

– eBayでSIMフリー版が発売中

– 日本からだとeBay HKあたりなら買えるはず

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

• Nexus S/Nexus S 4G/Nexus 4/Nexus 5

• 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 – make – OpenGL headers – X11 headers – 32-bit ncurses

• 詳しくはこちら – https://developer.mozilla.org/en-

US/Firefox_OS/Firefox_OS_build_prerequisites

ビルド

• config.sh

• build.sh

• flash.sh

• run-emulator.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コードリーディング – Facebook

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

– Github • https://github.com/FxOS-Code-Reading-

Group/MainRepo

– OpenGrok • ドメイン取得次第一般公開します • 現在グループ内限定で公開してます

– AppMaker • FxOSコードリーディングでコンポーネントを追加している

AppMakerもドメイン取得次第公開します

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

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

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

–気軽に読みます

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

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

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

ミートアップの様子

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

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

• いいづかさんの Qiitaから

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

イベント予定

• わんくま勉強会名古屋＃３０ – ２／１５ – 関西Firefox OS勉強会で登壇されているuniunixさんが登壇されます

• 関東Firefox OS勉強会６th – ２／１６ – 今回はハンズオンですよ！

• FxOSコードリーディングミートアップ＃４ – ２／２２ – 休日開催なのでのんびりまったりやりましょう

• FxOS Gecko勉強会その３ – ３／５ – HTMLの描画に起因する速度低下がテーマです

• ABC2014Spring – ３／２１ – FxOSコミュニティでブース出します – 講演依頼もあるので誰かが何か話します

ConoHa VPS

• FxOSコードリーディングではGMO様 よりコミュニティ支援でConoHa VPSを ご提供いただいています

– ConoHaについて詳しくはこちら

• http://www.conoha.jp/

• アカウントの音声認証でこのはたん（CV 上坂すみれ）がアナウンスしててビビりました

–コミュニティ支援についてはこちら

• http://www.conoha.jp/news/674.html

おしまい

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