Web is the OSKDDI∞Labo open MEETing Vol.17

by Tomoya ASAI (dynamis)

Last Update: 2013/02/22

about:me

Tomoya ASAI

Mozilla JapanTechnical Marketing (Evangelist)

dynamis @ communitydynamis.jp

@dynamitter

facebook.com/dynamis

mailto: Tomoya ASAI <dynamis mozilla-japan.org>@

Topics

Topics

BackgroundWeb PlatformFirefox OS

WebFWD / Firefox Flicks

Background

現在のアプリエコシステム

アプリマーケットで配信iOS <=> App StoreAndroid <=> Google PlayWindows <=> Windows Store

販売、アプリ内課金、広告課金の手数料は 30% が標準その他アフィリエイトなど

既存の独自プラットフォーム

プラットフォーム毎に異なる言語で個別の専用アプリを作る必要がある

i a f c

既存エコシステムの課題

OS 毎のアプリ開発が必要言語や API は OS に依存iOS/Windows は UI 制限も強い

WebView はサブセットWebView << Native追加 API も標準化されない

継続性、互換性、実装依存…

��#���������(�

Web Platform への期待

次世代プラットフォームWeb 技術で何でも可能に

マルチデバイス対応開発言語や API の共通化

ベンダー非依存の標準自由で持続性のある API

Web が共通プラットフォーム

Web がプラットフォームなら標準技術でアプリ環境が統一される

プラットフォームとしての Web

開発者の多いプラットフォーム

調査にも依るけど HTML5 開発者の方が圧倒的に多い

800万人

45万人10万人

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

Web Platform の課題

機能的な制約デバイスやシステム系 API 不足

パフォーマンスJava などに比べても数倍遅い

アプリ配信と課金Market や Payment の標準がない

マイクロベンチなら JS ~= Java に追いついたが実アプリレベルでは JS 遅い

%�'��&�-�

Web Platform

���������FHBD�/0�!"�

Web 技術 = Native へ

Web 技術が「ネイティブ」HTML/CSS/JS ですべて可能に新しい API は W3C 標準化

速度も Java に追いつく単純な演算程度なら既に同程度WebGL や DOMCrypt なども活用asm.js で大規模アプリも高速化

Web 技術だけですべてが済むプラットフォームとなるよう発展中

Web で可能になってること

マルチメディアAudio, Video, Animation, 3D ...

アプリケーションOffline, Storage, Indexed DB...

高度な通信制御双方向通信, Server-Sent Event...

2011 年にはできていたことの一例

Web ではできなかったこと

システムステータスWiFi 情報, モバイル通信...

各種センサー光センサー, 近接センサー...

低レベルハードウェア制御USB, BlueTooth, NFC...

2011 年にはできなかったことの一例

SemanticElements

MultiMedia

HTML5Forms

OfflineSupportHTML5HTML5

Parser

Mouse,Key ev.

XHTML5WAI-ARIA

W3C

SemanticElements

MultiMedia

Canvas

HTML5Forms

OfflineSupport

Micro-Data

Server-Sent ev.

WebSockets

WebStorage

HTML5HTML5Parser

Mouse,Key ev.

XHTML5

WebWorkers

WebMessag-

ing

WAI-ARIA

W3C

WHATWG

HTML

SemanticElements

MultiMedia

Canvas

HTML5Forms

OfflineSupport

Micro-Data

Server-Sent ev.

WebSockets

WebStorage

Layout

MediaQueries

HTML5

CSS3~Transform

Animation

Regions

Filters

HTML5Parser

Mouse,Key ev.

XHTML5

WebWorkers

WebMessag-

ing

WAI-ARIA

W3C

WHATWG

HTML

SemanticElements

MultiMedia

Canvas

HTML5Forms

OfflineSupport

Micro-Data

WebGL

IndexedDB

SVG

Server-Sent ev.

WebSockets

WebSockets

Geo-location

FileAPI

WebStorage

XHR2

MathML

Layout

MediaQueries

HTML5

CSS3~Transform

Animation

Regions

Filters

HTML5Parser

Mouse,Key ev.

ECMAScript

CSP

SPDY

XHTML5

Orien-tation

WebWorkers

WebMessag-

ing

DOM4

SMIL Vibra-tion

XPathRSS

OGP

WAI-ARIA

