Firefox OS App Dev@ HTML5 Caravan @ JAWS FESTA 2013

on 2013/09/28by Tomoya Asai (dynamis)

about:me

Tomoya ASAI

Mozilla JapanTechnical Marketing (Evangelist)

dynamis @ communitydynamis.jp

@dynamitter

facebook.com/dynamis

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

about:topics

本日のトピック

Firefox OSApplication DevelopmentFirefox OS SimulatorDebug with Android FirefoxPublishing Apps

ぼくおやつ担当ねっ！

Firefox OS

ホーム画面

アプリのグリッド表示

写真ギャラリー

写真の編集画面

音楽再生アプリ

ビデオ再生アプリ

アドレス帳

メールアプリ

Firefox

Firefox Marketplace

Firefox OS - Web is the Platform

Web = アプリ環境アプリはすべて Web 技術でドメイン = アプリの１：１対応Web を進化させる不足機能は API を定義・標準化Web のセキュリティモデルなども実装・標準化していく

Web 技術 = Native へ

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

速度も Java に追いつくasm.js により大幅高速化を実現WebGL や DOMCrypt なども活用

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

SemanticElements

MultiMedia

HTML5Forms

OfflineSupportHTML5HTML5

Parser

Mouse,Key ev.

XHTML5WAI-ARIA

W3C

SemanticElements

MultiMedia

Canvas

HTML5Forms

OfflineSupport

Micro-Data

Server-Sent ev.

WebSockets

WebStorage

HTML5HTML5Parser

Mouse,Key ev.

XHTML5

WebWorkers

WebMessag-

ing

WAI-ARIA

W3C

WHATWG

HTML

SemanticElements

MultiMedia

Canvas

HTML5Forms

OfflineSupport

Micro-Data

Server-Sent ev.

WebSockets

WebStorage

Layout

MediaQueries

HTML5

CSS3~Transform

Animation

Regions

Filters

HTML5Parser

Mouse,Key ev.

XHTML5

WebWorkers

WebMessag-

ing

WAI-ARIA

W3C

WHATWG

HTML

SemanticElements

MultiMedia

Canvas

HTML5Forms

OfflineSupport

Micro-Data

WebGL

IndexedDB

SVG

Server-Sent ev.

WebSockets

WebSockets

Geo-location

FileAPI

WebStorage

XHR2

MathML

Layout

MediaQueries

HTML5

CSS3~Transform

Animation

Regions

Filters

HTML5Parser

Mouse,Key ev.

ECMAScript

CSP

SPDY

XHTML5

Orien-tation

WebWorkers

WebMessag-

ing

DOM4

SMIL Vibra-tion

XPathRSS

OGP

WAI-ARIA

W3C

WHATWG

other

Khronos

ECMA

IETF

WOFF

HTML

DNT

SemanticElements

MultiMedia

Canvas

HTML5Forms

OfflineSupport

Webm

H.264

Micro-Data

WebGL

WebSQL

IndexedDB

SVG

Server-Sent ev.

WebSockets

WebSockets

Geo-location

FileAPI

WebStorage

XHR2

MathML

WebAudio

Layout

MediaQueries

HTML5

CSS3~Transform

Animation

Regions

Filters

HTML5Parser

Mouse,Key ev.

Opus

ECMAScript ECMA

6th

USB

CSP

SPDY

WebCL

WebRTC

NetInfo

MP3

DeviceStorage

TCPSocket

NFC

File Sys

Notifi-cation

XHTML5

Orien-tation

WebWorkers

WebMessag-

ing

DOM4

SMIL Vibra-tion

Proxi-mity

XPathRSS

RDF

OGPSchema

.org

WAI-ARIA

W3C

WHATWG

other

Khronos

ECMA

IETF

WOFF

BatteryStatus

Radio

Tel

HTML

DNT

FlexBox

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

その他なんでも...

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

その他なんでも...

すべて Web 技術で！

Firefox OS : Tizen : Android

Native Framework

カーネル & HAL

Web Platform

Web Framework

App Framework

Android Runtime

Dalvik

WebKit

Javaアプリ

ブラウザアプリ

NativeLibrary

Webアプリ

WebKit

Webアプリ

Nativeアプリ

OSPetc...

DeviceAPIWebRT

Webアプリ

PackagedWebアプリ

コアサービスGeckoDeviceAPI SystemAPI

Web に最適化シンプル＆スマート

ライブラリSGL etc.

NativeInterface

カーネル & HAL カーネル & HAL

X.org etc.

左上のアプリが Web 読み込み型、右上のアプリがダウンロード型

大規模アプリは遅かった

大規模アプリの処理速度ではC 言語と大きな差があった…

小規模コードは十分に高速化できても大規模コードの最適化はまだまだ…

ネイティブに近い処理速度へ

asm.js で C の 1/2 程度までJava や C# の処理速度と同程度

asm.js 対応は Firefox OS では 1.2 から導入される予定

時にはネイティブより高速に

Java より全ベンチ高速C より速いこともあるメモリ確保が重いケース？

小規模演算での比較例Java コードを Dalvik で実行C コードをネイティブ実行C を JS に変換して実行

https://blog.mozilla.org/javascript/staring-at-the-sun-dalvik-vs-spidermonkey/

Unreal Engine on Browser

100 万行以上の C & OpenGL コードを 5 日で移植LLVM + Emscripten で JavaScript (asm.js) に変換

epic CITADEL http://www.unrealengine.com/html5/

多数企業と共同開発・製品化

