KDDI ∞ Labo open MEETing Vol.17 で使用したスライド (に少しページを追加したもの) https://tixee.tv/event/detail/eventId/1158

1. Web is the OS
KDDI∞Labo open MEETing Vol.17
by Tomoya ASAI (dynamis)
Last Update: 2013/02/22

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>@

7. Topics

8. Topics
Background
Web Platform
Firefox OS
WebFWD / Firefox Flicks

9. Background

10. 現在のアプリエコシステム
アプリマーケットで配信
iOS <=> App Store
Android <=> Google Play
Windows <=> Windows Store
販売、アプリ内課金、広告
課金の手数料は 30% が標準
その他アフィリエイトなど

11. 既存の独自プラットフォーム
プラットフォーム毎に異なる言語で個別の専用アプリを作る必要がある
i a f c

12. 既存エコシステムの課題
OS 毎のアプリ開発が必要
言語や API は OS に依存
iOS/Windows は UI 制限も強い
WebView はサブセット
WebView << Native
追加 API も標準化されない
継続性、互換性、実装依存…

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

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

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

17. "HTML5" を使うアプリ開発者

18. Web Platform の課題
機能的な制約
デバイスやシステム系 API 不足
パフォーマンス
Java などに比べても数倍遅い
アプリ配信と課金
Market や Payment の標準がない
マイクロベンチなら JS ~= Java に追いついたが実アプリレベルでは JS 遅い

20. Web Platform

22. Web 技術 = Native へ
Web 技術が「ネイティブ」
HTML/CSS/JS ですべて可能に
新しい API は W3C 標準化
速度も Java に追いつく
単純な演算程度なら既に同程度
WebGL や DOMCrypt なども活用
asm.js で大規模アプリも高速化
Web 技術だけですべてが済むプラットフォームとなるよう発展中

23. Web で可能になってること
マルチメディア
Audio, Video, Animation, 3D ...
アプリケーション
Offline, Storage, Indexed DB...
高度な通信制御
双方向通信, Server-Sent Event...
2011 年にはできていたことの一例

24. Web ではできなかったこと
システムステータス
WiFi 情報, モバイル通信...
各種センサー
光センサー, 近接センサー...
低レベルハードウェア制御
USB, BlueTooth, NFC...
2011 年にはできなかったことの一例

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

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

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

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

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

30. H.264
Indexed
DB
FileAPI
Web
Audio
CSS3~
Opus
ECMA
6th
CSP
Web
RTC
Net
Info
Device
Storage
TCP
Socket
File
Sys
Notifi-
cation
Proxi-
mity
Battery
Status
Radio
Tel
DNT
SPDY
この辺りが
2012 年の進化
Regions
Filters
Flex
Box
今年はもっと！

31. 進化を続ける Web 技術
問題はすべて解決してきた
速度遅い → 高速化
マルチコア → Workers
GPU 使えない → WebGL, WebCL
JS 嫌い → ECMA6th, Emscripten
×××できない → API を追加
Native なら… → Web が Native

32. 大規模 App も Native 並の速度へ
重い処理も asm.js で C の 1/2 程度まで
Java や C# と同程度の処理速度

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

34. 実装済み Web API
Alarm
attention screen
Archive
Audio Policy
Background Sensor
Browser
Camera
Contacts
Desktop
Notification
Device Storage
Embed Apps
File Handle
FM Radio
IdleAPI
Mouse Lock
Mobile Connection
Network Events
Network Stats
Manage
Permissions
Power Management
Settings
SMS
Screen Orientation
Social API
System XHR
TCP Socket
Web Telephony
Time Manager
Open Web Apps
WiFi Management
などなど...
実装状況などのまとめ表: https://wiki.mozilla.org/WebAPI

35. 次の Web API
Background
Services
Bluetooth-***
Calendar
Database
Migration (temp
to perm storage)
FileSystem?
NFC
HTTP-cache
Keyboard/IME
Log
MPEG DASH
Open Web Apps
Parallel Array
Payment
Push Notification
Quota
Resource Lock
Simple Storage
SPDY Server
Push
Spellcheck
UDB Datagram
Socket
USB (low-level)
USB file-reading
WebRTC -
Camera
WebRTC - P2P
などなど...
どこまで今年中にサポートされるか楽しみ！

36. Web 標準を充実させよう！
Web = Native に
不足機能はすべて定義・実装
W3C の WG などで標準化
実装と平行して標準化
Device API, System Apps...
そのほか IETF などでも
https://wiki.mozilla.org/WebAPI

37. 僕はまず立派なブラウザになり
いつかは立派な OS にならなきゃ

38. Firefox OS

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

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

47. シンプル＆スマート
Web プラットフォームの実行環境としては圧倒的にスマート！
WHAT IS FIREFOX OS?
HOW IS IT DIFFERENT FROM ANDROID
HTML5 User
Experience/
Content
Kernel
Device
Web Engine/
Standard
Device APIs
Firefox OS
Web Browser/
Platform
Native API-
based UI
Kernel
(e.g. Android, iOS,
Win7, etc.)
Device
(phone, tablet,
desktop)
APIs
Android

