Your SlideShare is downloading. ×
HTML5概要、コードサンプル
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

HTML5概要、コードサンプル

2,028
views

Published on

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

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

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,028
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • http://media.chikuyonok.ru/ambilight/
  • http://appear.in
    http://savanna.webcrow.jp/pw/index.html
  • http://appear.in
    http://savanna.webcrow.jp/pw/index.html
  • http://daniemon.com/tech/test/car/
  • http://appear.in
  • Transcript

    • 1. HTML5HTML5 概要、概要、 コードサンプルコードサンプル デイビス ダニエルデイビス ダニエル W3C/KeioW3C/Keio ddavis@w3.orgddavis@w3.org
    • 2. WebWeb とはとは HTML (W3C) コンテンツ CSS (W3C) デザイン JavaScript (Ecma) プログラム
    • 3. HTML5HTML5 とはとは HTML5HTML5 HTML4HTML4 XHTMLXHTML
    • 4. WebWeb ページの構成ページの構成 : HTML4 → HTML5: HTML4 → HTML5
    • 5. 良い標準良い標準 == グローバルグローバル
    • 6. 良い標準良い標準 == インターオペラビリティ(相互動作インターオペラビリティ(相互動作 性)性)
    • 7. 今までの今までの WebWeb との違いとの違い
    • 8. ● より簡単より簡単 ● より早いより早い ● よりフレキシブルよりフレキシブル
    • 9. getUserMediagetUserMedia カメラとマイクのデータ取得カメラとマイクのデータ取得
    • 10. getUserMediagetUserMedia カメラとマイクのデータ取得カメラとマイクのデータ取得 navigator.getUserMedia({video: true}, successCallback, errorCallback); function successCallback(stream) { video.src = (window.URL && window.URL.createObjectURL(stream)) || stream; video.play(); }
    • 11. Geolocation APIGeolocation API 位置情報位置情報
    • 12. navigator.geolocation.getCurrentPosition( showMap); function showMap(position) { // position オブジェクト : // (position.coords.latitude, // position.coords.longitude) } Geolocation APIGeolocation API 位置情報位置情報
    • 13. Device Orientation APIDevice Orientation API デバイスオリエンテーションデバイスオリエンテーション ● 加速度センサー加速度センサー ● 方向センサー方向センサー
    • 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. System Information APISystem Information API システム情報システム情報 ● 気温気温 ● 気圧気圧 ● 湿度湿度 ● 騒音騒音 ● 距離間距離間
    • 16. System Information APISystem Information API システム情報システム情報 navigator.system.monitor("Thermal", success); function success(thermal) { // thermal オブジェクト : // thermal.state = 気温 }
    • 17. WebSocket API, WebRTCWebSocket API, WebRTC ウェブソケット、ウェブウェブソケット、ウェブ RTCRTC
    • 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. Offline StorageOffline Storage オフラインストレージオフラインストレージ ● ServiceWorkerServiceWorker (ファイル、コード)(ファイル、コード) ● localStoragelocalStorage (文字列)(文字列) ● IndexedDBIndexedDB (データベース)(データベース)
    • 20. Offline StorageOffline Storage オフラインストレージオフラインストレージ // オンラインの場合は「 true 」 : var online = navigator.onLine; // localStorage オブジェクトでの保存 : window.localStorage["status"] = " 移動 中 ";
    • 21. Responsive ImagesResponsive Images レスポンシブイメージレスポンシブイメージ ● <picture><picture> 要素要素 ● srcsetsrcset 属性属性
    • 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. スマートカースマートカー
    • 24. ウェブソケット オフライン ストレージ 位置情報、デバイスオリエンテーション、システム情報
    • 25. SHARESHARE USE STOREUSE STORE
    • 26. Nike+Nike+ の車版が可能になるの車版が可能になる
    • 27. スマート家電スマート家電
    • 28. youtu.be/rP-L4OqO07Uyoutu.be/rP-L4OqO07U
    • 29. Thank you!Thank you! デイビス ダニエルデイビス ダニエル W3C/KeioW3C/Keio ddavis@w3.orgddavis@w3.org