Unleash The Future

!
Unleash the Future
Web Technologies and Web OS @ html5j@Sendai
by Tomoya Asai (dynamis)

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

topics:
Internet of Things
Smart Devices
Web Platforms
asm.js
Firefox OS

Internet of Things
あらゆるモノが繋がる未来
2020 年には 260 億 by Gartner
2020 年には 500 億 by cisco
2020 年には 2000 億 by Intel
!
予測値は違うがとにかく一杯！

スマートフォン
世界の出荷台数は急成長中
2012 年に世界で 7 億台
2013 年に世界で 10 億台
新興国はまだまだ成長する
国内の出荷台数は頭打ちか
2012 年に国内で 2848 万台
2013 年に国内で 3031 万台

スマートデバイス
コンピュータ以外の情報機器
テレビも家電も何でも…
ネットに繋いで付加価値創造
機器間連携で付加価値創造
ウェアラブルも大人気
眼鏡、帽子、腕輪、指輪…
CES/MWC には各社が大量出展…

Web とスマートデバイス
Web 技術がより重要に
インターネット接続が基本
デバイスの種類が飛躍的に増加
業界標準の API が必要
HTML5 などの Web 技術がキーに
Web of Things...

Web ブラウザ
ブラウザ＝ Web Platform
Web はアプリの実行環境
HTML5 はアプリの記述言語
Firefox は Device API も広く対応
Opera は独立したエンジンを持たなくなった…

独立起動する Web アプリ
Firefox
PC/Android で Web アプリに対応
Chrome
PC で Web アプリに対応
Chrome Apps 限定で API を提供
Firefox は多くの API をアプリ限定でなく普通の Web でも提供

Standalone Web App
Firefox や Chrome では Web アプリを
独立したアプリとしてインストール可能
Chrome Apps
Firefox Apps

増え続ける Web OS
多くの新 OS が Web ベース
Firefox OS, Chrome OS, Tizen IVI,
webOS などは Web アプリ中心
Windows 8, Tizen Mobile などは 
ネイティブアプリがメイン

フル機能の Web OS
Firefox OS
OS の UI 含めてすべて Web ベース
Chrome OS
アプリは PNaCl など除いて Web ベース
webOS
TV 版 SDK 未公開だが多分 Web ベース
Tizen IVI (!= Tizen Mobile)
Intel 推進の IVI は Web ベース
注: Mobile はネイティブ依存強い
Tizen はプロファイル毎に API セットや設計が違うので要注意

多能なデバイスに広がるWeb OS
モバイル
Firefox OS, Tizen Mobile, Chrome? ...
テレビ
Firefox OS, webOS, Tizen TV? ...
デスクトップ
Chrome OS, Firefox OS ...
車載端末
Tizen IVI, QNX (BlackBerry) ...

Web OS に注目する業界
あらゆる業界の W3C グループ http://www.w3.org/Consortium/activities.html

健康やライフサイエンス

実績のある Web OS
Chrome OS
2011/05 商用展開開始
2013 米国のノート PC 20%
Firefox OS
2013/07 商用展開開始
半年で 15 ヶ国に展開
Uruguay Movistar - スマホの 30%
いずれも必要機能を備えた低価格端末が大きなシェアを獲得

登場が待たれる Web OS
webOS
LG がスマートテレビに採用
スマホ用は OSS 化したが終息？
Tizen IVI, QNX (Blackberry)...
車載向けの OS を各社が開発中
Tizen Mobile
でませんでした。。。

webOS TV は今年発売予定
LG がリリースするスマートテレビの 70% に搭載予定
びーんばーどが可愛いので大いに期待しよう！

webOS SDK 近日公開 (のハズ)
CES の会場では 2 月に公開すると言ってたが…
http://connectsdk.com/comingsoon

Tizen @ MWC 2014
発売されなかったスマホをメインに展示