主要 18 キャリアが賛同KDDI, Telefónica, Deutsche Telekom、Telenor...

チップ＆端末メーカーQualcomm, ARMZTE, Alcatel, LG, Huawei, SonyFoxconn...

もちろん発表している企業がすべてではない

グローバル市場に拡大

Firefox OS の取り組みに賛同する企業の一部 (MWC の記者発表会より)

グローバル市場に拡大

Firefox OS の取り組みに賛同する企業の一部 (MWC の記者発表会より)

チップ＆デバイスメーカー

Developer Preview Phone

4/23 発売 (品切れ中)Keon: 91€+tax+shippingMSM7225AB 1GHz, 4GB ROM, 512MB RAM, 3.5" HVGA

Peak: 149€+税+送料MSM8225 1.2GHz x2, 4GB ROM, 512MB RAM, 4.3" qHD

http://www.geeksphone.com/

Peak+ (Pre-order)

9～10月発送 (完売)11月発送 (予約受付中)Peak: 149€+税+送料MSM8225 1.2GHz x2, 4GB ROM, 1GB RAM, 4.3" qHDメモリ容量増加と質感向上149€ は予約時限定特価らしい

http://shop.geeksphone.com/en/phones/8-peak.html

７月から各国で順次発売

7月2日にスペインで発売Telefónica が ZTE Open を発売実質 5000円 の誰でもスマホ€69 (税込) プリペイド €30 含む

順次世界各国に展開7月12日にポーランドで発売8月1日にラテンアメリカで発売

日本や北米では 2013~2014 年中の見込み http://mozilla.jp/blog/entry/10310/

ワルシャワやマドリッドでは…

ワルシャワやマドリッドでは…

ワルシャワやマドリッドでは…

ワルシャワやマドリッドでは…

ZTE の誰でもスマホ

ZTE Open:Size: 114 x 62 x 12.5 mmDisplay: 3.5" HVGACPU: MSM7225A 1 GHz (Cortex-A5, Adreno 200)RAM 256 MBROM: 512 MB

スペインなどで発売

http://www.ztedevices.com/product/smart_phone/2bcf2d56-0c9a-4129-a25c-acce58c8e502.html

Alcatel (TCL) の誰でもスマホ

One Touch Fire:Size: 115 x 62.3 x 12.2 mmDisplay: 3.5" HVGACPU: MSM7227A 1 GHz (Cortex-A5, Adreno 200)RAM 256 MBROM: 512 MB

ポーランドなどで発売

http://www.alcatelonetouch.com/global-en/products/smartphones/one_touch_fire.html

SIM フリー版も eBay で発売

ZTE Open SIM フリー版開発者や初期採用者向けeBay US で 79.99 ドルeBay UK で 59.99 ポンド特定の国向け設定はされないオレンジは eBay 限定カラー！？8月16日発売、数日で完売…

https://blog.mozilla.org/blog/zte-will-soon-start-sales-of-firefox-os-phones-on-ebay/

Apps Dev

Firefox OS のアプリ開発

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

大事なこと３回

Firefox OS のアプリ開発

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

大事なこと３回

Firefox OS のアプリ開発

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

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

アプリ開発の流れ

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

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

シミュレータや実機テスト一部の API は実機で確認Android Firefox でも殆ど大丈夫

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

２つの方式のアプリ

Hosted (Web 読み込み型)従来の OS ではブラウザ上で動作動作や権限は従来の Web と同じオフライン対応アプリも開発可能

Packaged (ダウンロード型)従来のスマホアプリに相当するマーケット審査を経て追加権限取得サイト全体を ZIP して配布する形式

PackagedWeb アプリ

HostedWeb アプリ

Internet

Server

端末

詳細: https://developer.mozilla.org/ja/docs/Web/Apps/Packaged_apps

アプリ情報ファイル作るだけ

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

Packaged App従来型のダウンロードアプリ相当サイト全体 ZIP + package.manifest

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

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

Package App にする

1. manifest.webapp 作成Hosted Apps の時と同じ

2. サイト全体を ZIP するmanifest.webapp も含める

3. package.manifest を作成パッケージインストール用

package.manifest (mini manifest){  "name": "フォクすけアプリ",  "package_path": "/package.zip", "version": "1.0",  "developer": {    "name": "dynamis",    "url": "http://dynamis.jp/"  }}// 注意: package.zip 内の manifest.webapp と name, version, developer, locales は同一に！

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

Simulator

Firefox OS Simulator

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

4.0 リリース: https://dev.mozilla.jp/firefox-os-simulator-4-0-released/

Firefox OS Simulator

Debug with Android Firefox

Android 版 Firefox で動作確認

1. Firefox をインストール2. インストールページ用意3. Firefox でページを開く4. アプリをインストール5. アプリを起動してテスト

Hosted App なら Android Firefox で直接アプリを開いてテストするのもアリ

Firefox OS Appson Heroku

Heroku でアプリ公開

無料で使える PaaSRuby, Java, Node, Python...git などさえ使えれば大丈夫

静的コンテンツ公開にもWeb Hosting にも使えるRuby Sinatra とかでサクッとサンプル見て試してね

¥

Heroku でアプリ公開// Hello World リポジトリを Clonegit clone git@github.com:dynamis/hello-hosted-app.gitcd hello-hosted-app

// heroku で公開heroku loginheroku apps:create <APPNAME>git push heroku master// http://<APPNAME>.herokuapp.com/ で公開！

公開できた！