Firefox OS App Dev
-
Upload
dynamis- -
Category
Technology
-
view
1.393 -
download
3
description
Transcript of Firefox OS App Dev
![Page 1: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/1.jpg)
Firefox OS App Dev@ HTML5 Caravan @ JAWS FESTA 2013
on 2013/09/28by Tomoya Asai (dynamis)
![Page 2: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/2.jpg)
about:me
![Page 3: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/3.jpg)
Tomoya ASAI
Mozilla JapanTechnical Marketing (Evangelist)
dynamis @ communitydynamis.jp
@dynamitter
facebook.com/dynamis
mailto: Tomoya ASAI <dynamis mozilla-japan.org>@
![Page 4: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/4.jpg)
about:topics
![Page 5: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/5.jpg)
本日のトピック
Firefox OSApplication DevelopmentFirefox OS SimulatorDebug with Android FirefoxPublishing Apps
ぼくおやつ担当ねっ!
![Page 6: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/6.jpg)
Firefox OS
![Page 7: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/7.jpg)
ホーム画面
アプリのグリッド表示
![Page 8: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/8.jpg)
写真ギャラリー
写真の編集画面
![Page 9: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/9.jpg)
音楽再生アプリ
ビデオ再生アプリ
![Page 10: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/10.jpg)
アドレス帳
メールアプリ
![Page 11: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/11.jpg)
Firefox
Firefox Marketplace
![Page 12: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/12.jpg)
Firefox OS - Web is the Platform
Web = アプリ環境アプリはすべて Web 技術でドメイン = アプリの1:1対応Web を進化させる不足機能は API を定義・標準化Web のセキュリティモデルなども実装・標準化していく
![Page 13: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/13.jpg)
Web 技術 = Native へ
Web 技術が「ネイティブ」HTML/CSS/JS ですべて可能に新しい API は W3C 標準化
速度も Java に追いつくasm.js により大幅高速化を実現WebGL や DOMCrypt なども活用
Web 技術だけですべてが済むプラットフォームとなるよう発展中
![Page 14: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/14.jpg)
![Page 15: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/15.jpg)
SemanticElements
MultiMedia
HTML5Forms
OfflineSupportHTML5HTML5
Parser
Mouse,Key ev.
XHTML5WAI-ARIA
W3C
![Page 16: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/16.jpg)
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
![Page 17: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/17.jpg)
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
![Page 18: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/18.jpg)
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
![Page 19: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/19.jpg)
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
![Page 20: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/20.jpg)
![Page 21: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/21.jpg)
ステータスバー (通知、電波強度、電池残量...)もカメラやラジオもビデオや音楽の再生もマーケットプレイスもシステムの環境設定もホーム画面や壁紙も電話や SMS の送受信ももちろん ブラウザ も
その他なんでも...
![Page 22: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/22.jpg)
ステータスバー (通知、電波強度、電池残量...)もカメラやラジオもビデオや音楽の再生もマーケットプレイスもシステムの環境設定もホーム画面や壁紙も電話や SMS の送受信ももちろん ブラウザ も
その他なんでも...
すべて Web 技術で!
![Page 23: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/23.jpg)
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 読み込み型、右上のアプリがダウンロード型
![Page 24: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/24.jpg)
大規模アプリは遅かった
大規模アプリの処理速度ではC 言語と大きな差があった…
小規模コードは十分に高速化できても大規模コードの最適化はまだまだ…
![Page 25: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/25.jpg)
ネイティブに近い処理速度へ
asm.js で C の 1/2 程度までJava や C# の処理速度と同程度
asm.js 対応は Firefox OS では 1.2 から導入される予定
![Page 26: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/26.jpg)
時にはネイティブより高速に
Java より全ベンチ高速C より速いこともあるメモリ確保が重いケース?
小規模演算での比較例Java コードを Dalvik で実行C コードをネイティブ実行C を JS に変換して実行
https://blog.mozilla.org/javascript/staring-at-the-sun-dalvik-vs-spidermonkey/
![Page 27: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/27.jpg)
Unreal Engine on Browser
100 万行以上の C & OpenGL コードを 5 日で移植LLVM + Emscripten で JavaScript (asm.js) に変換
epic CITADEL http://www.unrealengine.com/html5/
![Page 28: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/28.jpg)
多数企業と共同開発・製品化
主要 18 キャリアが賛同KDDI, Telefónica, Deutsche Telekom、Telenor...
チップ&端末メーカーQualcomm, ARMZTE, Alcatel, LG, Huawei, SonyFoxconn...
もちろん発表している企業がすべてではない
![Page 29: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/29.jpg)
グローバル市場に拡大
Firefox OS の取り組みに賛同する企業の一部 (MWC の記者発表会より)
![Page 30: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/30.jpg)
グローバル市場に拡大
Firefox OS の取り組みに賛同する企業の一部 (MWC の記者発表会より)
![Page 31: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/31.jpg)
チップ&デバイスメーカー
![Page 32: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/32.jpg)
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/
![Page 33: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/33.jpg)
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
![Page 34: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/34.jpg)
7月から各国で順次発売
7月2日にスペインで発売Telefónica が ZTE Open を発売実質 5000円 の誰でもスマホ€69 (税込) プリペイド €30 含む
順次世界各国に展開7月12日にポーランドで発売8月1日にラテンアメリカで発売
日本や北米では 2013~2014 年中の見込み http://mozilla.jp/blog/entry/10310/
![Page 35: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/35.jpg)
ワルシャワやマドリッドでは…
![Page 36: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/36.jpg)
ワルシャワやマドリッドでは…
![Page 37: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/37.jpg)
ワルシャワやマドリッドでは…
![Page 38: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/38.jpg)
ワルシャワやマドリッドでは…
![Page 39: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/39.jpg)
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
![Page 40: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/40.jpg)
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
![Page 41: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/41.jpg)
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/
![Page 42: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/42.jpg)
Apps Dev
![Page 43: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/43.jpg)
Firefox OS のアプリ開発
Web アプリです。Web アプリです。Web アプリです。
大事なこと3回
![Page 44: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/44.jpg)
Firefox OS のアプリ開発
Web アプリです。Web アプリです。Web アプリです。
大事なこと3回
![Page 45: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/45.jpg)
Firefox OS のアプリ開発
いつもの開発ツールいつものエディタいつものライブラリ
いつもと一緒だから安心だね!
![Page 46: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/46.jpg)
アプリ開発の流れ
普通に Web 開発デバッグもいつも通り
manifest ファイルを用意メタ情報を JSON 形式で記載
シミュレータや実機テスト一部の API は実機で確認Android Firefox でも殆ど大丈夫
https://github.com/dynamis/firefoxos/wiki/simulator
![Page 47: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/47.jpg)
2つの方式のアプリ
Hosted (Web 読み込み型)従来の OS ではブラウザ上で動作動作や権限は従来の Web と同じオフライン対応アプリも開発可能
Packaged (ダウンロード型)従来のスマホアプリに相当するマーケット審査を経て追加権限取得サイト全体を ZIP して配布する形式
PackagedWeb アプリ
HostedWeb アプリ
Internet
Server
端末
詳細: https://developer.mozilla.org/ja/docs/Web/Apps/Packaged_apps
![Page 48: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/48.jpg)
アプリ情報ファイル作るだけ
Hosted AppWeb から読み込むアプリWeb サイト + manifest.webapp
Packaged App従来型のダウンロードアプリ相当サイト全体 ZIP + package.manifest
![Page 49: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/49.jpg)
アプリ情報 (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
![Page 50: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/50.jpg)
Package App にする
1. manifest.webapp 作成Hosted Apps の時と同じ
2. サイト全体を ZIP するmanifest.webapp も含める
3. package.manifest を作成パッケージインストール用
![Page 51: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/51.jpg)
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
![Page 52: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/52.jpg)
Simulator
![Page 53: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/53.jpg)
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/
![Page 54: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/54.jpg)
Firefox OS Simulator
![Page 55: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/55.jpg)
Debug with Android Firefox
![Page 56: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/56.jpg)
Android 版 Firefox で動作確認
1. Firefox をインストール2. インストールページ用意3. Firefox でページを開く4. アプリをインストール5. アプリを起動してテスト
Hosted App なら Android Firefox で直接アプリを開いてテストするのもアリ
![Page 57: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/57.jpg)
Firefox OS Appson Heroku
![Page 58: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/58.jpg)
Heroku でアプリ公開
無料で使える PaaSRuby, Java, Node, Python...git などさえ使えれば大丈夫
静的コンテンツ公開にもWeb Hosting にも使えるRuby Sinatra とかでサクッとサンプル見て試してね
¥
![Page 59: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/59.jpg)
Heroku でアプリ公開// Hello World リポジトリを Clonegit clone [email protected]:dynamis/hello-hosted-app.gitcd hello-hosted-app
// heroku で公開heroku loginheroku apps:create <APPNAME>git push heroku master// http://<APPNAME>.herokuapp.com/ で公開!
![Page 60: Firefox OS App Dev](https://reader038.fdocuments.net/reader038/viewer/2022103014/54b7ab0d4a795913288b463c/html5/thumbnails/60.jpg)
公開できた!