ブラウザから飛び出すWeb 技術と HTML5

日本オープン・ウェブ・アソシエーション 理事若狭 正生

自己紹介若狭　正生（わかさ　まさお）@wks

• 日本オープン・ウェブ・アソシエーション 理事

• html5j スタッフ / html5j TV 部 部長 / OSGeo 財団日本支部 運営委員 / CodeForJapan コアグループ所属 / アカデミーキャンプ スタッフ

• 毎月 100 人規模の勉強会を開催• 11/30 に 2000 人規模のカンファレンスを

開催• W3C や総務省と連動して活動をしている

html5j とは？

2013 年 5 月 28 日第 39 回 HTML5 とか勉強会 + 日本 Android の会 2013 年 5 月定例会

Android の会と共催

HTML5 Japan Cup やります

最優秀賞（ 1 作品） : 100 万円優秀賞 : （ 3 作品） 20 万円

http://5jcup.org/

アジェンダ

–　 Web 技術の表現力–　通信技術の進化–　ブラウザから飛び出す Web 技

術

※ 注意

今回のプレゼンでの Web の技術とはJavaScript や HTML 、通信など ”元々ブラウザ上で動いていたもの” という意味で使っています。ちょっと表現が極端な部分がありますのでご了承ください。

Web 技術の表現力

HTML5 など仕様による表現方法が強化されている。レイアウトも含め更新性が高い。デザイナとプログラマの境目が、いい意味で曖昧で共存している。

Web 技術の範囲 ( 数年前 )

OS

ブラウザ

Web 技術アプリ

コンテンツ

Web 技術の範囲 ( 現状 )

OS

ブラウザ

Web 技術

アプリ

コンテンツ

HTML5 の機能

SemanticsOffline & StorageMultimedia3D, Graphics & EffectsConnectivityDevice AccessPerformance & IntegrationStyling (CSS3)

Offline & Storage

• Application Cache … オフラインアプリケーション• Web Storage … 簡易易ローカルストレージ• Indexed Database … KVS 型のローカルデータベース• File APIs … ファイルの読み書き• File System API … アプリから利利⽤⽤できるファイ

ル領領域• online/offline events … オン / オフライン状態の把握

Offline & Storage

https://drive.google.com/

Offline & Storage

http://html5-demos.appspot.com/static/navigator.onLine.html

Multimedia

• video/audio … 動画 / ⾳⾳楽再生生• WebVTT … 字幕・トラック情報を追加• Web Audio API … ⾳⾳声処理理・合成• HTML Media Capture … メディアの取込み

Multimedia

http://craftymind.com/factory/html5video/CanvasVideo.html

Multimedia

http://www.htmlfivewow.com/demos/audio-visualizer/index.html

Graphics, 3D & Effects

• Canvas … 2D グラフィックス• WebGL … 3D グラフィックス• SVG … ベクターグラフィックス

Graphics, 3D & Effects

http://helloracer.com/webgl/

Graphics, 3D & Effects

http://cyberjapandata.gsi.go.jp/3d/http://headlines.yahoo.co.jp/videonews/fnn?a=20140320-00000120-fnn-soci

Graphics, 3D & Effects

http://www.youtube.com/watch?v=cWIRUaR9G4w

Realtime / Connectivity

• WebSocket … リアルタイム双方方向通信• Server Sent Events … ‑ サーバープッシュ可能な通信（ロン

グポーリング /Comet を仕様化）• Web Messaging … Web ページ間のメッセージ交換• XMLHttpRequest Level2 … クロスドメイン通信やバイナリ

データが送れるように• Notifications … デスクトップに通知• WebRTC … ⾳声 / 動画でリアルタイムコミュニケーショ

ンを行う

Realtime / Connectivity

https://appear.in/abchtml5j

Realtime / Connectivity

https://app.html5experts.jp/manga/

Realtime / Connectivity

http://my-hi.net/

Device Access

• Geolocation API … GPS 情報を取得• Web Speech API… ⾳声入力• Device Orientation … デバイスの向きや傾きを取

得• Contacts API … アドレス帳へのアクセス• Calendar API … カレンダー情報の取得• Battery Status API … バッテリーの状態を取得• Network Information API … 通信環境の情報を取得• USB, Bluetooth など

Device Access

http://www.mrdoob.com/projects/chromeexperiments/google-gravity/

Device Access

https://www.google.com/intl/ja/chrome/demos/speech.html

Styling (CSS3)

• CSS3 Selectors … :first child/:nth child(odd)‑ ‑ など、便利な擬似クラスなどが増えた

• border radius … ‑ 角が丸く！• text shadow/box shadow … ‑ ‑ 影がつく！• gradient … グラデーション• Webfonts … 外部フォントを扱えるように• Transforms … 変形• Transitions/Animations … CSS だけでアニメー

ションが可能

Styling (CSS3)

http://slides.html5rocks.com/#rounded-corners

Styling (CSS3)

