Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5概要、コードサンプル

3,580 views

Published on

HTML5機能の紹介といくつかのコードサンプル。

Published in: Technology
  • Sex in your area is here: ♥♥♥ http://bit.ly/2F90ZZC ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ❤❤❤ http://bit.ly/2F90ZZC ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ...................................ALL FOR EBOOKS................................................. Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ...................................ALL FOR EBOOKS................................................. Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

HTML5概要、コードサンプル

  1. 1. HTML5HTML5 概要、概要、 コードサンプルコードサンプル デイビス ダニエルデイビス ダニエル W3C/KeioW3C/Keio ddavis@w3.orgddavis@w3.org
  2. 2. WebWeb とはとは HTML (W3C) コンテンツ CSS (W3C) デザイン JavaScript (Ecma) プログラム
  3. 3. HTML5HTML5 とはとは HTML5HTML5 HTML4HTML4 XHTMLXHTML
  4. 4. WebWeb ページの構成ページの構成 : HTML4 → HTML5: HTML4 → HTML5
  5. 5. 良い標準良い標準 == グローバルグローバル
  6. 6. 良い標準良い標準 == インターオペラビリティ(相互動作インターオペラビリティ(相互動作 性)性)
  7. 7. 今までの今までの WebWeb との違いとの違い
  8. 8. ● より簡単より簡単 ● より早いより早い ● よりフレキシブルよりフレキシブル
  9. 9. getUserMediagetUserMedia カメラとマイクのデータ取得カメラとマイクのデータ取得
  10. 10. getUserMediagetUserMedia カメラとマイクのデータ取得カメラとマイクのデータ取得 navigator.getUserMedia({video: true}, successCallback, errorCallback); function successCallback(stream) { video.src = (window.URL && window.URL.createObjectURL(stream)) || stream; video.play(); }
  11. 11. Geolocation APIGeolocation API 位置情報位置情報
  12. 12. navigator.geolocation.getCurrentPosition( showMap); function showMap(position) { // position オブジェクト : // (position.coords.latitude, // position.coords.longitude) } Geolocation APIGeolocation API 位置情報位置情報
  13. 13. Device Orientation APIDevice Orientation API デバイスオリエンテーションデバイスオリエンテーション ● 加速度センサー加速度センサー ● 方向センサー方向センサー
  14. 14. window.ondevicemotion = function(event) { // event.acceleration オブジェクト : // {x: 0, y: 0, z: -9.81} // event.rotationRate オブジェクト : // {alpha: 0, beta: 0, gamma: -v/r*180/pi} } Device Orientation APIDevice Orientation API デバイスオリエンテーションデバイスオリエンテーション ● ●
  15. 15. System Information APISystem Information API システム情報システム情報 ● 気温気温 ● 気圧気圧 ● 湿度湿度 ● 騒音騒音 ● 距離間距離間
  16. 16. System Information APISystem Information API システム情報システム情報 navigator.system.monitor("Thermal", success); function success(thermal) { // thermal オブジェクト : // thermal.state = 気温 }
  17. 17. WebSocket API, WebRTCWebSocket API, WebRTC ウェブソケット、ウェブウェブソケット、ウェブ RTCRTC
  18. 18. WebSocket API, Server Sent EventsWebSocket API, Server Sent Events ウェブソケット、サーバセントイベントウェブソケット、サーバセントイベント // ウェブソケットの作成 var socket = new WebSocket('ws://example.com/update'); socket.onopen = function () { // 接続する時に実効するコード setInterval(function() { if (socket.bufferedAmount == 0) socket.send(getUpdateData()); }, 50); };
  19. 19. Offline StorageOffline Storage オフラインストレージオフラインストレージ ● ServiceWorkerServiceWorker (ファイル、コード)(ファイル、コード) ● localStoragelocalStorage (文字列)(文字列) ● IndexedDBIndexedDB (データベース)(データベース)
  20. 20. Offline StorageOffline Storage オフラインストレージオフラインストレージ // オンラインの場合は「 true 」 : var online = navigator.onLine; // localStorage オブジェクトでの保存 : window.localStorage["status"] = " 移動 中 ";
  21. 21. Responsive ImagesResponsive Images レスポンシブイメージレスポンシブイメージ ● <picture><picture> 要素要素 ● srcsetsrcset 属性属性
  22. 22. Responsive ImagesResponsive Images レスポンシブイメージレスポンシブイメージ <picture> <source media="(min-width: 45em)" srcset="large.jpg"> <source media="(min-width: 18em)" srcset="med.jpg"> <img src="small.jpg" alt="Cute dog."> </picture>
  23. 23. スマートカースマートカー
  24. 24. ウェブソケット オフライン ストレージ 位置情報、デバイスオリエンテーション、システム情報
  25. 25. SHARESHARE USE STOREUSE STORE
  26. 26. Nike+Nike+ の車版が可能になるの車版が可能になる
  27. 27. スマート家電スマート家電
  28. 28. youtu.be/rP-L4OqO07Uyoutu.be/rP-L4OqO07U
  29. 29. Thank you!Thank you! デイビス ダニエルデイビス ダニエル W3C/KeioW3C/Keio ddavis@w3.orgddavis@w3.org

×