Firefox OS App Dev
@ HTML5 Caravan @ JAWS FESTA 2013
on 2013/09/28
by Tomoya Asai (dynamis)
about:me
Tomoya ASAI
Mozilla Japan
Technical Marketing (Evangelist)
dynamis @ community
dynamis.jp
@dynamitter
facebook.com/dynamis...
about:topics
本日のトピック
Firefox OS
Application Development
Firefox OS Simulator
Debug with Android Firefox
Publishing Apps
ぼくおやつ
担当ねっ!
Firefox OS
ホーム画面
アプリのグリッド表示
写真ギャラリー
写真の編集画面
音楽再生アプリ
ビデオ再生アプリ
アドレス帳
メールアプリ
Firefox
Firefox Marketplace
Firefox OS - Web is the Platform
Web = アプリ環境
アプリはすべて Web 技術で
ドメイン = アプリの1:1対応
Web を進化させる
不足機能は API を定義・標準化
Web のセキュリティモデルな...
Web 技術 = Native へ
Web 技術が「ネイティブ」
HTML/CSS/JS ですべて可能に
新しい API は W3C 標準化
速度も Java に追いつく
asm.js により大幅高速化を実現
WebGL や DOMCrypt ...
Semantic
Elements
Multi
Media
HTML5
Forms
Offline
SupportHTML5HTML5
Parser
Mouse,
Key ev.
XHTML5
WAI-
ARIA
W3C
Semantic
Elements
Multi
Media
Canvas
HTML5
Forms
Offline
Support
Micro-
Data
Server-
Sent ev.
Web
Sockets
Web
Storage
HTML5H...
Semantic
Elements
Multi
Media
Canvas
HTML5
Forms
Offline
Support
Micro-
Data
Server-
Sent ev.
Web
Sockets
Web
Storage
Layout...
Semantic
Elements
Multi
Media
Canvas
HTML5
Forms
Offline
Support
Micro-
Data
WebGL
Indexed
DB
SVG
Server-
Sent ev.
Web
Socke...
Semantic
Elements
Multi
Media
Canvas
HTML5
Forms
Offline
Support
Webm
H.264
Micro-
Data
WebGL
Web
SQL
Indexed
DB
SVG
Server-...
ステータスバー (通知、
電波強度、電池残量...)も
カメラやラジオも
ビデオや音楽の再生も
マーケットプレイスも
システムの環境設定も
ホーム画面や壁紙も
電話や SMS の送受信も
もちろん ブラウザ も
その他なんでも...
ステータスバー (通知、
電波強度、電池残量...)も
カメラやラジオも
ビデオや音楽の再生も
マーケットプレイスも
システムの環境設定も
ホーム画面や壁紙も
電話や SMS の送受信も
もちろん ブラウザ も
その他なんでも...
すべて W...
Firefox OS : Tizen : Android
Native
Framework
カーネル & HAL
Web Platform
Web
Framework
App Framework
Android
Runtime
Dalvik
W...
大規模アプリは遅かった
大規模アプリの処理速度では
C 言語と大きな差があった…
小規模コードは十分に高速化できても大規模コードの最適化はまだまだ…
ネイティブに近い処理速度へ
asm.js で C の 1/2 程度まで
Java や C# の処理速度と同程度
asm.js 対応は Firefox OS では 1.2 から導入される予定
時にはネイティブより高速に
Java より全ベンチ高速
C より速いこともある
メモリ確保が重いケース?
小規模演算での比較例
Java コードを Dalvik で実行
C コードをネイティブ実行
C を JS に変換して実行
https://...
Unreal Engine on Browser
100 万行以上の C & OpenGL コードを 5 日で移植
LLVM + Emscripten で JavaScript (asm.js) に変換
epic CITADEL http://...
多数企業と共同開発・製品化
主要 18 キャリアが賛同
KDDI, Telefónica, Deutsche
Telekom、Telenor...
チップ&端末メーカー
Qualcomm, ARM
ZTE, Alcatel, LG, Huawe...
グローバル市場に拡大
Firefox OS の取り組みに賛同する企業の一部 (MWC の記者発表会より)
グローバル市場に拡大
Firefox OS の取り組みに賛同する企業の一部 (MWC の記者発表会より)
チップ&デバイスメーカー
Developer Preview Phone
4/23 発売 (品切れ中)
Keon: 91€+tax+shipping
MSM7225AB 1GHz, 4GB ROM,
512MB RAM, 3.5" HVGA
Peak: 149€+税+送...
Peak+ (Pre-order)
9∼10月発送 (完売)
11月発送 (予約受付中)
Peak: 149€+税+送料
MSM8225 1.2GHz x2, 4GB ROM,
1GB RAM, 4.3" qHD
メモリ容量増加と質感向上
14...
7月から各国で順次発売
7月2日にスペインで発売
Telefónica が ZTE Open を発売
実質 5000円 の誰でもスマホ
€69 (税込) プリペイド €30 含む
順次世界各国に展開
7月12日にポーランドで発売
8月1日にラテ...
ワルシャワやマドリッドでは…
ワルシャワやマドリッドでは…
ワルシャワやマドリッドでは…
ワルシャワやマドリッドでは…
ZTE の誰でもスマホ
ZTE Open:
Size: 114 x 62 x 12.5 mm
Display: 3.5" HVGA
CPU: MSM7225A 1 GHz
(Cortex-A5, Adreno 200)
RAM 256 MB
R...
Alcatel (TCL) の誰でもスマホ
One Touch Fire:
Size: 115 x 62.3 x 12.2 mm
Display: 3.5" HVGA
CPU: MSM7227A 1 GHz
(Cortex-A5, Adreno...
SIM フリー版も eBay で発売
ZTE Open SIM フリー版
開発者や初期採用者向け
eBay US で 79.99 ドル
eBay UK で 59.99 ポンド
特定の国向け設定はされない
オレンジは eBay 限定カラー!?
8...
Apps Dev
Firefox OS のアプリ開発
Web アプリです。
Web アプリです。
Web アプリです。
大事なこと3回
Firefox OS のアプリ開発
Web アプリです。
Web アプリです。
Web アプリです。
大事なこと3回
Firefox OS のアプリ開発
いつもの開発ツール
いつものエディタ
いつものライブラリ
いつもと一緒だ
から安心だね!
アプリ開発の流れ
普通に Web 開発
デバッグもいつも通り
manifest ファイルを用意
メタ情報を JSON 形式で記載
シミュレータや実機テスト
一部の API は実機で確認
Android Firefox でも殆ど大丈夫
https...
2つの方式のアプリ
Hosted (Web 読み込み型)
従来の OS ではブラウザ上で動作
動作や権限は従来の Web と同じ
オフライン対応アプリも開発可能
Packaged (ダウンロード型)
従来のスマホアプリに相当する
マーケット審査...
アプリ情報ファイル作るだけ
Hosted App
Web から読み込むアプリ
Web サイト + manifest.webapp
Packaged App
従来型のダウンロードアプリ相当
サイト全体 ZIP + package.manifest
アプリ情報 (manifest.webapp)
{
  "name":	 "フォクすけアプリ",
  "description":	 "あのフォクすけが遂にアプリに!",
  "launch_path":	 "/index.html",
  "...
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",
  "dev...
Simulator
Firefox OS Simulator
再起動不要の拡張機能
https://addons.mozilla.org/ja/
firefox/addon/firefox-os-simulator/
ポチッと押すだけ
Web 開発メニューに追加される...
Firefox OS Simulator
Debug with
Android Firefox
Android 版 Firefox で動作確認
1. Firefox をインストール
2. インストールページ用意
3. Firefox でページを開く
4. アプリをインストール
5. アプリを起動してテスト
Hosted App なら An...
Firefox OS Apps
on Heroku
Heroku でアプリ公開
無料で使える PaaS
Ruby, Java, Node, Python...
git などさえ使えれば大丈夫
静的コンテンツ公開にも
Web Hosting にも使える
Ruby Sinatra とかでサクッと
サ...
Heroku でアプリ公開
//	 Hello	 World	 リポジトリを	 Clone
git	 clone	 git@github.com:dynamis/hello-hosted-
app.git
cd	 hello-hosted-ap...
公開できた!
Firefox OS App Dev
Firefox OS App Dev
Upcoming SlideShare
Loading in …5
×

Firefox OS App Dev

2,141 views

Published on

HTML5 Caravan @ JAWS FESTA 2013 で使用したスライド
http://jfk2013.doorkeeper.jp/events/5022

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,141
On SlideShare
0
From Embeds
0
Number of Embeds
56
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Firefox OS App Dev

  1. 1. Firefox OS App Dev @ HTML5 Caravan @ JAWS FESTA 2013 on 2013/09/28 by Tomoya Asai (dynamis)
  2. 2. about:me
  3. 3. Tomoya ASAI Mozilla Japan Technical Marketing (Evangelist) dynamis @ community dynamis.jp @dynamitter facebook.com/dynamis mailto: Tomoya ASAI <dynamis mozilla-japan.org>@
  4. 4. about:topics
  5. 5. 本日のトピック Firefox OS Application Development Firefox OS Simulator Debug with Android Firefox Publishing Apps ぼくおやつ 担当ねっ!
  6. 6. Firefox OS
  7. 7. ホーム画面 アプリのグリッド表示
  8. 8. 写真ギャラリー 写真の編集画面
  9. 9. 音楽再生アプリ ビデオ再生アプリ
  10. 10. アドレス帳 メールアプリ
  11. 11. Firefox Firefox Marketplace
  12. 12. Firefox OS - Web is the Platform Web = アプリ環境 アプリはすべて Web 技術で ドメイン = アプリの1:1対応 Web を進化させる 不足機能は API を定義・標準化 Web のセキュリティモデルなど も実装・標準化していく
  13. 13. Web 技術 = Native へ Web 技術が「ネイティブ」 HTML/CSS/JS ですべて可能に 新しい API は W3C 標準化 速度も Java に追いつく asm.js により大幅高速化を実現 WebGL や DOMCrypt なども活用 Web 技術だけですべてが済むプラットフォームとなるよう発展中
  14. 14. Semantic Elements Multi Media HTML5 Forms Offline SupportHTML5HTML5 Parser Mouse, Key ev. XHTML5 WAI- ARIA W3C
  15. 15. Semantic Elements Multi Media Canvas HTML5 Forms Offline Support Micro- Data Server- Sent ev. Web Sockets Web Storage HTML5HTML5 Parser Mouse, Key ev. XHTML5 Web Workers Web Messag- ing WAI- ARIA W3C WHATWG HTML
  16. 16. Semantic Elements Multi Media Canvas HTML5 Forms Offline Support Micro- Data Server- Sent ev. Web Sockets Web Storage Layout Media Queries HTML5 CSS3~Trans form Anim ation Regions Filters HTML5 Parser Mouse, Key ev. XHTML5 Web Workers Web Messag- ing WAI- ARIA W3C WHATWG HTML
  17. 17. Semantic Elements Multi Media Canvas HTML5 Forms Offline Support Micro- Data WebGL Indexed DB SVG Server- Sent ev. Web Sockets Web Sockets Geo- location FileAPI Web Storage XHR2 Math ML Layout Media Queries HTML5 CSS3~Trans form Anim ation Regions Filters HTML5 Parser Mouse, Key ev. ECMA Script CSP SPDY XHTML5 Orien- tation Web Workers Web Messag- ing DOM4 SMIL Vibra- tion XPath RSS OGP WAI- ARIA W3C WHATWG other Khronos ECMA IETF WOFF HTML DNT
  18. 18. Semantic Elements Multi Media Canvas HTML5 Forms Offline Support Webm H.264 Micro- Data WebGL Web SQL Indexed DB SVG Server- Sent ev. Web Sockets Web Sockets Geo- location FileAPI Web Storage XHR2 Math ML Web Audio Layout Media Queries HTML5 CSS3~Trans form Anim ation Regions Filters HTML5 Parser Mouse, Key ev. Opus ECMA Script ECMA 6th USB CSP SPDY WebCL Web RTC Net Info MP3 Device Storage TCP Socket NFC File Sys Notifi- cation XHTML5 Orien- tation Web Workers Web Messag- ing DOM4 SMIL Vibra- tion Proxi- mity XPath RSS RDF OGP Schema .org WAI- ARIA W3C WHATWG other Khronos ECMA IETF WOFF Battery Status Radio Tel HTML DNT Flex Box
  19. 19. ステータスバー (通知、 電波強度、電池残量...)も カメラやラジオも ビデオや音楽の再生も マーケットプレイスも システムの環境設定も ホーム画面や壁紙も 電話や SMS の送受信も もちろん ブラウザ も その他なんでも...
  20. 20. ステータスバー (通知、 電波強度、電池残量...)も カメラやラジオも ビデオや音楽の再生も マーケットプレイスも システムの環境設定も ホーム画面や壁紙も 電話や SMS の送受信も もちろん ブラウザ も その他なんでも... すべて Web 技術で!
  21. 21. Firefox OS : Tizen : Android Native Framework カーネル & HAL Web Platform Web Framework App Framework Android Runtime Dalvik WebKit Java アプリ ブラウザ アプリ Native Library Web アプリ WebKit Web アプリ Native アプリ OSP etc... DeviceAPI WebRT Web アプリ Packaged Webアプリ コアサービスGecko DeviceAPI SystemAPI Web に最適化 シンプル&スマート ライブラリ SGL etc. Native Interface カーネル & HAL カーネル & HAL X.org etc. 左上のアプリが Web 読み込み型、右上のアプリがダウンロード型
  22. 22. 大規模アプリは遅かった 大規模アプリの処理速度では C 言語と大きな差があった… 小規模コードは十分に高速化できても大規模コードの最適化はまだまだ…
  23. 23. ネイティブに近い処理速度へ asm.js で C の 1/2 程度まで Java や C# の処理速度と同程度 asm.js 対応は Firefox OS では 1.2 から導入される予定
  24. 24. 時にはネイティブより高速に Java より全ベンチ高速 C より速いこともある メモリ確保が重いケース? 小規模演算での比較例 Java コードを Dalvik で実行 C コードをネイティブ実行 C を JS に変換して実行 https://blog.mozilla.org/javascript/staring-at-the-sun-dalvik-vs-spidermonkey/
  25. 25. Unreal Engine on Browser 100 万行以上の C & OpenGL コードを 5 日で移植 LLVM + Emscripten で JavaScript (asm.js) に変換 epic CITADEL http://www.unrealengine.com/html5/
  26. 26. 多数企業と共同開発・製品化 主要 18 キャリアが賛同 KDDI, Telefónica, Deutsche Telekom、Telenor... チップ&端末メーカー Qualcomm, ARM ZTE, Alcatel, LG, Huawei, Sony Foxconn... もちろん発表している企業がすべてではない
  27. 27. グローバル市場に拡大 Firefox OS の取り組みに賛同する企業の一部 (MWC の記者発表会より)
  28. 28. グローバル市場に拡大 Firefox OS の取り組みに賛同する企業の一部 (MWC の記者発表会より)
  29. 29. チップ&デバイスメーカー
  30. 30. Developer Preview Phone 4/23 発売 (品切れ中) Keon: 91€+tax+shipping MSM7225AB 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/
  31. 31. 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
  32. 32. 7月から各国で順次発売 7月2日にスペインで発売 Telefónica が ZTE Open を発売 実質 5000円 の誰でもスマホ €69 (税込) プリペイド €30 含む 順次世界各国に展開 7月12日にポーランドで発売 8月1日にラテンアメリカで発売 日本や北米では 2013~2014 年中の見込み http://mozilla.jp/blog/entry/10310/
  33. 33. ワルシャワやマドリッドでは…
  34. 34. ワルシャワやマドリッドでは…
  35. 35. ワルシャワやマドリッドでは…
  36. 36. ワルシャワやマドリッドでは…
  37. 37. ZTE の誰でもスマホ ZTE Open: Size: 114 x 62 x 12.5 mm Display: 3.5" HVGA CPU: MSM7225A 1 GHz (Cortex-A5, Adreno 200) RAM 256 MB ROM: 512 MB スペインなどで発売 http://www.ztedevices.com/product/smart_phone/2bcf2d56-0c9a-4129-a25c-acce58c8e502.html
  38. 38. Alcatel (TCL) の誰でもスマホ One Touch Fire: Size: 115 x 62.3 x 12.2 mm Display: 3.5" HVGA CPU: MSM7227A 1 GHz (Cortex-A5, Adreno 200) RAM 256 MB ROM: 512 MB ポーランドなどで発売 http://www.alcatelonetouch.com/global-en/products/smartphones/one_touch_fire.html
  39. 39. 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/
  40. 40. Apps Dev
  41. 41. Firefox OS のアプリ開発 Web アプリです。 Web アプリです。 Web アプリです。 大事なこと3回
  42. 42. Firefox OS のアプリ開発 Web アプリです。 Web アプリです。 Web アプリです。 大事なこと3回
  43. 43. Firefox OS のアプリ開発 いつもの開発ツール いつものエディタ いつものライブラリ いつもと一緒だ から安心だね!
  44. 44. アプリ開発の流れ 普通に Web 開発 デバッグもいつも通り manifest ファイルを用意 メタ情報を JSON 形式で記載 シミュレータや実機テスト 一部の API は実機で確認 Android Firefox でも殆ど大丈夫 https://github.com/dynamis/firefoxos/wiki/simulator
  45. 45. 2つの方式のアプリ Hosted (Web 読み込み型) 従来の OS ではブラウザ上で動作 動作や権限は従来の Web と同じ オフライン対応アプリも開発可能 Packaged (ダウンロード型) 従来のスマホアプリに相当する マーケット審査を経て追加権限取得 サイト全体を ZIP して配布する形式 Packaged Web アプリ Hosted Web アプリ Internet Server 端末 詳細: https://developer.mozilla.org/ja/docs/Web/Apps/Packaged_apps
  46. 46. アプリ情報ファイル作るだけ Hosted App Web から読み込むアプリ Web サイト + manifest.webapp Packaged App 従来型のダウンロードアプリ相当 サイト全体 ZIP + package.manifest
  47. 47. アプリ情報 (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
  48. 48. Package App にする 1. manifest.webapp 作成 Hosted Apps の時と同じ 2. サイト全体を ZIP する manifest.webapp も含める 3. package.manifest を作成 パッケージインストール用
  49. 49. 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
  50. 50. Simulator
  51. 51. 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/
  52. 52. Firefox OS Simulator
  53. 53. Debug with Android Firefox
  54. 54. Android 版 Firefox で動作確認 1. Firefox をインストール 2. インストールページ用意 3. Firefox でページを開く 4. アプリをインストール 5. アプリを起動してテスト Hosted App なら Android Firefox で直接アプリを開いてテストするのもアリ
  55. 55. Firefox OS Apps on Heroku
  56. 56. Heroku でアプリ公開 無料で使える PaaS Ruby, Java, Node, Python... git などさえ使えれば大丈夫 静的コンテンツ公開にも Web Hosting にも使える Ruby Sinatra とかでサクッと サンプル見て試してね ¥
  57. 57. Heroku でアプリ公開 // Hello World リポジトリを Clone git clone git@github.com:dynamis/hello-hosted- app.git cd hello-hosted-app // heroku で公開 heroku login heroku apps:create <APPNAME> git push heroku master // http://<APPNAME>.herokuapp.com/ で公開!
  58. 58. 公開できた!

×