Last Update: 2013/02/09

HTML2013 : Web=OSSlides @ HTML5 Carnival Fukuoka

by Tomoya Asai (dynamis)

Last Update: 2013/02/10

HTML2013 : Web=OSSlides @ HTML5 Conference Miyazaki 2013

by Tomoya Asai (dynamis)

WWeebb が OOSS になるってどういうこと？

何だか分かんないけどとっても楽しそうだね！

about:me

about:dynamisMozilla Japan

http://dynamis.jp@dynamitter

facebook.com/dynamisレッサーパンダが好き。

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

about:mozillain 2012

https://twitter.com/lindwurm_/status/288558397119397888

https://twitter.com/lindwurm_/status/288558397119397888

https://twitter.com/lindwurm_/status/288558397119397888

MMoozziillllaa ステキでしょ？

世界をもっとステキにしようと頑張ってます

Topics

本日のトピック

IntroductionHTML2013Firefox OSApp DevMarketplace

ぼくおやつ担当ねっ！

about:foxkeh

今日もプレゼンを手伝ってくれるフォクすけを紹介します

いつか僕も Firefox みたいな立派なブラウザになるんだ！

ぼくフォクすけ

サーバ (Apache Camel) の上にクライアント (Firefox)

ぼくのステッカーを君のPC とスマホに貼ってね！

君と一緒にお出かけしたいな！

Introduction

みんな大好き ""HHTTMMLL55""

Mozilla と Firefox もみんな大好きだよね！

"HTML5" の目的

アプリ のための HTMLHTML は文書専用じゃない

互換性 のある実装にブラウザの挙動を厳密に定義

マルチデバイス Webどこでも同じ Web 技術で

Web 標準プラットフォーム

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

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

独自プラットフォーム

ネイティブアプリ機能も速度もネイティブ優先

アプリエコシステム専用のストアや課金システム

Web は WebViewWeb は 一機能、独自 API 推奨

独自プラットフォーム

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

i a f c

標準技術 のオープンな世界vs

独自技術 による囲い込み

「ブラウザ戦争」の時代はとっくに終わりました

独自プラットフォームの課題

プラットフォーム依存それぞれ異なる言語や API

不透明な継続性・再利用性ベンダー依存の運命共同体

Fragmentation・実装依存同一プラットフォームでも非互換

独自プラットフォームの課題

プラットフォーム依存それぞれ異なる言語や API

不透明な継続性・再利用性ベンダー依存の運命共同体

Fragmentation・実装依存同一プラットフォームでも非互換

http://i0.wp.com/cerebrux.files.wordpress.com/2012/09/androidclones.jpg

Fragmentation...

"HTML5" への期待

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

Web アプリ開発を簡単にAPI の充実と互換性確保

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

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

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

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

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

HTML5 = WebKit の方が良い？

それどの WebKit？IE6 vs IE10 以上に違う現実

その API と実装で大丈夫？複数実装でより良い標準に

イノベーションは競争から独占が進化を止めてたよね…

I am sad that the Web didn’t handle small screens ̶ and later, touch UI ̶ that well. ... snip ...

For touch, though, I wish we had done a better job of mapping the UI to the Web’s generic events. A touch gets mapped to a “click” event easily enough, but drag-and-drop never got mapped, pinch gestures didn’t get mapped to wheel events, etc. Mainly I think this is because the first truly successful touch browser set the standard, and it was developed

mostly in secret with a small team many of whom, as I understand it, weren’t Web veterans.

Ian Hickson のインタビューより

独占やクローズド仕様は残念…

タッチイベントが残念…ドラッグ＆ドロップは？ピンチとホイールの対応は？

密室で作られたから…最初の人気タッチブラウザ実装Web 技術知らない奴らが作った

オープンな標準は世界の英知の結晶

The drag-and-drop API is horrible,

but it has one thing going for it: IE6 implements it, as

do Safari and Firefox.

by Ian Hickson: http://twitter.com/Hixie/status/4075253361

Drag & Drop API は酷いけど、採用する理由がひとつある。つまり、IE6 だけでなく Safari や Firefox でも実装されているということだ。

