firefox os - blaze your own path

Last Update: 2013/03/16

Firefox OS: Blaze Your Own PathSlides @ ABC 2013 Springby Tomoya Asai (dynamis)

FFiirreeffooxx OOSS でAAnnddrrooiidd 端末の世界が広がる！？

about:me

about:dynamisLesser Panda @ Mozilla

http://dynamis.jp@dynamitter

facebook.com/dynamisレッサーパンダが好き。

mailto: Tomoya ASAI <dynamis mozilla-japan.org>@

Topics

本日のトピック

BackgroundOverviewBuild & FlashApp DevMarketplace

ぼくおやつ担当ねっ！

about:foxkeh

今日もプレゼンを手伝ってくれるフォクすけを紹介します

いつか僕も Firefox みたいな立派なブラウザになるんだ！

ぼくフォクすけ

サーバ (Apache Camel) の上にクライアント (Firefox)

ぼくのステッカーを君のPC とスマホに貼ってね！

君と一緒にお出かけしたいな！

Background

独自プラットフォーム

ネイティブアプリ機能も速度もネイティブ優先

アプリエコシステム制限多くビジネスの自由度低い

WebView + 独自 APIWeb はサブセット扱い

独自プラットフォーム

プラットフォーム毎に異なる言語で個別の専用アプリを作る必要がある

i a f c

独自プラットフォームの課題

プラットフォーム依存それぞれ異なる言語や API

不透明な継続性・再利用性ベンダー依存の運命共同体

Fragmentation・実装依存同一プラットフォームでも非互換

独自プラットフォームの課題

プラットフォーム依存それぞれ異なる言語や API

不透明な継続性・再利用性ベンダー依存の運命共同体

Fragmentation・実装依存同一プラットフォームでも非互換

http://i0.wp.com/cerebrux.files.wordpress.com/2012/09/androidclones.jpg

Fragmentation...

"HTML5" への期待

次世代プラットフォームWeb 技術で何でも可能に

Web アプリ開発を簡単にAPI の充実と互換性確保

マルチデバイス対応開発言語や API の共通化

Web が共通プラットフォーム

Web がプラットフォームなら業界標準技術でアプリ環境が統一される

プラットフォームとしての Web

標準技術 のオープンな世界vs

独自技術 による囲い込み

「ブラウザ戦争」の時代はとっくに終わりました

HTML5 = WebKit の方が良い？

それどの WebKit？IE6 vs IE10 以上に違う現実

その API と実装で大丈夫？複数実装でより良い標準に

イノベーションは競争から独占が進化を止めてたよね…

HTML5 = WebKit の方が良い？

それどの WebKit？IE6 vs IE10 以上に違う現実

その API と実装で大丈夫？複数実装でより良い標準に

イノベーションは競争から独占が進化を止めてたよね…

I am sad that the Web didn’t handle small screens ̶ and later, touch UI ̶ that well. ... snip ...

For touch, though, I wish we had done a better job of mapping the UI to the Web’s generic events. A touch gets mapped to a “click” event easily enough, but drag-and-drop never got mapped, pinch gestures didn’t get mapped to wheel events, etc. Mainly I think this is because the first truly successful touch browser set the standard, and it was developed

mostly in secret with a small team many of whom, as I understand it, weren’t Web veterans.

Ian Hickson のインタビューより

独占やクローズド仕様は残念…

タッチイベントが残念…ドラッグ＆ドロップは？ピンチとホイールの対応は？

密室で作られたから…最初の人気タッチブラウザ実装Web 技術知らない奴らが作った

オープンな標準は世界の英知の結晶

オープンな環境と競争でイノベーションを加速！

オープンと競争は革新の源泉

Overview

FFiirreeffooxx OOSS ってどんな感じ？

フォクすけもわくわく。

Firefox OS = Boot to Gecko

Gecko エンジンだけ起動Kernel 上に Gecko (Web Engine)Java VM など不要な部分は削除

HAL 層は Android と共通Linux 部分で独自性は必要ないAndroid と同じエコシステム

プロジェクト名は今でも Boot to Gecko

シンプル＆スマート

Web プラットフォームの実行環境としては圧倒的にスマート！

WHAT IS FIREFOX OS?

6

HOW IS IT DIFFERENT FROM ANDROID

HTML5 User Experience/

Content

Kernel

Device

Web Engine/ Standard

Device APIs

Firefox OS

Web Browser/ Platform