http://lea.verou.me/css3patterns/

実装状況• ただし、すべての機能がすべてのブラウザ

で実装されてるとは限りません。

http://caniuse.com/

通信技術の進化

TCP/IP が考えられて長く経つが、未だ現役で昔と変わらない使われ方をしている。Web が進化しても基盤が古いままという矛盾。。そこも変わりつつある。

HTTP/1.1

Browser Server

つないでいいですか？

いいですよ！これください。

どうぞ！届きました！！

では切ります。

SPDY

• １回に１つではなく、１回のコネクション中に大量にデータを入れることで、オーバーヘッドを削減

• HTTP2.0 のベースとして利⽤されているつないでいいですか？

いいですよ！これとこれとこれと ..

どうぞ！届きました！！

では切ります。

Websocket

• １回つないだらそれを切断せず使い続ける• チャットのような双方向通信などに利⽤される

つないでいいですか？いいですよ！

これどうぞ

これどうぞ

終わりました！

では切ります。

これどうぞ

これどうぞ

WebRTC

• ブラウザ間で P2P の通信ができる

Browser Browser

Server

Browser Browser

Server

Browser Server

MPTCP

• 複数の回線を使って通信を行う• iOS7 ではサポート済み

Wi-fi

3G

放送波を利⽤した通信• V-Low / ハイブリッドキャスト ( データ放

送 )• マルチキャスト配信による輻輳が無い• 大量アクセスのクッションとして利⽤

データ

映像

ブラウザから飛び出す Web 技術

Web 技術＝ブラウザ上でアクセスするもの。そういうものだったはず。だが、今やブラウザの垣根を越えて広範囲で使われ始めている。

• Windows8アプリ• ChromeApps• FirefoxOS• Tizen• スマートフォンアプリ (PhoneGap等 ) and more..

アプリケーションとWeb技術

アプリケーションとWeb技術

Windows8アプリ

参考 http://www.atmarkit.co.jp/fdotnet/special/ie10review01/ie10review01_01.html

アプリケーションとWeb技術

FirefoxOS

ネイティブアプリ (例えば電話アプリ )でさえもWeb技術で作られている。

• Nintendo Web Framework• Unity ( WiiU & Playstation & Xbox ) and more..

ゲーム機と Web 技術

ゲーム機と Web 技術• Nintendo Web Framework

参考 http://www.4gamer.net/games/032/G003263/20130328113/

カーナビとWeb技術

• Apple• 富士通テン• Tizen IVI• Genivi• Webinos• QNX and more..

カーナビとWeb技術

富士通テン

参考 http://www.nikkan.co.jp/news/nkx0420131025beai.html

カーナビとWeb技術

Tizen IVI

参考 https://www.youtube.com/watch?v=HN2qL_meAek

テレビとWeb技術

• Hybridcast• SmartTV• OperaTV and more..

テレビとWeb技術

Sony BRAVIA (Opera TV Store)

参考 http://www.sony-mea.com/TVP-LCD-TV/feature/Sony-Entertainment-Network/498176

テレビとWeb技術

Hybridcast

http://www.nhk.or.jp/hybridcast/online/http://www.huffingtonpost.jp/osamu-sakai/3_10_b_4894449.html

電子書籍とWeb技術

• EPUB• Kindle Cloud Reader• Kobo Cloud Reader

電子書籍とWeb技術

• EPUB• Kindle Cloud Reader• Kobo Cloud Reader

ブラウザがそのまま電子書籍として使える。Web技術が使えるデバイスとならば連動と利便性を考え利用されている。-> PCで 10ページまで見たら スマートフォンで自動的に 10ページから読める

遠隔操作とWeb技術

• LiveShell• ガラポン TV• ChromeCast

• LiveShell• ガラポン TV• ChromeCast

遠隔操作とWeb技術

本体にはほぼ操作する部分が存在しないリアルタイム通信をWebの標準技術のWebsocketやWebRTCを用いて実装-> UI部分は容易に作れるWeb画面を使う-> スマートフォンなどの機器からも操作可能

サーバサイドでの Web 技術• Node.js

サーバサイドも JavaScriptで開発Websocket容易に利用したり、ブラウザと相性が非常によく出来ている。

自作組込み機器での Web 技術• IRKit• Raspberry Pi + Node.js

自作組込み機器での Web 技術• サーバ化させ XHR や WebSocket で接続し

いろんな物をコントロール• Raspberry Pi と BLE をつなげたりすると、

リアルな物から簡単にブラウザにイベントを送れる。 http://qiita.com/Morikuma_Works/items/c2899e548da1c5e2c28e

まとめ• Web技術がWebだけで利用するだけのものでもなくなっている。

• Web技術をベースとした JavaScriptやHTMLの一つの経験が、そのままアプリや組込みなど幅広く、かつ普通に使える時代に。

• 今後、気付かないうちにブラウザベースであったWeb 技術を使っている事になっていくのではないか？