by Ian Hickson: http://twitter.com/Hixie/status/4075253361

オープンなモバイルでイノベーションを加速！

オープンと競争は革新の源泉

HTML2013

""HHTTMMLL55"" は今年どんな進化をするの？

未来に向かって走り続ける！ぼくは足短いから遅いけど…

Web で可能になってたこと

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

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

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

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

Web ではできなかったこと

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

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

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

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

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

ブラウザの技術からプラットフォームへ

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

2012 年実装 Web APIAlarmattention screenArchiveAudio PolicyBackground SensorBrowserCameraContactsDesktop NotificationDevice StorageEmbed Apps

File HandleFM RadioIdleAPIMouse LockMobile ConnectionNetwork EventsNetwork Stats ManagePaymentPermissionsPower Management

Push NotificationsSettingsSMSScreen OrientationSystem XHRTCP SocketWeb TelephonyTime ManagerOpen Web AppsWiFi Managementなどなど...

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

Next Web APIBackground ServicesBluetooth-***CalendarDatabase Migration (temp to permanent storage)FileSystem?NFCHTTP-cacheKeyboard/IMELogMPEG DASHOpen Web AppsParallel Array

PaymentQuotaResource LockSimple StorageSocial APISPDY Server PushSpellcheckUDB Datagram SocketUSB (low-level)USB file-readingWebRTC - CameraWebRTC - P2Pなどなど...

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

WWeebb 技術で未来を創ろう！

未来に向かって走り続けなきゃ！ぼくは足短いから走るの遅いけど

Web 標準を充実させよう！

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

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

https://wiki.mozilla.org/WebAPI

Web API の標準化

Device API, System Application, Web Apps WG が主実装面では圧倒的に Firefox がリードしている

FYI: http://www.w3.org/Mobile/mobile-web-app-state/

これなら WWeebb がOOSS になれるね！

どんなアプリでも作れそう！ボクもいろいろ作りた～い！

Firefox OS

FFiirreeffooxx OOSS ってどんなん感じ？

フォクすけもわくわく。

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

その他なんでも...

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

その他なんでも...

すべて Web 技術で！

Firefox OS (Boot to Gecko)

Web 技術が「ネイティブ」HTML5, JavaScript, Web API...Java に匹敵する速度も目指して

Gecko エンジンだけ起動Kernel 上に Gecko をJava VM などの中間レイヤなしGecko = Firefox 描画エンジン

プロジェクト名は今でも Boot to Gecko

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

Web Browser/ Platform

Native API-based UI

Kernel (e.g. Android, iOS,

Win7, etc.)

Device (phone, tablet,

desktop)

APIs

Firefox OS = スマート(軽量) OS

HTML5 User Experience/

Content

Kernel

Device

Web Engine/ Standard Device

APIs

Firefox OS既存プラットフォーム

Firefox OS エコシステムの魅力

ネイティブに負けない提供される API も充実一部処理は速度面でも匹敵

スリムな HTML5 実行環境$100 スマホでも十分動作$100 タブレットは当たり前

圧倒的な開発者数...急速な高速化が続き、型推論の効く処理は既に Dalvik/Java にも匹敵

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

Web プラットフォームの開発者は iOS の 80 倍、Android の 18 倍！

800万人

45万人10万人

透明性や自由度の高いプラットフォーム

開発者/OEM/キャリア

AppleApp Store

iPhone/iPad

ユーザ

GooglePlay

端末

ユーザ

MSMarketplace

端末

ユーザ

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

ユーザ端末

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

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

Global アプリパートナー

まだまだあるけど入り切りません。一部ロゴ古いかも。ゴメンね。

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

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

動的な Web アプリ環境Web サイトや Web アプリはアクセスするだけで使えるアプリを検索してまず試し、気に入ったらホームに追加する

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

*1

Firefox OS とセキュリティ

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

開発パートナーと製品化

Telefónica が最初に製品化世界 4 位のキャリア最初はブラジルで発売予定Qualcomm ローエンド～ミッド

現在は Dev Phone by ZTEコードネームは「うなぎ」

Softbank の Sprint 買収が確定したら Telefónica は 5 位になる