Native API-based UI

Kernel (e.g. Android, iOS,

Win7, etc.)

Device (phone, tablet,

desktop)

APIs

Android

アーキテクチャWHAT IS FIREFOX OS: ARCHITECTURE OVERVIEW

Web API

I/O (hardware & data stores)

Boot to Gecko (b2g)

Device hardware

Low-level processes, proxies & daemons (rild, mediaserver, netd, etc.)

Gecko

Gaia

Gonk

Device

Gecko Parent

Permission Manager Access Control List

Credential Validation

Permissions Store

Web Content (App)

Execution Environment

Gecko child

Web 技術 = Native

Web 技術が「ネイティブ」HTML/CSS/JS ですべて可能に新しい API は W3C 標準化

速度も Java に追いつく単純な演算程度なら既に同程度WebGL や DOMCrypt なども活用時間の問題だから期待しててね！

Web 技術だけですべてが済むプラットフォームとなるよう発展中

ステータスバー (通知、電波強度、電池残量...)もカメラやラジオもビデオや音楽の再生もマーケットプレイスもシステムの環境設定もホーム画面や壁紙も電話や SMS の送受信ももちろん ブラウザ も

その他なんでも...

ステータスバー (通知、電波強度、電池残量...)もカメラやラジオもビデオや音楽の再生もマーケットプレイスもシステムの環境設定もホーム画面や壁紙も電話や SMS の送受信ももちろん ブラウザ も

その他なんでも...

すべて Web 技術で！

2012 年実装 Web APIAlarmattention screenArchiveAudio PolicyBackground SensorBrowserCameraContactsDesktop NotificationDevice StorageEmbed Apps

File HandleFM RadioIdleAPIMouse LockMobile ConnectionNetwork EventsNetwork Stats ManagePaymentPermissionsPower Management

Push NotificationsSettingsSMSScreen OrientationSystem XHRTCP SocketWeb TelephonyTime ManagerOpen Web AppsWiFi Managementなどなど...

実装状況などのまとめ表: https://wiki.mozilla.org/WebAPI

Next Web APIBackground ServicesBluetooth-***CalendarDatabase Migration (temp to permanent storage)FileSystem?NFCHTTP-cacheKeyboard/IMELogMPEG DASHOpen Web AppsParallel Array

PaymentQuotaResource LockSimple StorageSocial APISPDY Server PushSpellcheckUDB Datagram SocketUSB (low-level)USB file-readingWebRTC - CameraWebRTC - P2Pなどなど...

どこまで今年中にサポートされるか楽しみ！

Firefox OS の魅力

スリムな HTML5 実行環境$100 でもフル機能のスマホを今後の高速化もし易い設計

圧倒的な開発者数Web 技術だけですぐアプリ開発

ハイブリッド権限管理インストール時 or 実行時の許可

急速な高速化が続き、型推論の効く処理は既に Dalvik/Java にも匹敵

開発者の多いプラットフォーム

調査にも依るけど HTML5 開発者の方が圧倒的に多い

800万人

45万人10万人

Firefox OS とセキュリティ

ユーザがアプリ権限管理可インストール時と実行時に権限を許可するハイブリッド方式「インストール時に全て許可」ではプライバシーは守れなかったユーザが理解できプライバシーなどに関わる API は実行時確認

アプリも「ぐぐる」時代へ

"まずインストール" は古いディレクトリ(分類)だけのマーケットでは Google のない WebWeb と Market の横断検索

動的な Web アプリ環境Web はアクセスするだけアプリを検索してまず試し、気に入ったらホームに追加する

*1 everything.me ってサービスだから正確には「えぶる」かも？

*1

透明性や自由度の高いプラットフォーム

開発者/OEM/キャリア

AppleApp Store

iPhone/iPad

ユーザ

GooglePlay

端末

ユーザ

MSMarketplace

端末

ユーザ

market 開発者/OEM// キャリア

ユーザ端末

既存の独占的プラットフォーム

Firefox OS によるOpen プラットフォーム

パートナーとの製品化

日本では KDDI が参加表明

MWC ANNOUNCEMENTS

Ecosystem Commitments

Global アプリパートナー

まだまだあるけど入り切りません。一部ロゴ古いかも。ゴメンね。

ステキ。

僕もスマホになって君と一緒にお出かけしたいな！

Build & Flash

サポート端末 (最新じゃない？)

Tier 1Unagi, Otoro, Pandaboard, Emulator, PC

