Android Bazaar and Conference 2014 Spring 開発(秋葉原ダイビル5F 5C T4 ブラウザから飛び出すWeb技術とHTML5【html5jコラボセッション】

1. ブラウザから飛び出す
Web技術とHTML5
日本オープン・ウェブ・アソシエーション 理
事
若狭 正生

2. 自己紹介
若狭 正生（わかさ まさお）
@wks
• 日本オープン・ウェブ・アソシエーショ
ン 理事
• html5jスタッフ / html5j TV部 部長 / OSGeo
財団日本支部 運営委員 / CodeForJapan コ
アグループ所属 / アカデミーキャンプ ス
タッフ

3. • 毎月100人規模の勉強会を開催
• 11/30 に 2000人規模のカンファレンスを開
催
• W3Cや総務省と連動して活動をしている
html5jとは？

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

5. HTML5 Japan Cupやります
最優秀賞（1作品）: 100万円
優秀賞:（3作品） 20万円
http://5jcup.org/

6. アジェンダ
– Web技術の表現力
– 通信技術の進化
– ブラウザから飛び出すWeb技
術

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

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

9. Web技術の範囲 (数年前)
OS
ブラウザ
Web技術
アプリ
コンテンツ

10. Web技術の範囲 (現状)
OS
ブラウザ
Web技術
アプリ
コンテンツ

11. HTML5の機能
Semantics
Offline & Storage
Multimedia
3D, Graphics & Effects
Connectivity
Device Access
Performance & Integration
Styling (CSS3)

12. Offline & Storage
• Application Cache … オフラインアプリケーション
• Web Storage … 簡易易ローカルストレージ
• Indexed Database … KVS型のローカルデータベー
ス
• File APIs … ファイルの読み書き
• File System API … アプリから利利⽤用できるファ
イル領領域
• online/offline events … オン/オフライン状態の把
握

13. Offline & Storage
https://drive.google.com/

14. Offline & Storage
http://html5-demos.appspot.com/static/navigator.onLine.html

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

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

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

18. Graphics, 3D & Effects
• Canvas … 2Dグラフィックス
• WebGL … 3Dグラフィックス
• SVG … ベクターグラフィックス

19. Graphics, 3D & Effects
http://helloracer.com/webgl/

20. Graphics, 3D & Effects
http://cyberjapandata.gsi.go.jp/3d/
http://headlines.yahoo.co.jp/videonews/fnn?a=20140320-00000120-fnn-soci

21. Graphics, 3D & Effects
http://www.youtube.com/watch?v=cWIRUaR9G4w

22. Realtime / Connectivity
• WebSocket … リアルタイム双⽤方向通信
• Server-Sent Events … サーバープッシュ可能な通信（ロン
グポーリング/Cometを仕様化）
• Web Messaging … Webページ間のメッセージ交換
• XMLHttpRequest Level2 … クロスドメイン通信やバイナリ
データが送れるように
• Notifications … デスクトップに通知
• WebRTC … 音声/動画でリアルタイムコミュニケーション
を行う

23. Realtime / Connectivity
https://appear.in/abchtml5j

24. Realtime / Connectivity
https://app.html5experts.jp/manga/

25. Realtime / Connectivity
http://my-hi.net/

26. Device Access
• Geolocation API … GPS情報を取得
• Web Speech API… 音声入力
• Device Orientation …デバイスの向きや傾きを取得
• Contacts API … アドレス帳へのアクセス
• Calendar API … カレンダー情報の取得
• Battery Status API … バッテリーの状態を取得
• Network Information API … 通信環境の情報を取得
• USB, Bluetooth など

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

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

29. Styling (CSS3)
• CSS3 Selectors … :first-child/:nth-child(odd)など、
便利な擬似クラスなどが増えた
• border-radius … 角が丸く！
• text-shadow/box-shadow … 影がつく！
• gradient … グラデーション
• Webfonts … 外部フォントを扱えるように
• Transforms … 変形
• Transitions/Animations … CSSだけでアニメー
ションが可能

30. Styling (CSS3)
http://slides.html5rocks.com/#rounded-corners

31. Styling (CSS3)
http://lea.verou.me/css3patterns/

32. 実装状況
• ただし、すべての機能がすべてのブラウ
ザで実装されてるとは限りません。
http://caniuse.com/

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

34. HTTP/1.1
Browser Server
つないでいいですか？
いいですよ！
これください。
どうぞ！
届きました！！
では切ります。

35. SPDY
• １回に１つではなく、１回のコネクション中に
大量にデータを入れることで、オーバーヘッド
を削減
• HTTP2.0のベースとして利用されている
つないでいいですか？
いいですよ！
これとこれとこれと..
どうぞ！
届きました！！
では切ります。

36. Websocket
• １回つないだらそれを切断せず使い続ける
• チャットのような双方向通信などに利用される
つないでいいですか？
いいですよ！
これどうぞ
これどうぞ
終わりました！
では切ります。
これどうぞ
これどうぞ

37. WebRTC
• ブラウザ間でP2Pの通信ができる
Browser Browser
Server
Browser Browser
Server

38. Browser Server
MPTCP
• 複数の回線を使って通信を行う
• iOS7ではサポート済み
Wi-fi
3G

39. 放送波を利用した通信
• V-Low / ハイブリッドキャスト(データ放
送)
• マルチキャスト配信による輻輳が無い
• 大量アクセスのクッションとして利用
データ
映像

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

41. • Windows8アプリ
• ChromeApps
• FirefoxOS
• Tizen
• スマートフォンアプリ(PhoneGap等)
and more..
アプリケーションとWeb技術

42. アプリケーションとWeb技術
Windows8アプリ
参考 http://www.atmarkit.co.jp/fdotnet/special/ie10review01/ie10review01_01.html

43. アプリケーションとWeb技術
FirefoxOS
ネイティブアプリ(例えば
電話アプリ)でさえも
Web技術で作られている。

44. • Nintendo Web Framework
• Unity ( WiiU & Playstation & Xbox )
and more..
ゲーム機とWeb技術

45. ゲーム機とWeb技術
• Nintendo Web Framework
参考 http://www.4gamer.net/games/032/G003263/20130328113/

46. カーナビとWeb技術
• Apple
• 富士通テン
• Tizen IVI
• Genivi
• Webinos
• QNX
and more..

47. カーナビとWeb技術
富士通テン
参考 http://www.nikkan.co.jp/news/nkx0420131025beai.html

48. カーナビとWeb技術
Tizen IVI
参考 https://www.youtube.com/watch?v=HN2qL_meAek

49. テレビとWeb技術
• Hybridcast
• SmartTV
• OperaTV
and more..

50. テレビとWeb技術
Sony BRAVIA (Opera TV Store)
参考 http://www.sony-mea.com/TVP-LCD-TV/feature/Sony-Entertainment-Network/498176

51. テレビとWeb技術
Hybridcast
http://www.nhk.or.jp/hybridcast/online/
http://www.huffingtonpost.jp/osamu-sakai/3_10_b_4894449.html

52. 電子書籍とWeb技術
• EPUB
• Kindle Cloud Reader
• Kobo Cloud Reader

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

54. 遠隔操作とWeb技術
• LiveShell
• ガラポンTV
• ChromeCast

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

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

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

58. 自作組込み機器でのWeb技術
• サーバ化させXHRやWebSocketで接続しい
ろんな物をコントロール
• Raspberry PiとBLEをつなげたりすると、リ
アルな物から簡単にブラウザにイベント
を送れる。
http://qiita.com/Morikuma_Works/items/c2899e548da1c5e2c28e

59. まとめ