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

1. Firefox OS App Dev
@ HTML5 Caravan @ JAWS FESTA 2013
on 2013/09/28
by Tomoya Asai (dynamis)

2. about:me

3. Tomoya ASAI
Mozilla Japan
Technical Marketing (Evangelist)
dynamis @ community
dynamis.jp
@dynamitter
facebook.com/dynamis
mailto: Tomoya ASAI <dynamis mozilla-japan.org>@

4. about:topics

5. 本日のトピック
Firefox OS
Application Development
Firefox OS Simulator
Debug with Android Firefox
Publishing Apps
ぼくおやつ
担当ねっ！

6. Firefox OS

7. ホーム画面
アプリのグリッド表示

8. 写真ギャラリー
写真の編集画面

9. 音楽再生アプリ
ビデオ再生アプリ

10. アドレス帳
メールアプリ

11. Firefox
Firefox Marketplace

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

13. Web 技術 = Native へ
Web 技術が「ネイティブ」
HTML/CSS/JS ですべて可能に
新しい API は W3C 標準化
速度も Java に追いつく
asm.js により大幅高速化を実現
WebGL や DOMCrypt なども活用
Web 技術だけですべてが済むプラットフォームとなるよう発展中

15. Semantic
Elements
Multi
Media
HTML5
Forms
Offline
SupportHTML5HTML5
Parser
Mouse,
Key ev.
XHTML5
WAI-
ARIA
W3C

16. 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

17. 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

18. 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

19. 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

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

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

23. 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 読み込み型、右上のアプリがダウンロード型

24. 大規模アプリは遅かった
大規模アプリの処理速度では
C 言語と大きな差があった…
小規模コードは十分に高速化できても大規模コードの最適化はまだまだ…

25. ネイティブに近い処理速度へ
asm.js で C の 1/2 程度まで
Java や C# の処理速度と同程度
asm.js 対応は Firefox OS では 1.2 から導入される予定

26. 時にはネイティブより高速に
Java より全ベンチ高速
C より速いこともある
メモリ確保が重いケース？
小規模演算での比較例
Java コードを Dalvik で実行
C コードをネイティブ実行
C を JS に変換して実行
https://blog.mozilla.org/javascript/staring-at-the-sun-dalvik-vs-spidermonkey/

27. Unreal Engine on Browser
100 万行以上の C & OpenGL コードを 5 日で移植
LLVM + Emscripten で JavaScript (asm.js) に変換
epic CITADEL http://www.unrealengine.com/html5/

28. 多数企業と共同開発・製品化
主要 18 キャリアが賛同
KDDI, Telefónica, Deutsche
Telekom、Telenor...
チップ＆端末メーカー
Qualcomm, ARM
ZTE, Alcatel, LG, Huawei, Sony
Foxconn...
もちろん発表している企業がすべてではない

29. グローバル市場に拡大
Firefox OS の取り組みに賛同する企業の一部 (MWC の記者発表会より)

30. グローバル市場に拡大
Firefox OS の取り組みに賛同する企業の一部 (MWC の記者発表会より)

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

32. 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/

33. 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

34. ７月から各国で順次発売
7月2日にスペインで発売
Telefónica が ZTE Open を発売
実質 5000円 の誰でもスマホ
€69 (税込) プリペイド €30 含む
順次世界各国に展開
7月12日にポーランドで発売
8月1日にラテンアメリカで発売
日本や北米では 2013~2014 年中の見込み http://mozilla.jp/blog/entry/10310/

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

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

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

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

39. 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

40. 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

41. 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/

42. Apps Dev

43. Firefox OS のアプリ開発
Web アプリです。
Web アプリです。
Web アプリです。
大事なこと３回

44. Firefox OS のアプリ開発
Web アプリです。
Web アプリです。
Web アプリです。
大事なこと３回

45. Firefox OS のアプリ開発
いつもの開発ツール
いつものエディタ
いつものライブラリ
いつもと一緒だ
から安心だね！

46. アプリ開発の流れ
普通に Web 開発
デバッグもいつも通り
manifest ファイルを用意
メタ情報を JSON 形式で記載
シミュレータや実機テスト
一部の API は実機で確認
Android Firefox でも殆ど大丈夫
https://github.com/dynamis/firefoxos/wiki/simulator

47. ２つの方式のアプリ
Hosted (Web 読み込み型)
従来の OS ではブラウザ上で動作
動作や権限は従来の Web と同じ
オフライン対応アプリも開発可能
Packaged (ダウンロード型)
従来のスマホアプリに相当する
マーケット審査を経て追加権限取得
サイト全体を ZIP して配布する形式
Packaged
Web アプリ
Hosted
Web アプリ
Internet
Server
端末
詳細: https://developer.mozilla.org/ja/docs/Web/Apps/Packaged_apps

48. アプリ情報ファイル作るだけ
Hosted App
Web から読み込むアプリ
Web サイト + manifest.webapp
Packaged App
従来型のダウンロードアプリ相当
サイト全体 ZIP + package.manifest

49. アプリ情報 (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

50. Package App にする
1. manifest.webapp 作成
Hosted Apps の時と同じ
2. サイト全体を ZIP する
manifest.webapp も含める
3. package.manifest を作成
パッケージインストール用

51. 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

52. Simulator

53. 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/

54. Firefox OS Simulator

55. Debug with
Android Firefox

56. Android 版 Firefox で動作確認
1. Firefox をインストール
2. インストールページ用意
3. Firefox でページを開く
4. アプリをインストール
5. アプリを起動してテスト
Hosted App なら Android Firefox で直接アプリを開いてテストするのもアリ

57. Firefox OS Apps
on Heroku

58. Heroku でアプリ公開
無料で使える PaaS
Ruby, Java, Node, Python...
git などさえ使えれば大丈夫
静的コンテンツ公開にも
Web Hosting にも使える
Ruby Sinatra とかでサクッと
サンプル見て試してね
¥

59. 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/ で公開！

60. 公開できた！