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

2,714 views

Published on

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

Published in: Technology

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

  1. 1. ブラウザから飛び出す Web技術とHTML5 日本オープン・ウェブ・アソシエーション 理 事 若狭 正生
  2. 2. 自己紹介 若狭 正生(わかさ まさお) @wks • 日本オープン・ウェブ・アソシエーショ ン 理事 • html5jスタッフ / html5j TV部 部長 / OSGeo 財団日本支部 運営委員 / CodeForJapan コ アグループ所属 / アカデミーキャンプ ス タッフ
  3. 3. • 毎月100人規模の勉強会を開催 • 11/30 に 2000人規模のカンファレンスを開 催 • W3Cや総務省と連動して活動をしている html5jとは?
  4. 4. 2013年5月28日 第39回 HTML5とか勉強会+日本Androidの会 2013年5月定例会 Androidの会と共催
  5. 5. HTML5 Japan Cupやります 最優秀賞(1作品): 100万円 優秀賞:(3作品) 20万円 http://5jcup.org/
  6. 6. アジェンダ – Web技術の表現力 – 通信技術の進化 – ブラウザから飛び出すWeb技 術
  7. 7. ※注意 今回のプレゼンでのWebの技術とは JavaScriptやHTML、通信など ”元々ブラウ ザ上で動いていたもの” という意味で 使っています。 ちょっと表現が極端な部分がありますの でご了承ください。
  8. 8. Web技術の表現力 HTML5など仕様による表現方法が強化され ている。 レイアウトも含め更新性が高い。 デザイナとプログラマの境目が、いい意味 で曖昧で共存している。
  9. 9. Web技術の範囲 (数年前) OS ブラウザ Web技術 アプリ コンテンツ
  10. 10. Web技術の範囲 (現状) OS ブラウザ Web技術 アプリ コンテンツ
  11. 11. HTML5の機能 Semantics Offline & Storage Multimedia 3D, Graphics & Effects Connectivity Device Access Performance & Integration Styling (CSS3)
  12. 12. Offline & Storage • Application Cache … オフラインアプリケーション • Web Storage … 簡易易ローカルストレージ • Indexed Database … KVS型のローカルデータベー ス • File APIs … ファイルの読み書き • File System API … アプリから利利⽤用できるファ イル領領域 • online/offline events … オン/オフライン状態の把 握
  13. 13. Offline & Storage https://drive.google.com/
  14. 14. Offline & Storage http://html5-demos.appspot.com/static/navigator.onLine.html
  15. 15. Multimedia • video/audio … 動画/⽤音楽再⽤生 • WebVTT … 字幕・トラック情報を追加 • Web Audio API … ⽤音声処理理・合成 • HTML Media Capture … メディアの取込み
  16. 16. Multimedia http://craftymind.com/factory/html5video/CanvasVideo.html
  17. 17. Multimedia http://www.htmlfivewow.com/demos/audio-visualizer/index.html
  18. 18. Graphics, 3D & Effects • Canvas … 2Dグラフィックス • WebGL … 3Dグラフィックス • SVG … ベクターグラフィックス
  19. 19. Graphics, 3D & Effects http://helloracer.com/webgl/
  20. 20. Graphics, 3D & Effects http://cyberjapandata.gsi.go.jp/3d/ http://headlines.yahoo.co.jp/videonews/fnn?a=20140320-00000120-fnn-soci
  21. 21. Graphics, 3D & Effects http://www.youtube.com/watch?v=cWIRUaR9G4w
  22. 22. Realtime / Connectivity • WebSocket … リアルタイム双⽤方向通信 • Server-Sent Events … サーバープッシュ可能な通信(ロン グポーリング/Cometを仕様化) • Web Messaging … Webページ間のメッセージ交換 • XMLHttpRequest Level2 … クロスドメイン通信やバイナリ データが送れるように • Notifications … デスクトップに通知 • WebRTC … 音声/動画でリアルタイムコミュニケーション を行う
  23. 23. Realtime / Connectivity https://appear.in/abchtml5j
  24. 24. Realtime / Connectivity https://app.html5experts.jp/manga/
  25. 25. Realtime / Connectivity http://my-hi.net/
  26. 26. Device Access • Geolocation API … GPS情報を取得 • Web Speech API… 音声入力 • Device Orientation …デバイスの向きや傾きを取得 • Contacts API … アドレス帳へのアクセス • Calendar API … カレンダー情報の取得 • Battery Status API … バッテリーの状態を取得 • Network Information API … 通信環境の情報を取得 • USB, Bluetooth など
  27. 27. Device Access http://www.mrdoob.com/projects/chromeexperiments/google-gravity/
  28. 28. Device Access https://www.google.com/intl/ja/chrome/demos/speech.html
  29. 29. Styling (CSS3) • CSS3 Selectors … :first-child/:nth-child(odd)など、 便利な擬似クラスなどが増えた • border-radius … 角が丸く! • text-shadow/box-shadow … 影がつく! • gradient … グラデーション • Webfonts … 外部フォントを扱えるように • Transforms … 変形 • Transitions/Animations … CSSだけでアニメー ションが可能
  30. 30. Styling (CSS3) http://slides.html5rocks.com/#rounded-corners
  31. 31. Styling (CSS3) http://lea.verou.me/css3patterns/
  32. 32. 実装状況 • ただし、すべての機能がすべてのブラウ ザで実装されてるとは限りません。 http://caniuse.com/
  33. 33. 通信技術の進化 TCP/IPが考えられて長く経つが、未だ現 役で昔と変わらない使われ方をしている。 Webが進化しても基盤が古いままという 矛盾。。 そこも変わりつつある。
  34. 34. HTTP/1.1 Browser Server つないでいいですか? いいですよ! これください。 どうぞ! 届きました!! では切ります。
  35. 35. SPDY • 1回に1つではなく、1回のコネクション中に 大量にデータを入れることで、オーバーヘッド を削減 • HTTP2.0のベースとして利用されている つないでいいですか? いいですよ! これとこれとこれと.. どうぞ! 届きました!! では切ります。
  36. 36. Websocket • 1回つないだらそれを切断せず使い続ける • チャットのような双方向通信などに利用される つないでいいですか? いいですよ! これどうぞ これどうぞ 終わりました! では切ります。 これどうぞ これどうぞ
  37. 37. WebRTC • ブラウザ間でP2Pの通信ができる Browser Browser Server Browser Browser Server
  38. 38. Browser Server MPTCP • 複数の回線を使って通信を行う • iOS7ではサポート済み Wi-fi 3G
  39. 39. 放送波を利用した通信 • V-Low / ハイブリッドキャスト(データ放 送) • マルチキャスト配信による輻輳が無い • 大量アクセスのクッションとして利用 データ 映像
  40. 40. ブラウザから飛び出すWeb技術 Web技術=ブラウザ上でアクセスするも の。 そういうものだったはず。 だが、今やブラウザの垣根を越えて広範 囲で使われ始めている。
  41. 41. • Windows8アプリ • ChromeApps • FirefoxOS • Tizen • スマートフォンアプリ(PhoneGap等) and more.. アプリケーションとWeb技術
  42. 42. アプリケーションとWeb技術 Windows8アプリ 参考 http://www.atmarkit.co.jp/fdotnet/special/ie10review01/ie10review01_01.html
  43. 43. アプリケーションとWeb技術 FirefoxOS ネイティブアプリ(例えば 電話アプリ)でさえも Web技術で作られている。
  44. 44. • Nintendo Web Framework • Unity ( WiiU & Playstation & Xbox ) and more.. ゲーム機とWeb技術
  45. 45. ゲーム機とWeb技術 • Nintendo Web Framework 参考 http://www.4gamer.net/games/032/G003263/20130328113/
  46. 46. カーナビとWeb技術 • Apple • 富士通テン • Tizen IVI • Genivi • Webinos • QNX and more..
  47. 47. カーナビとWeb技術 富士通テン 参考 http://www.nikkan.co.jp/news/nkx0420131025beai.html
  48. 48. カーナビとWeb技術 Tizen IVI 参考 https://www.youtube.com/watch?v=HN2qL_meAek
  49. 49. テレビとWeb技術 • Hybridcast • SmartTV • OperaTV and more..
  50. 50. テレビとWeb技術 Sony BRAVIA (Opera TV Store) 参考 http://www.sony-mea.com/TVP-LCD-TV/feature/Sony-Entertainment-Network/498176
  51. 51. テレビとWeb技術 Hybridcast http://www.nhk.or.jp/hybridcast/online/ http://www.huffingtonpost.jp/osamu-sakai/3_10_b_4894449.html
  52. 52. 電子書籍とWeb技術 • EPUB • Kindle Cloud Reader • Kobo Cloud Reader
  53. 53. 電子書籍とWeb技術 • EPUB • Kindle Cloud Reader • Kobo Cloud Reader ブラウザがそのまま電子書籍として使える。 Web技術が使えるデバイスとならば連動と利便 性を考え利用されている。 -> PCで10ページまで見たら スマートフォンで自動的に10ページから読める
  54. 54. 遠隔操作とWeb技術 • LiveShell • ガラポンTV • ChromeCast
  55. 55. • LiveShell • ガラポンTV • ChromeCast 遠隔操作とWeb技術 本体にはほぼ操作する部分が存在しない リアルタイム通信をWebの標準技術のWebsocket やWebRTCを用いて実装 -> UI部分は容易に作れるWeb画面を使う -> スマートフォンなどの機器からも操作可能
  56. 56. サーバサイドでのWeb技術 • Node.js サーバサイドもJavaScriptで開発 Websocket容易に利用したり、ブラウザと相性が 非常によく出来ている。
  57. 57. 自作組込み機器でのWeb技術 • IRKit • Raspberry Pi + Node.js
  58. 58. 自作組込み機器でのWeb技術 • サーバ化させXHRやWebSocketで接続しい ろんな物をコントロール • Raspberry PiとBLEをつなげたりすると、リ アルな物から簡単にブラウザにイベント を送れる。 http://qiita.com/Morikuma_Works/items/c2899e548da1c5e2c28e
  59. 59. まとめ

×