W3C

WHATWG

other

Khronos

ECMA

IETF

WOFF

HTML

DNT

SemanticElements

MultiMedia

Canvas

HTML5Forms

OfflineSupport

Webm

H.264

Micro-Data

WebGL

WebSQL

IndexedDB

SVG

Server-Sent ev.

WebSockets

WebSockets

Geo-location

FileAPI

WebStorage

XHR2

MathML

WebAudio

Layout

MediaQueries

HTML5

CSS3~Transform

Animation

Regions

Filters

HTML5Parser

Mouse,Key ev.

Opus

ECMAScript ECMA

6th

USB

CSP

SPDY

WebCL

WebRTC

NetInfo

MP3

DeviceStorage

TCPSocket

NFC

File Sys

Notifi-cation

XHTML5

Orien-tation

WebWorkers

WebMessag-

ing

DOM4

SMIL Vibra-tion

Proxi-mity

XPathRSS

RDF

OGPSchema

.org

WAI-ARIA

W3C

WHATWG

other

Khronos

ECMA

IETF

WOFF

BatteryStatus

Radio

Tel

HTML

DNT

FlexBox

H.264

IndexedDB

FileAPI

WebAudio

CSS3~

Opus

ECMA6th

CSP

WebRTC

NetInfo

DeviceStorage

TCPSocket

File Sys

Notifi-cation

Proxi-mity

BatteryStatus

Radio

TelDNT

SPDY

この辺りが2012 年の進化

Regions

Filters

FlexBox

今年はもっと！

進化を続ける Web 技術

問題はすべて解決してきた速度遅い → 高速化マルチコア → WorkersGPU 使えない → WebGL, WebCLJS 嫌い → ECMA6th, Emscripten×××できない → API を追加Native なら… → Web が Native

大規模 App も Native 並の速度へ

重い処理も asm.js で C の 1/2 程度までJava や C# と同程度の処理速度

Unreal Engine on Browser

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

実装済み Web APIAlarmattention screenArchiveAudio PolicyBackground SensorBrowserCameraContactsDesktop NotificationDevice Storage

Embed Apps File HandleFM RadioIdleAPIMouse LockMobile ConnectionNetwork EventsNetwork Stats ManagePermissionsPower Management

SettingsSMSScreen OrientationSocial APISystem XHRTCP SocketWeb TelephonyTime ManagerOpen Web AppsWiFi Managementなどなど...

実装状況などのまとめ表: https://wiki.mozilla.org/WebAPI

次の Web APIBackground ServicesBluetooth-***CalendarDatabase Migration (temp to perm storage)FileSystem?NFCHTTP-cacheKeyboard/IME

LogMPEG DASHOpen Web AppsParallel ArrayPaymentPush NotificationQuotaResource LockSimple Storage

SPDY Server PushSpellcheckUDB Datagram SocketUSB (low-level)USB file-readingWebRTC - CameraWebRTC - P2Pなどなど...

どこまで今年中にサポートされるか楽しみ！

Web 標準を充実させよう！

Web = Native に不足機能はすべて定義・実装

W3C の WG などで標準化実装と平行して標準化Device API, System Apps...そのほか IETF などでも

https://wiki.mozilla.org/WebAPI

=@26)CE�.>@9;<4�?+

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

Firefox OS

�������'&! -!��

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

その他なんでも...

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

その他なんでも...

すべて Web 技術で！

シンプル＆スマート

Web プラットフォームの実行環境としては圧倒的にスマート！

WHAT IS FIREFOX OS?

6

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

Firefox OS とセキュリティ

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

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/

Developer Preview Phone

Telefónica と Geeksphone が作る開発者向けテスト端末

開発パートナーと製品化

KDDI, Telefónica ...世界の主要 18 キャリアZTE, Alcatel, LG, Huawei, Sony...

6 月に 5ヶ国で発売予定スペイン、ブラジル、ベネズエラ、ポーランド、ポルトガル

2013 年中に更に 11ヶ国

日本や北米では 2013~2014 のタイムフレームで発売予定

MWC で発表したパートナー

主要なキャリア、端末メーカー、チップメーカーなど

端末＆チップメーカー

SONY Mobile は Telefónica と Firefox OS について提携

いつ Web にするか？

いつ Web にするか？

Marketplace