Tizen @ MWC 2014
Samsung × docomo 端末が無念そうでした。。。
オープンソース版と違ってかなり作り込まれていました (ソース非公開)

Web OS の現状
2013 年は商業的成功の始まり
Chrome OS ノートパソコン
Firefox OS スマートフォン
2014 年はマルチデバイス展開
Firefox OS がタブレット、テレビ、
パソコンなどに採用
webOS がテレビに採用
他にも何か出てくるかも？

Web Platform の課題
機能不足
デバイスやシステム系 API 不足
パフォーマンス
Java などに比べても遅かった
エコシステム
アプリ配信や課金が難しかった

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

Semantic
Elements
Multi
Media
HTML5
Forms
Oﬄine
SupportHTML5HTML5
Parser
Mouse,
Key ev.
XHTML5
WAI-
ARIA
W3C

Semantic
Elements
Multi
Media
Canva
s
HTML5
Forms
Oﬄine
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

Semantic
Elements
Multi
Media
Canva
s
HTML5
Forms
Oﬄine
Support
Micro-
Data
Server-
Sent ev.
Web
Sockets
Web
Storage
Layou
t
Media
Queries
HTML5
CSS3~Trans
form
Anim
ation
Region
s
Filters
HTML5
Parser
Mouse,
Key ev.
XHTML5
Web
Workers
Web
Messag-
ing
WAI-
ARIA
W3C
WHATWG
HTML

Semantic
Elements
Multi
Media
Canva
s
HTML5
Forms
Oﬄine
Support
Micro-
Data
WebG
L
Indexed
DB
SVG
Server-
Sent ev.
Web
Sockets
Web
Sockets
Geo-
location
FileAP
I
Web
Storage
XHR2
Math
ML
Layou
t
Media
Queries
HTML5
CSS3~Trans
form
Anim
ation
Region
s
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

Semantic
Elements
Multi
Media
Canva
s
HTML5
Forms
Oﬄine
Support
Webm
H.264
Micro-
Data
WebG
L
Web
SQL
Indexed
DB
SVG
Server-
Sent ev.
Web
Sockets
Web
Sockets
Geo-
location
FileAP
I
Web
Storage
XHR2
Math
ML
Web
Audio
Layou
t
Media
Queries
HTML5
CSS3~Trans
form
Anim
ation
Region
s
Filters
HTML5
Parser
Mouse,
Key ev.
Opus
ECMA
Script ECMA
6th
USB
CSP
SPDY
WebC
L
Web
RTC
Net
Info
MP3
Device
Storage
TCP
Socket
NFC
File
Sys
Notiﬁ-
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

http://www.w3.org/2012/sysapps/

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

TV や車載端末の API は？
W3C や業界団体で議論中
各自実装しながら標準化を進めて
いくスタイル
方向性はまだ不明確だが、今年は
TV や車載の Web API もガンガン
実装が進んでいく年になる

デスクトップのリモート実行
Desktop as a Service
OctaneCloud AMIs on AWS
2013/01 Mozilla, Amazon と協力して
AWS の GPU インスタンスを使う高
速マシンの画面を ORBX.js で高画
質リモート配信するサービスを開始
VMware Horizon View
2014/02 Google との提携で
Chromebook のサポートを発表
DaaS でパフォーマンスや旧 OS アプリの互換性問題も解決可能

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

asm.js とは
JavaScript のサブセット仕様
既存 JavaScript エンジンで動作
高度に最適化可能なパターン
静的型で事前コンパイル可能
経験的に JIT する必要が無い形式
全体または関数単位で有効化
"use asm" とファイルまたは関数
の冒頭に記載する
"Fast Parts" (の更に一部) を明文化・定義したもの http://asmjs.org/

asm.js コードサンプル
http://asmjs.org/spec/latest/

asm.js の設計思想
演算結果を固定型に
型の明示 (Annotation) も既存
JavaScript の範囲内で行う
TypedArray でメモリ管理
ガーベジコレクションを回避
機械生成が前提の設計
C 言語などから変換する対象
C 言語に追いつくための設計 http://asmjs.org/