Firefox OS のパートナー

現時点で公表済みの一部パートナーのみ。続報は 24 日にね。

ステキ。

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

Apps Dev

Firefox OS のアプリ開発

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

大事なこと３回

Firefox OS のアプリ開発

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

大事なこと３回

Firefox OS のアプリ開発

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

いつもと一緒だから安心だね！

アプリ開発の流れ

普通に Web 開発デバッグもいつも通り

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

シミュレータや実機テストPC で動かない API は実機で確認Vibration, Touch, Sensor...

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

manifest ファイル{  "name": "フォクすけアプリ",  "description": "あのフォクすけが遂にアプリに！",  "launch_path": "/index.html",  "icons": {    "128": "/icons/foxkeh-128.png"  },  "developer": {    "name": "dynamis",    "url": "http://dynamis.jp/"  },  "default_locale": "ja"}// 注意: ローカルファイルで / -> /index.html 変換はない

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

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 (r2d2b2g)

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

シミュレータにインストール

Add Directory ボタンmanifest ファイルを選択zip されて packaged app としてインストールされ、起動する

Update ボタンで更新同じディレクトリのファイルを zip し直して、起動する

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

つーるきっととかは？

Firefox OS 標準のライブラリとかあるの？

GAIA Building Blocks (UI 部品)

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

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

http://buildingfirefoxos.com/

Marketplace

まーけっと？

Web アプリの配信方法は？

Firefox Marketplace

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

現在テスター向け公開中対象は Firefox OS と Android 版 Firefox Aurora/NightlyPC で見るには UA 書き換え...

https://marketplace.firefox.com/

オープンなアプリストア

全てを Web 技術で実装安定・平等な環境を提供Marketplace のソースも公開

ベンダー非依存Firefox Marketplace 以外にもストア、認証、課金も自由に

https://marketplace.firefox.com/

オープンなレビューシステム

コミュニティレビューFirefox のアドオンと同じレビュー基準もレビュアーもすべてオープンなマーケット

動作まではレビューしないあくまで最低限のフィルタ

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

自分のサイトで配布

install() 関数使うだけnavigator.mozApps.install()manifest ファイル URL を渡す

その他の Apps API:navigator.mozApps.getSelf()navigator.mozApps.getInstalled()installPackage() は FxOS 限定

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

navigator.mozApps.install()var Apps = navigator.mozApps;var manifest = "http://apps.dynamis.jp/manifest.webapp";

var request = Apps.install(manifest);request.onsuccess = function() {  // 成功時の処理};request.onerror = function() {  // 失敗時の処理};

Firefox ＝ WebRT (WebRunTime)

Gecko は Web エンジン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

WWeebb だからどこにでも！

Web らしいシステムだね！

実機で開発したい？

僕の手でも使えるかな？

Developer Preview Phone

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

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/

もっと知りたい？

僕はもっと知りたい！

Firefox OS コミュニティを！

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

http://FxOS.org/wiki(https://github.com/dynamis/firefoxos/wiki にリダイレクト)

みんな参加してね。みんなよろしく！

Summary

WebRT as an OS...

今年 WWeebb 技術が

僕はまず立派なブラウザになりいつか立派な OS になるんだ！

今年 WWeebb 技術が

僕はまず立派なブラウザになりいつか立派な OS になるんだ！

OOSS になる！

ぼくには難しいことは分からないけど許してね。

質問ある？

See Also...

開発者ツール紹介

一通りの機能と使い方Firefox 標準の開発者ツール隠し設定やビルトイン関数のリファレンスなども含めています

Firebug とその拡張機能アイコンや背景画像を変更するカスタマイズにも言及してます

http://r.dynamis.jp/devtools

JavaScript.Next

JavaScript の最新仕様ECMAScript 5th のポイント

JavaScript 次世代仕様ECMAScript 6th や Harmony

http://r.dynamis.jp/jsnext

セキュリティ関連機能紹介

セキュリティ大事！知っておくべき機能です

Content Security Policy次世代セキュリティポリシーSame Origin Policy はもう古い

http://r.dynamis.jp/sec