dotFes 2013 Kyoto で使用したスライド http://www.dotfes.jp/2013kyoto/

1. Web App Platform "Firefox"
@dotFes 2013 Kyoto
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:mozilla

5. Mozilla = Security & Privacy 1st.
セキュリティ最優先
「インターネットにおける個人の
セキュリティは必須のもの」と
Mozilla 宣言で明記
プライバシーに関して最も信
頼できるインターネット企業
"2012 Most Trusted Copanies for
Privacy" by Ponemon Institute
http://mozilla.org/about/manifesto.ja.html & http://mozilla.jp/blog/entry/10261/

7. Background

8. 既存のプラットフォーム
OS 毎にアプリ開発
言語や API は OS に依存
iOS/Windows は UI 規則も強い
Web はサブセット扱い
アプリ環境としては不完全
追加 API の標準化もされない

9. 分断されたエコシステム
i
a
f
c
プラットフォーム毎に異なる言語で個別の専用アプリを作る必要がある

10. Web Platform への期待
次世代プラットフォーム
Web 技術ですべて可能に
マルチデバイス対応
開発言語や API の共通化
ベンダー非依存の標準
自由で持続性のある API

11. Web が共通プラットフォーム
プラットフォーム
としての Web
Web がプラットフォームなら標準技術でアプリ環境が統一される

12. 開発者の多いプラットフォーム
800
10
45
調査にも依るけど HTML5 開発者の方が圧倒的に多い

13. Web Platform の課題
機能的な制約
デバイスやシステム系の API 不足
パフォーマンス
Java などに比べても数倍遅い
アプリ配信と課金
Market や Payment の標準なし

14. デバイス操作ができなかった
カメラ
マイク
スピーカー
振動モーター
マルチタッチ
USB 接続
加速度計
Bluetooth
ボタン＆キー
光センサー
ジャイロ
近接センサー

15. 大規模アプリは遅かった
大規模アプリの処理速度では C 言語が圧倒的に速い
(小規模アプリや一部ベンチだけは以前から高速)
2013/03 - http://kripken.github.io/mloc_emscripten_talk/#/19

17. Firefox OS

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

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

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

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

22. Firefox Marketplace
Firefox

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

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

25. Khronos
WebC
L
other
WebG
L
WHATWG
HTML5
Parser
Web
Messaging
Mouse,
Key ev.
W3C
HTML5
XHTML5
Geolocation
SVG
Canva
s
Multi
Media
HTML5
Forms
SMIL
Offline
Support
MicroData
OGP
RSS
RDF
Math
ML
DOM4
Opus
H.264
Web
Sockets
Web
Audio
Web
RTC
IETF
SPDY
XHR2
CSP
ECMA
Indexed
DB
Layou
t
CSS3~
Trans
form
XPath
Anim
ation
WOFF
Flex
Box
Region
s
Filters
Net
Info
Tel
Radio
NFC
ECMA
6th
Web
SQL
Media
Queries
Notification
TCP
Socket
DNT
FileAP
I
ECMA
Script
Web
Storage
Web
Workers
HTML
Schema
.org
Orientation
Web
Sockets
MP3
Webm
ServerSent ev.
WAIARIA
Semantic
Elements
Vibration
Device
Storage
File
Sys
Proximity
USB
Battery
Status

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

27. Firefox OS : Tizen : Android
Web に最適化
シンプル＆スマート
Web
アプリ
Packaged
Webアプリ
Web Platform
DeviceAPI
SystemAPI
Web
アプリ
Web
アプリ
Native
アプリ
Web
Native
Framework Framework
DeviceAPI
OS
ブラウザ
アプリ
Java
アプリ
Native
Library
App Framework
Dalvik
WebRT
etc..
Android
Runtime
WebKit
X.org etc.
WebKit
Native
Interface
SGL etc.
Gecko
コアサービス
ライブラリ
カーネル & HAL
カーネル & HAL
カーネル & HAL
左上のアプリが Web 読み込み型、右上のアプリがダウンロード型