1>A3578:?*�

Web ＝ アプリマーケットへ

Open Web AppsWeb アプリのインストール API

Firefox Marketplaceオープンなマーケットの提供

Web Paymentsオープンな課金 API の実装

Firefox Marketplace

Device, OS 横断マーケットWeb Platform のためのストアFirefox 限定にならない設計

現在開発者向けに公開中Firefox OS と Android 版 Firefox の開発版ユーザが対象PC で使うには UA 書き換え...

https://marketplace.firefox.com/

Mozilla は Web エンジンに注力

ビジネスは自由に独自 Market や自己配布も可能

決済手段も自由にベンダー、決済手段、認証システムに依存しない Payment API

ハードは Android と共通HAL は Android と共通化

独占的プラットフォームからオープンな Web へ

開発者/OEM/キャリア

AppleApp Store

iPhone/iPad

ユーザ

GooglePlay

端末

ユーザ

MSMarketplace

端末

ユーザ

market 開発者/OEM// キャリア

ユーザ端末

既存の独占的プラットフォーム

Firefox OS によるOpen プラットフォーム

Marketplace パートナーの例

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

Firefox ＝ WebRT (WebRunTime)

Gecko = アプリ環境Firefox = Gecko で XUL/JSWebApps = Gecko で HTML/JS

マルチデバイス対応PC, Android, Firefox OS...同じコードでどこでも動くマーケットもマルチデバイス

��������

Android に Web アプリ環境

Web App = Native App にホームスクリーンへの追加独立してフル画面起動ネイティブ同様の利用体験

Firefox = WebRT for Android

ホームにインストール、アプリを起動した画面、マーケットをブラウズ

PC にも Web アプリ環境

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

Firefox = WebRT for PC

Web = Marketplace

Marketplace に縛られないWeb はアクセスすれば使えるMarketplace のアプリでなくともアプリ内課金 API が利用可能

Web/Marketplace 横断検索Firefox Marketplace に登録されていないアプリも見つけられる

アプリも「ぐぐる」時代へ

"まずインストール" は古いディレクトリ(分類)だけのマーケットでは Google 以前の Web

動的な Web アプリ環境インストール不要で使える検索も Market / Web 横断検索

*1 everything.me ってサービスだから正確には「えぶる」かも？

*1

Marketplace

Web

アプリ内に直接ジャンプ

��FG�,��!$�

Web らしいシステムだね！

いつ Web アプリ作るか？

いつ Web アプリ作るか？

App Dev

Firefox OS のアプリ開発

Web アプリです。Web アプリです。Web アプリです。

大事なこと３回

Firefox OS のアプリ開発

Web アプリです。Web アプリです。Web アプリです。

大事なこと３回

Firefox OS のアプリ開発

いつもの開発ツールいつものエディタいつものライブラリ

����������� �

Firefox OS Simulator

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

詳しい解説: https://github.com/dynamis/firefoxos/wiki/simulator

Firefox OS Simulator

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

Join US!

•Jp!^oC�¯4-/��s��8©|�®dpJmh#��������������������+������u7OT!Y$•�7�j^Fo������������¨±7�.@�H!drS!OC �-/`N\OjXo8«ºC�®•FrTmIWEc6QVMlr=�����������_!Y[!7>@K!UrJ�HbEOOe!O65C�³•dpJmh¤»�7bDrZLf!Y8�v

Mozilla WebFWD起業支援プログラム

• ��������������������+�¸.@`XHKrWOY• �u9�twC´:��y*?����z8¦¼�£• �u8W!g9�%�������������#j^Fo�->($&���¬��3j^Fo�����8·�71'2x +B,B,.@`XHC1,A(�

• ¦¼��9�����u������t"������t• ¿¢GZq!Z]!Yr�C�;4-/½�6ª��• ¹£9�Jmrdn7�)��²¹�a!doPUlFO¹�­�GrYn¹

• ¦¼8inVY • Jmrdn�¹~9�pLrRoO3dpXk!L!4{¾7�¶°�µC��-2w¡�6�£C��

• �§Zo8¹}#���������������������������$• �£C���8x 7�02<?)@• ¥�¹#¦¼~��$

Firefox Flicksビデオコンテスト

������� �����

about: Firefox OS group

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

���������

Firefox OS 情報集めてます

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

��������