Web App Platform Firefox

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

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/

既存のプラットフォーム
OS 毎にアプリ開発
言語や API は OS に依存
iOS/Windows は UI 規則も強い

Web はサブセット扱い
アプリ環境としては不完全
追加 API の標準化もされない

分断されたエコシステム
i

a

f

c

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

Web Platform への期待
次世代プラットフォーム
Web 技術ですべて可能に

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

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

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

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

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

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

10

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

Web Platform の課題
機能的な制約
デバイスやシステム系の API 不足

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

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

デバイス操作ができなかった
カメラ
マイク

スピーカー
振動モーター

マルチタッチ

USB 接続
加速度計
Bluetooth

ボタン＆キー

光センサー

ジャイロ
近接センサー

大規模アプリは遅かった

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

アプリのグリッド表示

ホーム画面

写真の編集画面

写真ギャラリー

ビデオ再生アプリ

音楽再生アプリ

メールアプリ

アドレス帳

!

Firefox OS - Web is the Platform
Web = アプリ環境
アプリはすべて Web 技術で
ドメイン = アプリの１：１対応

Web を進化させる
不足機能は API を定義・標準化
Web のセキュリティモデルなど
も実装・標準化していく

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

速度も C 言語に迫る
asm.js により大幅高速化を実現
WebGL や DOMCrypt なども活用

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

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

Oﬄine
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

Notiﬁcation

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

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

すべて Web 技術で！

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

C 言語に迫る高速化 (asm.js)

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

C 言語に迫る高速化 (asm.js)

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

実レベル: 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

実用例: Unreal Engine 3

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

グローバル市場に拡大

Firefox OS の取り組みに賛同する企業の一部 (MWC の記者発表会より)

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

!

多数企業との共同開発・製品化
主要 18 キャリアが賛同
KDDI, Telefónica, Deutsche
Telekom、Telenor...

チップ＆端末メーカー
Qualcomm, ARM
ZTE, Alcatel, LG, Huawei, Sony
Foxconn...
もちろん発表している企業がすべてではない

７月、8月に最初の販売開始
7月2日にスペインで発売
Telefónica が ZTE Open を発売
€69 (税込) プリペイド €30 含む

順次世界各国に展開
7月12日にポーランドで発売
8月1日にコロンビア、ベネズエラ

まずは今後の成長が見込まれる新興国市場を中心に展開 (キャリアの戦略)

ZTE Open & Alcatel One Touch Fire

!

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-

!

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

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-

10月から更に多くの市場へ展開
Firefox OS 1.1 端末のリリース
Telefónica
10/22: ブラジル 
10/31: メキシコ、ペルー、ウルグアイ

Deutsche Telekom
ドイツ、ギリシャ、ハンガリー

Telenor
ハンガリー、セルビア、モンテネグロ
日本や北米では 2013~2014 年中の見込み http://mozilla.jp/blog/entry/10310/

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/

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

Firefox OS のアプリ開発
Web アプリです。
!

!

大事なこと３回

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

アプリ開発の流れ
普通に Web 開発
アプリマネージャ or Firebug etc.

manifest ファイルを用意
メタ情報を JSON 形式で記載

シミュレータや実機テスト
Android Firefox でもテスト

https://github.com/dynamis/firefoxos/wiki/simulator

２つの方式のアプリ
Hosted (Web 読み込み型)
従来の OS ではブラウザ上で動作
動作や権限は従来の Web と同じ
オフライン対応アプリも開発可能

Hosted 
Web アプリ

Server
Internet

Packaged (ダウンロード型)
従来のスマホアプリに相当する
マーケット審査を経て追加権限取得
サイト全体を ZIP して配布する形式

端末
Packaged
Web アプリ

詳細: https://developer.mozilla.org/ja/docs/Web/Apps/Packaged_apps

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

!

アプリ情報 (manifest.webapp)

https://developer.mozilla.org/en-US/docs/Apps/Manifest

ZIP して Packaged App に
ZIP + package.manifest
1. manifest.webapp 作成
Hosted Apps の時と同じ

2. サイト全体を ZIP する
manifest.webapp も含める

3. package.manifest を作成
mini manifest が別途必要

!

mini manifest (package.manifest)

https://developer.mozilla.org/en-US/docs/Web/Apps/Packaged_apps

アプリマネージャ
アプリ開発・管理環境
Firefox 標準搭載の開発環境
Firefox Nightly などに搭載済み

シュミレータ・実機両対応
Firefox OS 1.2 以降の実機またはシュ
ミレータと接続して開発
10 月時点で Firefox OS 1.2, 1.3 の
シュミレータが公開中
リリース版やベータ版には未搭載ですので Nightly で開発してください

アプリマネージャ

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

Firefox OS 1.2 Simulator

デフォルトホームにアプリ検索フォームが移動

Firefox OS 1.3 Simulator

カテゴリ別アプリフォルダ復活

独自アプリのインストール

Apps パネル左下の Add ∼ App から追加
新規アプリ開発はここからしましょう

独自アプリのテストとデバッグ

UPDATE ボタンで端末のアプリを更新
DEBUG ボタンでリモートデバッグ開始

開発者向け端末
開発者向けロック解除端末
Geeksphone
Keon
Peak/Peak+

ZTE (eBay US/UK/HK)
ZTE Open

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/

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

!

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/

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

Building Blocks (UI 部品)
Gaia (Firefox OS 標準) Apps
のデザインを簡単に作れる
http://buildingﬁrefoxos.com/

使っても使わなくても OK
好きな SDK/Library 使える
自由な Web ですから！

http://buildingfirefoxos.com/

Firefox OS コミュニティ！
http://FxOS.org/

イベントやドキュメントをご案内

http://FxOS.org/ml

(https://groups.google.com/group/
ﬁrefoxos にリダイレクト)

!

Web App Platform Firefox

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Web App Platform Firefox

Ähnlich wie Web App Platform Firefox (20)

Mehr von dynamis

Mehr von dynamis (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (9)

Web App Platform Firefox