Tier 2Nexus S, Nexus S 4G

Tier 3Galaxy S2, Glaxy Nexus

ICS (Android 4.0)～ の動作端末上記以外の端末にはパッチが必要

https://developer.mozilla.org/ja/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites

おさかなさん＝？？？

Goldfish = 金魚Trout = サケ科の総称Mahimahi = マヒマヒHerring = ニシンStingray = アカエイTuna (Maguro & Toro)

おさかなさん＝端末 (Android)

Goldfish = EmulatorTrout = G1Mahimahi = Nexus OneHerring = Nexus SStingray = XoomTuna = Galaxy Nexus

Android では伝統的に端末のコードネームがおさかなさん

おすし＝端末 (Firefox OS)

Otoro = 初代開発機Unagi = 第二代開発機Ikura = 第三代？Inari = ？？？Hamachi = ？？？Buri = ？？？

Firefox OS では端末のコードネームは寿司ネタ

ビルド環境

Mac OS XXCode 4.3.1~

64bit GNU/Linux GCC~4.6.3Ubuntu 12.04 が標準Linux Mint 13, Debian 6,Ubuntu 12.10, Fedora 16/17/18

標準ビルドは Ubuntu で作られてますが Mac でビルドするのが楽です

Firefox OS ビルド環境 (Mac)// 1. XCode, Command Line Tools インストール// 2. XCode 4.3.x から MacOSX10.6.sdk をコピー// /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.6.sdk// 3. HomeBrew が入ってなければ入れるruby -e "$(curl -fsSkL raw.github.com/mxcl/homebrew/go)"

// 4. セットアップスクリプト実行！curl -fsSL https://raw.github.com/mozilla-b2g/B2G/master/scripts/bootstrap-mac.sh | bash

https://github.com/dynamis/firefoxos/wiki/article#wiki-build

Firefox OS のビルド＆書き込み// 1. リポジトリの Clonegit clone git://github.com/mozilla-b2g/B2G.gitcd B2G

// 2. 対象端末を指定 (引数無しでリスト表示)./config.sh nexus-s

// 2. ビルド実行 (-j* は並列ビルド数の指定)./build.sh -j4

// 3. 端末に書き込み (adb 必要です)./flash.sh

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Building

Apps Dev

Firefox OS のアプリ開発

Web アプリです。Web アプリです。Web アプリです。

大事なこと３回

Firefox OS のアプリ開発

Web アプリです。Web アプリです。Web アプリです。

大事なこと３回

Firefox OS のアプリ開発

いつもの開発ツールいつものエディタいつものライブラリ

いつもと一緒だから安心だね！

アプリ開発の流れ

普通に Web 開発デバッグもいつも通り

manifest ファイルを用意メタ情報を JSON 形式で記載

シミュレータや実機テストPC で動かない API は実機で確認Vibration や Sensor など...

https://github.com/dynamis/firefoxos/wiki/simulator

manifest.webapp 追加するだけ

Hosted AppWeb から読み込むアプリWeb サイト + manifest.webapp

Packaged App従来型のダウンロードアプリサイト全体を ZIP するだけ

manifest.webapp ファイル{  "name": "フォクすけアプリ",  "description": "あのフォクすけが遂にアプリに！",  "launch_path": "/index.html",  "icons": {    "128": "/icons/foxkeh-128.png"  },  "developer": {    "name": "dynamis",    "url": "http://dynamis.jp/"  },  "default_locale": "ja"}// 注意: ローカルファイルで / -> /index.html 変換はない

https://developer.mozilla.org/en-US/docs/Apps/Manifest

Firefox OS Simulator

再起動不要の拡張機能https://addons.mozilla.org/ja/firefox/addon/firefox-os-simulator/ポチッと押すだけWeb 開発メニューに追加されるFirefox デスクトップビルド＋プロファイル＋Alpha

詳しい解説: https://github.com/dynamis/firefoxos/wiki/simulator

Firefox OS Simulator (r2d2b2g)

プロファイル付きデスクトップビルドにホームボタンを追加コンソールやディレクトリからアプリケーションを読み込む機能も

シミュレータにインストール

Add Directory ボタンmanifest ファイルを選択zip されて packaged app としてインストールされ、起動する

Update ボタンで更新同じディレクトリのファイルを zip し直して、起動する

https://github.com/dynamis/firefoxos/wiki/simulator

つーるきっととかは？

