75
Web App Platform "Firefox" @dotFes 2013 Kyoto by Tomoya Asai (dynamis)

Web App Platform Firefox

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Web App Platform Firefox

Web App Platform "Firefox"@dotFes 2013 Kyoto

by Tomoya Asai (dynamis)

Page 2: Web App Platform Firefox

about:me

Page 3: Web App Platform Firefox

Tomoya ASAI

Mozilla Japan Technical Marketing (Evangelist)

dynamis @ community dynamis.jp

@dynamitter

facebook.com/dynamis

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

Page 4: Web App Platform Firefox

about:mozilla

Page 5: Web App Platform Firefox

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/

Page 6: Web App Platform Firefox
Page 7: Web App Platform Firefox

Background

Page 8: Web App Platform Firefox

既存のプラットフォーム

OS 毎にアプリ開発 言語や API は OS に依存 iOS/Windows は UI 規則も強い

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

Page 9: Web App Platform Firefox

分断されたエコシステム

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

i a f c

Page 10: Web App Platform Firefox

Web Platform への期待

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

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

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

Page 11: Web App Platform Firefox

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

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

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

Page 12: Web App Platform Firefox

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

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

800

4510

Page 13: Web App Platform Firefox

Web Platform の課題

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

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

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

Page 14: Web App Platform Firefox

デバイス操作ができなかった

マルチタッチ

ボタン&キー

マイク

カメラスピーカー

振動モーター

ジャイロBluetooth

光センサー近接センサー

加速度計

USB 接続

Page 15: Web App Platform Firefox

大規模アプリは遅かった

大規模アプリの処理速度では C 言語が圧倒的に速い (小規模アプリや一部ベンチだけは以前から高速)

2013/03 - http://kripken.github.io/mloc_emscripten_talk/#/19

Page 16: Web App Platform Firefox

�����+% ����

Page 17: Web App Platform Firefox

Firefox OS

Page 18: Web App Platform Firefox

ホーム画面

アプリのグリッド表示

Page 19: Web App Platform Firefox

写真ギャラリー

写真の編集画面

Page 20: Web App Platform Firefox

音楽再生アプリ

ビデオ再生アプリ

Page 21: Web App Platform Firefox

アドレス帳

メールアプリ

Page 22: Web App Platform Firefox

Firefox

Firefox Marketplace

Page 23: Web App Platform Firefox

!

Firefox OS - Web is the Platform

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

Page 24: Web App Platform Firefox

Web 技術をネイティブに

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

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

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

Page 25: Web App Platform Firefox

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

XPathRSS

RDF

OGP

Schema .org

WAI- ARIA

W3C

WHATWG

other

Khronos

ECMA

IETF

WOFF

Battery Status

Radio

Tel

HTML

DNT

Flex Box

Page 26: Web App Platform Firefox

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

その他なんでも...

すべて Web 技術で!

Page 27: Web App Platform Firefox

Firefox OS : Tizen : Android

Native Framework

カーネル & HAL

Web Platform

Web Framework

App Framework

Android Runtime

Dalvik

WebKit

Java アプリ

ブラウザ アプリ

Native Library

Web アプリ

WebKit

Web アプリ

Native アプリ

OSetc..

DeviceAPI

WebRT

Web アプリ

Packaged Webアプリ

コアサービスGeckoDeviceAPI SystemAPI

Web に最適化 シンプル&スマート

ライブラリSGL etc.

Native Interface

カーネル & HAL カーネル & HAL

X.org etc.

左上のアプリが Web 読み込み型、右上のアプリがダウンロード型

Page 28: Web App Platform Firefox

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

asm.js 導入時点で JavaScript は C の 2 倍遅い程度 (Java や C# の処理速度と同程度以上の水準に)

2013/03 - http://kripken.github.io/mloc_emscripten_talk/#/19

Page 29: Web App Platform Firefox

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

Firefox の JavaScript (asm.js 形式) コード実行速度は C 言語より数割遅い程度まで迫ってきている

2013/09 - http://kripken.github.io/mloc_emscripten_talk/sloop.html#/7

Page 30: Web App Platform Firefox

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

Page 31: Web App Platform Firefox

実用例: Unreal Engine 3

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

epic CITADEL http://www.unrealengine.com/html5/

Page 32: Web App Platform Firefox

����,)-���

Page 33: Web App Platform Firefox

グローバル市場に拡大

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

Page 34: Web App Platform Firefox

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

Page 35: Web App Platform Firefox

!

多数企業との共同開発・製品化

主要 18 キャリアが賛同 KDDI, Telefónica, Deutsche Telekom、Telenor...

チップ&端末メーカー Qualcomm, ARM ZTE, Alcatel, LG, Huawei, Sony Foxconn...

もちろん発表している企業がすべてではない

Page 36: Web App Platform Firefox

7月、8月に最初の販売開始

7月2日にスペインで発売 Telefónica が ZTE Open を発売 €69 (税込) プリペイド €30 含む

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

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

Page 37: Web App Platform Firefox

ZTE Open & Alcatel One Touch Fire

Page 38: Web App Platform Firefox

!

ZTE Open

