ブラウザから Web OS へWeb - TV 連携事例からその可能性を探る

26th March 2013NTT Communications

小松健作

自己紹介• 名前– 小松健作

• 所属– NTT コミュニケーションズ– 次世代 Web の研究開発・標準化

• HTML5 コミュニティの運営– Google Developers Expert(HTML5)– Microsoft MVP (IE)

Main Idea

• Web OS の紹介と、その可能性

Agenda

• Web [browser] Application• Web OS• Sample program – TV 連携• Browser + Web OS … 新たな Web

Agenda

• Web [browser] Application• Web OS• Sample program – TV 連携• Browser + Web OS … 新たな Web

HTML5 に至る経緯とその進化• HTML5 = Application platform

• 2004 年 : Web Application 元年– Google Map– Web2.0 => SaaS

• 2009 年〜 : HTML5– Application 開発 API の整備

• Canvas, Offline storage, Bidirectional Communication, …

– 最近では Device の操作も可能に• Camera/Microphone, Device orientation, …• Video Chat via P2P

Web [Browser] Application はNative になり得るか？

• なりえない

• Performance issue– テクノロジーの進化で今後解決されていく

• 問題は機能性– セキュリティ・プライバシーの上センシティブ

な機能のインプリは困難– インストールレスは諸刃の剣

諸刃の剣の例• 電話帳• カレンダー• ソケット通信• NFC• Bluetooth• …

ブラウジングしてる途中で、いつの間にか電話帳データが盗

まれたら・・・

[ 参考 ] Firefox + asm.js

http://kripken.github.com/mloc_emscripten_talk/#/28

Agenda

• Web [browser] Application• Web OS• Sample program – TV 連携• Browser + Web OS … 新たな Web

Web OS

• Web を OS として使う– 一時期はやった、「 OS っぽい UI 」とは異な

る– 開発言語は、 HTML/CSS/Javascript

• Web OS アプリはインストールが必須– ブラウザ Add-on や Extension の進化系

• ブラウザさえインストールされていれば、ベースの OS には依存しない

Web OS の概念図

OS(windows, mac, linux, …)

Browser run-time

Browser

Web apps Web OS apps Native apps

API 制約の解放• インストールが必須となった事で、機能制

約が解放– 電話帳– カレンダー– ソケット通信– NFC– Bluetooth– …

インストールが必要ってだけで本当

に解放していいの？

セキュリティモデル• Manifest ファイルに、利用機能を宣言

• 宣言された内容に応じ、 Marketplace で審査– Firefox Marketplace

{“permissions”: {

“tcp-socket”: {}}

}

標準化• 現在は、完全に分断– ベンダーごと独自の API

• W3C にて Web OS API 標準化を検討– System Applications WG

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

Agenda

• Web [browser] Application• Web OS• Sample program – TV 連携• Browser + Web OS … 新たな Web

Web OS サンプル（テレビ連携）

• TV へ Air Play する Web OS アプリを紹介– Socket API(Chrome Packaged Apps v2 ）を利用– DLNA の機能を実装

• ブラウザの通信 API では、制限により Air Play は出来なかった• Socket API を使えば、いかなる通信サービスも可能

に

DLNA と Web との Gap

• DLNA は Web フレンドリー– DLNA デバイス（ TV ）は Web サーバーを搭載– SOAP/HTTP でデバイスをコントロール

• Gap– デバイス内 Web サーバーの URL を如何に知る

か？– クロスオリジンでの Ajax を如何に実現する

か？

Service Discovery

• DLNA では IP multicast を用い、 Web サーバーを自動発見している– SSDP のサーチクエリーを LAN 内ブロードキャ

スト– 対応デバイスからの返信メッセージに URL が

記載この NW に

Web サーバーはいます

かー？

この機能は、ブラウザの API では現状サポートされていない

Cross Origin XHR の制限• Web サイトと、デバイスの URL はオリジ

ンが異なる– http://example.net と http://192.168.0.1

• DLNA デバイスとクロスオリジン間のXHR(Ajax) は出来ない– DLNA デバイスは CORS に対応していない

Socket API によるDLNA クライアント実装

Servicediscovery

Cross origin XHR

SOAP SSDP

自動発見＆制御

Service Discovery : Socket API を用い実装Cross Origin XHR : manifest.json の” permission” 設定

Demo

Agenda

• Web [browser] Application• Web OS• Sample program – TV 連携• Browser + Web OS … 新たな Web

Web の進化と再構築• DLNA クライアント on Packaged Apps v2– 同様のソフトは Native で既に存在

• Web の進化は既存サービスの再構築– Google map, twitter, facebook, …– 既存 + Web ならではのエッセンス– 奇をてらわずに、半歩先を目指す

既存 Web サービスと DLNA との融合

• YouTube や facebook と DLNA との連携– Web OS アプリのみでの解決策• アプリ中に各 API を組み込む（マッシュアップ）• 連携するサービスの数だけアプリが出来上がる• インストールが仇となる

facebook+

DLNA コントローラ

Twitter+

DLNA コントローラ

YouTube+

DLNA コントローラ

既存 Web サービスと DLNA との融合(cont)

• ブラウザ + Web OS アプリのアプローチ– Web OS にブラウザ連携の API を準備– コンテンツ検索は、従来通りブラウザで– ブラウザからシームレスにテレビへ Air– 自由に連携サービスを拡充可能

DLNAコントローラw/ Web OS API

facebook

Twitter

YouTube…

共通の API で連携

Demo

アーキテクチャ説明• Web OS と Web apps を WebSocket で接続– WebSocket – DLNA のプロトコルゲートウェイ

Browser app

WebSocket I/F

ServiceDiscovery

Cross origin SOAP

ReverseProxy

Web OS Apps

[ 参考 ]Web Intents

• Web アプリ間を連携する共通インタフェース仕様

• 昨年度、一旦 Dead となったが、検討を再会する事が先週アナウンスされた– Scope をしぼることで、 Dead に至った問題点

を回避する模様• 詳しくは ML(public-web-intents) をチェック– http://lists.w3.org/Archives/Public/public-web-

intents/2013Mar/0000.html

まとめ• Web の可能性を拓く Web OS• Tizen mobile, Firefox OS, Chrome OS ….• DLNA のデモ。ブラウザと Web OS との連

携による、再構築へのスパイス。新たなUX。

Thank you!!

@komasshu