Firefox OS 標準のライブラリとかあるの？

GAIA Building Blocks (UI 部品)

Gaia (Firefox OS 標準) Appsのデザインを簡単に作れるhttp://buildingfirefoxos.com/

使っても使わなくても OK好きな SDK/Library 使える自由な Web ですから！

http://buildingfirefoxos.com/

Marketplace

まーけっと？

Web アプリの配信方法は？

Firefox Marketplace

Device, OS 横断マーケットWeb Platform のためのストアFirefox 限定にならない設計

現在テスター向け公開中対象は Firefox OS と Android 版 Firefox の開発版ビルドPC で使うには UA 書き換え...

https://marketplace.firefox.com/

オープンなアプリストア

全てを Web 技術で実装安定・平等な環境を提供Marketplace のソースも公開

ベンダー非依存Firefox Marketplace 以外にもストア、認証、課金も自由に

https://marketplace.firefox.com/

オープンなレビューシステム

コミュニティレビューFirefox のアドオンと同じレビュー基準もレビュアーもすべてオープンで公平なマーケット

動作まではレビューしないあくまで最低限のフィルタ

https://developer.mozilla.org/en-US/docs/Apps/Marketplace_review_criteria

自分のサイトで配布

install() 関数使うだけnavigator.mozApps.install(url)manifest ファイル URL を渡す

その他の Apps API:navigator.mozApps.getSelf()navigator.mozApps.getInstalled()installPackage(url)

https://developer.mozilla.org/en-US/docs/Apps/Apps_JavaScript_API

navigator.mozApps.install(url)var Apps = navigator.mozApps;var manifesturl = "http://apps.dynamis.jp/manifest.webapp";

var request = Apps.install(manifesturl);request.onsuccess = function() {  // 成功時の処理};request.onerror = function() {  // 失敗時の処理};

Firefox ＝ WebRT (WebRunTime)

Gecko は元からアプリ環境Firefox = Gecko で XUL/JSWebApps = Gecko で HTML/JS

マルチデバイス対応PC, Android, Firefox OS...同じコードでどこでも動くマーケットもマルチデバイス

どろいど君とも仲良し！

Android に Web アプリ環境を

Web App = Native App にホームスクリーンへの追加や独立してフル画面起動などネイティブ同様の利用体験

Firefox = WebRT for Android

ホームにインストール、アプリを起動した画面、マーケットをブラウズ

PC にも Web アプリ環境を

Web App = Native App にプログラムフォルダ (アプリケーションディレクトリ) への追加ウィンドウはもちろんプロセスもデータも全て独立

Firefox = WebRT for PC

WWeebb だからどこにでも！

Web らしいシステムだね！

実機で開発したい？

僕の手でも使えるかな？

Developer Preview Phone

Telefónica と Geeksphone が作る開発者向けテスト端末

Developer Preview Phone

近日発売予定Keon:Snapdragon 1GHz, 4GB ROM, 512MB RAM, 3.5" HVGA

Peak:Snapdragon 1.2GHz x2, 4GB ROM, 512MB RAM, 4.3" qHD

http://www.geeksphone.com/

もっと知りたい？

僕はもっと知りたい！

Firefox OS コミュニティを！

http://FxOS.org/(https://groups.google.com/group/firefoxos にリダイレクト)

http://FxOS.org/wiki(https://github.com/dynamis/firefoxos/wiki にリダイレクト)

みんな参加してね。みんなよろしく！

ぼくには難しいことは分からないけど許してね。

質問ある？

See Also...

開発者ツール紹介

一通りの機能と使い方Firefox 標準の開発者ツール隠し設定やビルトイン関数のリファレンスなども含めています

Firebug とその拡張機能アイコンや背景画像を変更するカスタマイズにも言及してます

http://r.dynamis.jp/devtools

Web 技術 2012 年の変化

最新 Web 技術動向2012 年に進化した点やブラウザベンダーの動向を紹介

HTML5 から HTML5.1 へHTML の仕様は進化と安定化が同時平行で続けられる

JavaScript.Next

JavaScript の最新仕様ECMAScript 5th のポイント

JavaScript 次世代仕様ECMAScript 6th や Harmony

http://r.dynamis.jp/jsnext

セキュリティ関連機能紹介

セキュリティ大事！知っておくべき機能です

Content Security Policy次世代セキュリティポリシーSame Origin Policy はもう古い

http://r.dynamis.jp/sec