asm.js がもたらすもの
Web を Native の速度に
CrankShaft や IonMonkey の SSA 最
適化 JIT の効果を確実かつオーバー
ヘッドなく使えるように
予測可能なパフォーマンス
暗黙知 (ダーティハック) にお別れ
ams.js 形式で書けば必ず十分に高
速化されることが保証される
予測不能な JIT/GC を回避
"Fast Parts" である ams.js なら確実に速く http://asmjs.org/

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

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

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

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

C 言語に追いついてきた！
殆どの処理で C 言語 (clang) の 1.5 倍以内
C (clan) < JavaScript (asm.js) < C (gcc) の場合も
2013/12 - https://hacks.mozilla.org/2013/12/gap-between-asm-js-and-native-
performance-gets-even-narrower-with-float32-optimizations/

asm.js にまつわる誤解
機械生成なんてナンセンス
CoffeeScript や TypeScript どころ
か 2006 年には GWT 出てる
特定パターンだけ高速は反則
ベンチを中心に特定パターンへの
最適化が積み重ねられてます
Emscripten などの機械生成コード
利用も広がっておりいずれにして
も最適化対象となるパターン
http://mozakai.blogspot.jp/2013/06/what-asmjs-is-and-what-asmjs-isnt.html
！？

x = x¦0 とか非対応だと重い
既存エンジンが既に最適化していた
パターン (SunSpider crypto 等)
高速実行可能なコード生成を行っ
ていたツールからできた規則
特殊な JIT エンジンが必要
既存エンジンの簡単な拡張
Firefox では 3 人月、Chrome も
数ヶ月で最適化対応を進めた
！？

asm.js は新しい技術
高速コード生成対象パターン
既存の最適化 JIT (CrankShaft や
IonMonkey) でコンパイルされる
asm.js は新しい仕様
JavaScript のサブセット 
固定型は TypedArray で定義済み
Emscripten 実行速度は Mozilla だけ
有利とならず透明性を高めるため
！？

"use asm" での AOT は反則
型の変わらないコードに対しては元々
原理的には AOT 可能 (だが大変)
機械生成で AOT 可能と保証できる
なら経験則で判別する必要ない
ES6 の Math.imul に依存してる
32bit 整数演算を行う関数 (後述)
影響は限定的だし Polyﬁll あります
asm.js 専用で生まれた訳じゃない
！？

PNaCl との一騎打ち
C++ で書いたコードを高速に
Web で動かすという目的は一緒
HTML5 同様に既存 JS との互換性
を重視したアプローチが asm.js
PNaCl の成否に依らず JS の一部
である asm.js への最適化は続く
！？

asm.js がまだ C より遅い理由
コンパイルタイム
避けられないオーバーヘッド
別スレッド AOT したりキャッシュ
したりして解消していく
単精度演算ができない
元々 JavaScript は倍精度のみ
SIMD 命令が使えない
4 データ同時処理で 300% 高速化
などなど。

Math.fround
引数を単精度に丸める
単精度演算の明示に利用
明示なしでもエンジンが判断す
る・できる場合もあるが限定的
SM, JSC, v8 で実装済み
https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/fround

Math.fround で単精度演算
!
!
https://blog.mozilla.org/javascript/2013/11/07/efficient-float32-arithmetic-in-

単精度演算命令が無いと遅い
倍精度の方が重い CPU あり
float32/float64 の相互変換
float32 を倍精度演算するには変換
オーバーヘッドが発生
倍精度の方がメモリを消費
メモリ関連処理時間に影響
単精度なら可能な最適化も
数値演算によっては最適化可能
例えば x = 1024, y = 0.0001, z = 1024, (x+y)+z の結果は精度によって異なる