28. C 言語に迫る高速化 (asm.js)
asm.js 導入時点で JavaScript は C の 2 倍遅い程度
(Java や C# の処理速度と同程度以上の水準に)
2013/03 - http://kripken.github.io/mloc_emscripten_talk/#/19

29. C 言語に迫る高速化 (asm.js)
Firefox の JavaScript (asm.js 形式) コード実行速度は
C 言語より数割遅い程度まで迫ってきている
2013/09 - http://kripken.github.io/mloc_emscripten_talk/sloop.html#/7

30. 実レベル: Box2D 物理演算エンジン
Box2D では C 言語の 2 倍遅い程度の速度
!
Chrome や IE でも通常の JS より asm.js が高速
Java や CrossBridge (Flash C++ Compiler) と同等以上
2013/07 - http://kripken.github.io/mloc_emscripten_talk/sloop.html#/8

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

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

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

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

36. ７月、8月に最初の販売開始
7月2日にスペインで発売
Telefónica が ZTE Open を発売
€69 (税込) プリペイド €30 含む
順次世界各国に展開
7月12日にポーランドで発売
8月1日にコロンビア、ベネズエラ
まずは今後の成長が見込まれる新興国市場を中心に展開 (キャリアの戦略)

37. ZTE Open & Alcatel One Touch Fire

38. !
ZTE Open
主な仕様:
Size: 114 x 62 x 12.5 mm
Display: 3.5 inch 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-

39. !
Alcatel One Touch Fire
主な仕様:
Size: 115 x 62.3 x 12.2 mm
Display: 3.5 inch 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

40. Firefox OS 端末販売は順調？
Telefónica の販売実績
2013/10 (発売後 3 ヶ月) 時点
ベネズエラ
スマートフォン販売の 12% 以上
コロンビア
スマートフォン販売の 9% 程度
http://news.cnet.com/8301-1035_3-57608120-94/telefonicas-yotam-ben-ami-fights-for-firefox-

41. 10月から更に多くの市場へ展開
Firefox OS 1.1 端末のリリース
Telefónica
10/22: ブラジル
10/31: メキシコ、ペルー、ウルグアイ
Deutsche Telekom
ドイツ、ギリシャ、ハンガリー
Telenor
ハンガリー、セルビア、モンテネグロ
日本や北米では 2013~2014 年中の見込み http://mozilla.jp/blog/entry/10310/

42. LG Fireweb (D300)
主な仕様:
Size: 113.8 x 66.5 x 9 mm
Display: 4 inch HVGA
CPU: 1 GHz (型番未確認)
ブラジルなどで発売
http://www.vivo.com.br/firefoxos/

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

44. Apps Dev

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

46. Firefox OS のアプリ開発
いつもの開発ツール
いつものエディタ
いつものライブラリ

47. アプリ開発の流れ
普通に Web 開発
アプリマネージャ or Firebug etc.
manifest ファイルを用意
メタ情報を JSON 形式で記載
シミュレータや実機テスト
Android Firefox でもテスト
https://github.com/dynamis/firefoxos/wiki/simulator

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

49. アプリ情報ファイル書くだけ
サイト + manifest.webapp
1. manifest.webapp 作成
アプリ情報書くだけで終了

50. !
アプリ情報 (manifest.webapp)
https://developer.mozilla.org/en-US/docs/Apps/Manifest

51. ZIP して Packaged App に
ZIP + package.manifest
1. manifest.webapp 作成
Hosted Apps の時と同じ
2. サイト全体を ZIP する
manifest.webapp も含める
3. package.manifest を作成
mini manifest が別途必要

52. !
mini manifest (package.manifest)
https://developer.mozilla.org/en-US/docs/Web/Apps/Packaged_apps

53. App Manager

54. アプリマネージャ
アプリ開発・管理環境
Firefox 標準搭載の開発環境
Firefox Nightly などに搭載済み
シュミレータ・実機両対応
Firefox OS 1.2 以降の実機またはシュ
ミレータと接続して開発
10 月時点で Firefox OS 1.2, 1.3 の
シュミレータが公開中
リリース版やベータ版には未搭載ですので Nightly で開発してください

55. アプリマネージャ
Web アプリ開発統合環境が Firefox 26 から標準搭載
アプリのインストールやリモートデバッグも

56. Firefox OS 1.2 Simulator
デフォルトホームにアプリ検索フォームが移動

57. Firefox OS 1.3 Simulator
カテゴリ別アプリフォルダ復活

58. 独自アプリのインストール
Apps パネル左下の Add ∼ App から追加
新規アプリ開発はここからしましょう

59. 独自アプリのテストとデバッグ
UPDATE ボタンで端末のアプリを更新
DEBUG ボタンでリモートデバッグ開始

60. Developer
Phones

61. 開発者向け端末
開発者向けロック解除端末
Geeksphone
Keon
Peak/Peak+
ZTE (eBay US/UK/HK)
ZTE Open

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

63. Peak+ (Pre-order)
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

64. !
ZTE Open (eBay)
ZTE Open の SIM フリー版
開発者や初期採用者向け
eBay US / HK で 79.99 ドル
eBay UK で 59.99 ポンド
オレンジは eBay 限定カラー！
日本へは eBay HK が発送
http://www.ebay.com/itm/331031989534
https://blog.mozilla.org/blog/zte-will-soon-start-sales-of-firefox-os-phones-on-ebay/

65. インスタレーションルーム L202
入ってすぐ左で展示してます

66. Appmaker

70. Building Blocks

71. Building Blocks (UI 部品)
Gaia (Firefox OS 標準) Apps
のデザインを簡単に作れる
http://buildingfirefoxos.com/
使っても使わなくても OK
好きな SDK/Library 使える
自由な Web ですから！
http://buildingfirefoxos.com/

74. For More Info

75. Firefox OS コミュニティ！
http://FxOS.org/
イベントやドキュメントをご案内
http://FxOS.org/ml
(https://groups.google.com/group/
firefoxos にリダイレクト)
!