1. HTML5: API @ourmaninjapan

2. 1899 3. 2000 4. 2000 Drive Thru 5. 2000 6. 2000 7. 2000 8. 2000 9. 2000 10. 2000 11. 2000 Skype 12. The Web HTML5 Web of Things 13. 14. HTML5: HTML HTML4 XHTML HTML5 15. HTML (W3C) CSS (W3C) JavaScript (Ecma) SVG (W3C)WebGL (Khronos) 16. Web API 17. Geolocation API caniuse.com/#feat=geolocation 18. Geolocation API navigator.geolocation.getCurrentPosition( showMap); function showMap(position) { // position : // (position.coords.latitude, // position.coords.longitude) } 19. Device Orientation APIcaniuse.com/#feat=deviceorientation 20. Device Orientation APIwindow.ondevicemotion = function(event) { // event.acceleration : // {x: 0, y: 0, z: -9.81} // event.rotationRate : // {alpha: 0, beta: 0, gamma: -v/r*180/pi} } 21. System Information API 22. System Information API navigator.system.monitor("Thermal", success); function success(thermal) { // thermal : // thermal.state = } 23. GetUserMedia 24. GetUserMedia // if (navigator.getUserMedia) { navigator.getUserMedia({video: true}, successCallback, errorCallback); } else {}// console.log('Not supported.'); 25. WebSocket API, WebRTC caniuse.com/#feat=websockets 26. // var socket = new WebSocket('ws://example.com/update'); socket.onopen = function () { // setInterval(function() { if (socket.bufferedAmount == 0) socket.send(getUpdateData()); }, 50); };WebSocket API, WebRTC 27. Offline Storage caniuse.com/#feat=offline-apps caniuse.com/#feat=namevalue-storage Application Cache localStorage IndexedDB 28. Offline Storage // true : var online = navigator.onLine; // localStorage : window.localStorage["status"] = " "; 29. 30. 31. 32. Logitech MX Air / Hillcrest Labs Loop Pointer 33. Sony / Google TV 34. Opera / Pioneer 35. ? 36. Web 37. 38. 39. 40. 2014 41. Nike+ 42. 43. UI 44. Web 45. One more thing... 46. JS PromisesHTML Web ComponentsCSS Shapes, Masking,Blending 47. HTML5: API @ourmaninjapan