主な仕様: Size: 114 x 62 x 12.5 mmDisplay: 3.5 inch HVGACPU: MSM7225A 1 GHz (Cortex-A5, Adreno 200)RAM: 256 MBROM: 512 MB

スペインなどで発売

http://www.ztedevices.com/product/smart_phone/2bcf2d56-0c9a-4129-a25c-acce58c8e502.html

Page 39: Web App Platform Firefox

!

Alcatel One Touch Fire

主な仕様: Size: 115 x 62.3 x 12.2 mmDisplay: 3.5 inch HVGACPU: MSM7227A 1 GHz (Cortex-A5, Adreno 200)RAM: 256 MBROM: 512 MB

ポーランドなどで発売

http://www.alcatelonetouch.com/global-en/products/smartphones/one_touch_fire.html

Page 40: Web App Platform Firefox

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-phones-q-a/

Page 41: Web App Platform Firefox

10月から更に多くの市場へ展開

Firefox OS 1.1 端末のリリース Telefónica 10/22: ブラジル10/31: メキシコ、ペルー、ウルグアイ Deutsche Telekom ドイツ、ギリシャ、ハンガリー Telenor ハンガリー、セルビア、モンテネグロ

日本や北米では 2013~2014 年中の見込み http://mozilla.jp/blog/entry/10310/

Page 42: Web App Platform Firefox

LG Fireweb (D300)

主な仕様: Size: 113.8 x 66.5 x 9 mmDisplay: 4 inch HVGACPU: 1 GHz (型番未確認)

ブラジルなどで発売

http://www.vivo.com.br/firefoxos/

Page 43: Web App Platform Firefox

!" �

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

Page 44: Web App Platform Firefox

Apps Dev

Page 45: Web App Platform Firefox

Firefox OS のアプリ開発

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

!

大事なこと3回

Page 46: Web App Platform Firefox

Firefox OS のアプリ開発

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

����$(��#*���

Page 47: Web App Platform Firefox

アプリ開発の流れ

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

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

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

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

Page 48: Web App Platform Firefox

2つの方式のアプリ

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

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

Packaged Web アプリ

HostedWeb アプリ

Internet

Server

端末

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

Page 49: Web App Platform Firefox

アプリ情報ファイル書くだけ

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

Page 50: Web App Platform Firefox

!

アプリ情報 (manifest.webapp)'�))�������H�;8:0/7<=���))�������� �����H�,5;8:0/.C47<=4*���))���!��� �� ���H������$�� �����))��������H'�))))����H����������$�����������))(��))���"��������H'�))))�������H��%��������))))�!����H�� �����%�����������))(�(���HD@�H?+9>1H�H��H�����$�� ��HGB63-

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

Page 51: Web App Platform Firefox

ZIP して Packaged App に

ZIP + package.manifest 1. manifest.webapp 作成 Hosted Apps の時と同じ

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

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

Page 52: Web App Platform Firefox

!

mini manifest (package.manifest)'�))�������H�;8:0/7<=���))�������� �� ���H����������&�����HH�"��������H�������))���"��������H'�))))�������H��%��������))))�!����H�� �����%�����������))(�(���HD@�H��������&��HF5H������� �#�����H2H�����H"�������H��"�������H�������H6EA4*

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

Page 53: Web App Platform Firefox

App Manager

Page 54: Web App Platform Firefox

アプリマネージャ

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

シュミレータ・実機両対応 Firefox OS 1.2 以降の実機またはシュミレータと接続して開発 10 月時点で Firefox OS 1.2, 1.3 のシュミレータが公開中

リリース版やベータ版には未搭載ですので Nightly で開発してください

Page 55: Web App Platform Firefox

アプリマネージャ

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

Page 56: Web App Platform Firefox

Firefox OS 1.2 Simulator

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

Page 57: Web App Platform Firefox

Firefox OS 1.3 Simulator

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

Page 58: Web App Platform Firefox

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

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

Page 59: Web App Platform Firefox

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

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

Page 60: Web App Platform Firefox

Developer Phones

Page 61: Web App Platform Firefox

開発者向け端末

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

ZTE (eBay US/UK/HK) ZTE Open

Page 62: Web App Platform Firefox

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/

Page 63: Web App Platform Firefox

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

Page 64: Web App Platform Firefox

!

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/

Page 65: Web App Platform Firefox

������

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

Page 66: Web App Platform Firefox

Appmaker

Page 67: Web App Platform Firefox
Page 68: Web App Platform Firefox
Page 69: Web App Platform Firefox
Page 70: Web App Platform Firefox

Building Blocks

Page 71: Web App Platform Firefox

Building Blocks (UI 部品)

Gaia (Firefox OS 標準) Appsのデザインを簡単に作れる http://buildingfirefoxos.com/

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

http://buildingfirefoxos.com/

Page 72: Web App Platform Firefox
Page 73: Web App Platform Firefox
Page 74: Web App Platform Firefox

For More Info

Page 75: Web App Platform Firefox

Firefox OS コミュニティ!

http://FxOS.org/ イベントやドキュメントをご案内

http://FxOS.org/ml (https://groups.google.com/group/firefoxos にリダイレクト)

!

���'&������������