48. Firefox OS とセキュリティ
ユーザがアプリ権限管理可
インストール時と実行時に権限を
許可するハイブリッド方式
「インストール時に全て許可」で
はプライバシーは守れなかった
ユーザが理解できプライバシーな
どに関わる API は実行時確認

49. Developer Preview Phone
今週ストアオープン予定
Keon:
Snapdragon 1GHz, 4GB ROM,
512MB RAM, 3.5" HVGA
Peak:
Snapdragon 1.2GHz x2, 4GB ROM,
512MB RAM, 4.3" qHD
http://www.geeksphone.com/

50. Developer Preview Phone
Telefónica と Geeksphone が作る開発者向けテスト端末

51. 開発パートナーと製品化
KDDI, Telefónica ...
世界の主要 18 キャリア
ZTE, Alcatel, LG, Huawei, Sony...
6 月に 5ヶ国で発売予定
スペイン、ブラジル、ベネズエ
ラ、ポーランド、ポルトガル
2013 年中に更に 11ヶ国
日本や北米では 2013~2014 のタイムフレームで発売予定

52. MWC で発表したパートナー
主要なキャリア、端末メーカー、チップメーカーなど

53. 端末＆チップメーカー
SONY Mobile は Telefónica と Firefox OS について提携

54. いつ Web にするか？

55. いつ Web にするか？

56. Marketplace

58. Web ＝ アプリマーケットへ
Open Web Apps
Web アプリのインストール API
Firefox Marketplace
オープンなマーケットの提供
Web Payments
オープンな課金 API の実装

59. Firefox Marketplace
Device, OS 横断マーケット
Web Platform のためのストア
Firefox 限定にならない設計
現在開発者向けに公開中
Firefox OS と Android 版 Firefox
の開発版ユーザが対象
PC で使うには UA 書き換え...
https://marketplace.firefox.com/

60. Mozilla は Web エンジンに注力
ビジネスは自由に
独自 Market や自己配布も可能
決済手段も自由に
ベンダー、決済手段、認証システ
ムに依存しない Payment API
ハードは Android と共通
HAL は Android と共通化

61. 独占的プラットフォーム
からオープンな Web へ
開発者/OEM/キャリア
Apple
App Store
iPhone/iPad
ユーザ
Google
Play
端末
ユーザ
MS
Marketplace
端末
ユーザ
market 開発者/OEM/
/ キャリア
ユーザ
端末
既存の独占的
プラットフォーム
Firefox OS による
Open プラットフォーム

62. Marketplace パートナーの例
多数のパートナーのうち一例です

63. Firefox ＝ WebRT (WebRunTime)
Gecko = アプリ環境
Firefox = Gecko で XUL/JS
WebApps = Gecko で HTML/JS
マルチデバイス対応
PC, Android, Firefox OS...
同じコードでどこでも動く
マーケットもマルチデバイス

64. Android に Web アプリ環境
Web App = Native App に
ホームスクリーンへの追加
独立してフル画面起動
ネイティブ同様の利用体験
Firefox = WebRT for Android
ホームにインストール、アプリを起動した画面、マーケットをブラウズ

65. PC にも Web アプリ環境
Web App = Native App に
プログラムフォルダ (アプリケー
ションディレクトリ) への追加
ウィンドウはもちろんプロセスも
データも全て独立
Firefox = WebRT for PC

66. Web = Marketplace
Marketplace に縛られない
Web はアクセスすれば使える
Marketplace のアプリでなくとも
アプリ内課金 API が利用可能
Web/Marketplace 横断検索
Firefox Marketplace に登録されて
いないアプリも見つけられる

67. アプリも「ぐぐる」時代へ
"まずインストール" は古い
ディレクトリ(分類)だけのマーケ
ットでは Google 以前の Web
動的な Web アプリ環境
インストール不要で使える
検索も Market / Web 横断検索
*1 everything.me ってサービスだから正確には「えぶる」かも？
*1
Marketplace
Web

68. アプリ内に直接ジャンプ

69. Web らしいシステムだね！

70. いつ Web アプリ作るか？

71. いつ Web アプリ作るか？

72. App Dev

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

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

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

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

77. Firefox OS Simulator
プロファイル付きデスクトップビルドにホームボタンを追加
コンソールやディレクトリからアプリケーションを読み込む機能も

78. Join US!

79. •
•
•
•
Mozilla WebFWD
起業支援プログラム

80. •
•
•
•
•
•
•
•
•
•
•
Firefox Flicks
ビデオコンテスト

81. about: Firefox OS group
http://FxOS.org/
(https://groups.google.com/
group/firefoxos にリダイレクト)
コミュニティ一緒に作ってくれる
人を募集しています。(・・).

82. Firefox OS 情報集めてます
http://FxOS.org/wiki
(https://github.com/dynamis/
firefoxos/wiki にリダイレクト)
随時更新しています。