Math.fround による高速化
Math.fround の導入によって数値演算 
ライブラリの速度が最大 60% 高速化
https://blog.mozilla.org/javascript/2013/11/07/efficient-float32-arithmetic-in-javascript/
0%
15%
30%
45%
60%
Matrix Inversions Matrix Graphics Exponential Fast Fourier Transfrom
Desktop (x86) Nexus 10 Nexus 4 Galaxy S3

Math.imul
C 同様の 32bit 整数の掛け算
これも高速化を助ける関数
これを使わないとエンジンで常に
最適化できるとは限らない
https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/imul

SIMD Module
128bit SIMD モジュール
TypedArray の拡張
対応データ型
ﬂoat32x4, uint32x4
配列とビュー
Float32x4Array, Int32x4Array
既存 TypedArray のビューにも
Intel, Google, Mozilla が積極的に取り組んでいるところ

SIMD 命令が存在しないと遅い
複数データの並列同時計算
CPU 1 クロックで複数データ処理
同時に扱える数倍だけ速くなる
IA32/X64 の MMX/SSE など
ARMv7 の NEON など
CPU フル活用したいよね！
http://wiki.ecmascript.org/doku.php?id=strawman:simd_number

SIMD 命令の導入
!
https://github.com/johnmccutchan/ecmascript_simd

Conclusion
ステキな新機能一杯
コード量もバグも少なく
大規模開発にも対応可能に
書いてて楽しい言語に！
どんどん高速化が進む
JavaScript Fast Parts が増える
C 言語に迫る高速化が進行中
JavaScript はこれまで通り不可能と言われた壁を乗り越え続けていく…

着実に成長している途中
Line などがあるのは勿論、Android では入手できなくなった Flappy Bird も

すっきりデザイン
完成イメージです

とてもクリーンなメール

連絡帳や電話もシンプル

動画と写真も同時撮影可能

ギャラリーやタスクマネージャ

すべての情報に１カ所から

ロード中だけ大きいタイトル

左右スワイプでアプリを切替

通知は指の届く画面下から

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

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

MWC 2014 でのパートナー発表
21 キャリアの他に端末メーカーや 
SoC メーカーなどがパートナーに

ローエンドを $25 で再定義
Spreadtrum が 3 つの SoC で Firefox OS 対応
リファレンスモデルのリテール価格は $25 から

世界各国で順次展開中
15ヶ国で商用展開中
Telefónica、Deutsche Telekom、
Telenor、Telecom Italia
スペイン、ポーランド、コロンビ
ア、ベネズエラ、ドイツ、ブラジ
ル、メキシコ、ペルー、ウルグア
イ、ハンガリー、ギリシャ、セル
ビア、モンテネグロ、イタリア、
チリ
2014 年 02 月時点。今後更に多くのキャリア、多くの国で展開予定

Firefox OS 端末販売は順調？
Telefónica は一部公表
ベネズエラ (Telefónica@2013/10)
スマートフォン販売の 12% 以上
コロンビア (Telefónica@2013/10)
スマートフォン販売の 9% 程度
ウルグアイ (Movistar@2013/12)
スマートフォン販売の 30%
キャリアのインタビュー記事から引用した数値です

販売台数はどれくらい？
パートナー企業に聞いてね
Mozilla が売ってるのではないので
アナリストの予測はある
2013 年の半年で 50 75 万
2014 年はその 6 10 倍？
目標値を公表するメーカーも
ZTE は 2014 年に 100 万台以上

更に多くの国で展開予定
MWC で 12 ヶ国を発表
アルゼンチン、コスタリカ、
エクアドル、エルサルバドル、
ドイツ、グアテマラ、ニカラ
グア、パナマ
クロアチア、チェコ共和国、
マケドニア、モンテネグロ
今年中に 30 ヶ国は越えそう？
2014 年 02 月時点。今後更に多くのキャリア、多くの国で展開予定

フォームファクタの展開
タブレット
Foxconn が最初の端末
スマートテレビ
Panasonic が製品化
パソコン
VIA が開発端末を販売中

発売中の Firefox OS 端末
商用端末は 3 機種発売済み
ZTE Open
Alcatel One Touch Fire
LG Fireweb
開発端末や PC など
Geeksphone Keon/Peak
APC (VIA) Paper/Rock
2013 年 12 月時点

!
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-acce58c8e502.html

!
Alcatel One Touch Fire
主な仕様:
Size: 115 x 62.3 x 12.2 mm 
CPU: MSM7227A 1 GHz 
RAM: 256 MB 
ROM: 512 MB
http://www.alcatelonetouch.com/global-en/products/smartphones/one_touch_fire.html

LG Fireweb (D300)
主な仕様:
Size: 113.8 x 66.5 x 9 mm 
Display: 4 inch HVGA 
CPU: 1 GHz (型番未確認) 
Memory: 2 GB (4GB？)
http://www.vivo.com.br/firefoxos/

VIA - APC Paper / Rock
Firefox OS 標準搭載 PC
現在は開発者向け
CPU: Cortex-A9 900MHz
ボードは $59、箱入りで $99
HDMI 出力などあり！
Raspberry Pi クラスの Android PC が Firefox OS に正式対応したもの

発表済みの Firefox OS 端末
商用端末は 7 機種発表
Huawei Y300
ZTE Open II, C
Alcatel One Touch Fire C, E, S, 7
開発端末
リファレンススマホ Flame
VIA / Foxconn のタブレット
2013 年 12 月時点

!
Firefox OS Flame (リファレンス)
主な仕様:
Display: 4.5 inch FWVGA 
CPU: MSM8210 Dual 1.2 GHz 
RAM: 256 MB 1GB (可変) 
ROM: 8 GB
NFC, BT4, Dual SIM 対応

ZTE Open C
主な仕様:
Display: 4 inch WVGA 
CPU: MSM8210 Dual 1.2 GHz 
RAM: 512 MB 
ROM: 4 GB
!
普通に進化したモデル

!
Alcatel One Touch Fire C
主な仕様:
CPU: Dual 1.2 GHz
RAM: 512 MB 
ROM: 2 GB
!
コンパクトサイズ端末

!
Alcatel One Touch Fire S
主な仕様:
Display: 4.5 inch qHD 
CPU: Quad 1.2 GHz
LTE サポート
!
今回の発表では最高性能

Future of Mobile Privacy
Deutsche Telekom × Mozilla
色々実装中です
Privacy Panel
Location Blur
Guest Mode
Find My Fox
etc...

国内からもエコシステム拡大
仙台の皆さんも一緒にやりましょう！

Web で未来を切り開こう！
端末バリエーション拡大
販売する国も拡大
タブレットやテレビも登場
日本にもやってくる！

Firefox OS コミュニティ！
http://FxOS.org
イベントやドキュメントをご案内
http://FxOS.org/ml
(Google Group のリンク: https://
groups.google.com/group/ﬁrefoxos)

主な Firefox OS イベント
Firefox OS 勉強会
東京、大阪、名古屋で開催
Gecko 勉強会
FxOS コードリーディング
Firefox OS ハッカソン
その他 ABC, DevSumi などの
各種イベントに参加
毎月 2~3 くらいのペースで開催されています

!
FxOS コードリーディング Meetup
3/14 (金) 19:30∼22:00
Mozilla オフィスで開催
http://atnd.org/events/47848
!
気軽に集まってコード読んだ
り情報交換したりします

関西 Firefox OS 勉強会
3/15 (土) 13:00∼17:00
Mozilla の清水も話します
http://atnd.org/events/47737
アプリ間の通信とか
アプリ間のデータ共有とか
@chikoski が話します

仙台ではやらないの？

Unleash The Future

More Related Content

Similar to Unleash The Future

More from dynamis

Recently uploaded

Unleash The Future