html5の基礎と応用 ~open web platform~ websocket / webrtc / web audio api / webgl 第三版
TRANSCRIPT
- 1. HTML5 Open Web Platform WebSocket / WebRTC / Web Audio API / WebGL 2014/06/27 NTT http://www.ntt-at.co.jp/
2. N O T IC E N O T IC E 3. HTML5 HTML5API 2 () HTML5API 2 () HTML5API () 4. HTML5 HTML5 HTML5 5. HTML5 HTML5 WebSocketWebRTCWeb Audio APIWebGL 6. IN FO R M A T IO N IN FO R M A T IO N 7. WebSocket 1 IN FO R M A T IO N IN FO R M A T IO N iOS Safari Android Chrome Firefox Opera 8. WebRTC 2 IN FO R M A T IO N IN FO R M A T IO N Android Chrome 9. C A U T IO N C A U T IO N 10. HTML5 11. C A U T IO N C A U T IO N 12. HTML5 13. 14. 15. 16. 17. http://www.ted.com/talks/hans_rosling_and_the_magic_washing_machine Hans Rosling: The magic washing machine 18. http://www.rekishikan.museum.ibk.ed.jp/10_kanndayori/documents/suihannki.pdf 19. http://www.rekishikan.museum.ibk.ed.jp/10_kanndayori/documents/suihannki.pdf 20. 21. 22. 20 23. (/) 24. http://en.wikipedia.org/wiki/Stevedore http://en.wikipedia.org/wiki/File:Hafenarbeiter_bei_der_Verladung_von_Sackgut_- _MS_Rothenstein_NDL,_Port_Sudan_1960.png 25. http://en.wikipedia.org/wiki/Stevedore http://en.wikipedia.org/wiki/File:Stevedores_ny_1912.jpg 26. http://en.wikipedia.org/wiki/Container_ship http://en.wikipedia.org/wiki/File:Korean-war-merchant-marine-load.jpg 27. 28. 29. 30. http://en.wikipedia.org/wiki/Stevedore http://en.wikipedia.org/wiki/ File:Starker_Gezeitenstrom,_Ladungsarbeiten_bei_schwierigen_Arbeitsbedingungen.jpg 31. http://en.wikipedia.org/wiki/Semi-trailer_truck http://en.wikipedia.org/wiki/File:Artic.lorry.arp.750pix.jpg 32. http://en.wikipedia.org/wiki/Double-stack_rail_transport http://en.wikipedia.org/wiki/File:Panama_Canal_Railway_-_Container_Train.JPG http://en.wikipedia.org/wiki/Double-stack_rail_transport http://en.wikipedia.org/wiki/File:Cajon_Intermodal.jpg 33. 34. ISBN : 978-4822245641 http://amazon.jp/dp/4822245640 35. 36. 37. http://en.wikipedia.org/wiki/History_of_coal_mining_in_the_United_States http://en.wikipedia.org/wiki/File:Child_coal_miners_(1908)_crop.jpg 38. 39. http://www.ickr.com/photos/24256351@N04/2680257100/in/ photolist-55R24j-57gjm3-5fp9zV-5g8iNR-5jYcKK-5Hte1R-65Mqqi-68MrFn-6RT2ZZ-6Thg 79-7mmujZ-7nkBSM-9uNQfa-9uRS6E-c6dR8j-9uNU5t-9zxT76-9yMWGo-fhqNsN-ad3ak2- frFrqi-fsBVc3-8V9DoA-cWLv4G-a1Pcua-8zCatd-djKVDF-9uMwMX-dX8YR4- cwbDVu-7Unejv-7UcBqs-89vVUr-9dYPWE-a9Z1v5-a8Z9yK- a9WcZv-9djc1S-9dJZ9n-8c6WdX-aqT2Hn-8XMCsQ-9d3LHi-bibXap-b3Kbup-abavwf- abavKw-cWLjQ9-f12PUU-dwNpHJ-8mppYJ 40. 41. 42. ? 43. () 44. http://en.wikipedia.org/wiki/Compact_Cassette http://en.wikipedia.org/wiki/File:Philips_EL3302.jpg 45. http://en.wikipedia.org/wiki/Compact_Cassette http://en.wikipedia.org/wiki/File:CassetteTypes1.jpg 46. 47. http://www.ickr.com/photos/kismihok/8928946658/ 48. IT 49. 50. http://en.wikipedia.org/wiki/135_lm http://en.wikipedia.org/wiki/File:135_fuji_lm_macro.jpg 51. 52. http://www.ickr.com/photos/jvcamerica/6193351840/ 53. : DPE 54. 55. http://www.toledoblade.com/Technology/2011/10/05/Apple-co-founder-Steve-Jobs- dead-at-56.html 56. 57. 58. 59. http://www.ickr.com/photos/x1brett/4928370431/ 60. http://www.digitaltrends.com/photography/two-pioneers-of-digital-photography- honored-by-national-inventors-hall-of-fame/ 61. 100 x 100 62. QV-10 63. http://www.ickr.com/photos/ume-y/5439197136/ 64. 320 x 240 2MB96 (3496) 65. Apple 66. http://blog.livedoor.jp/ma_oyabu/archives/1749687.html 67. 2G/2.5G(GSM/GPRS/EDGE) Appsinstall Copy&Paste Flash FOMA(3G)903i904i 68. 69. 70. 71. 72. 73. 74. 75. DTM CD CD IT 76. (DRM) 77. 78. 79. http://mujina.sakura.ne.jp/history/ 2001 0121 1889 0501 80. http://mujina.sakura.ne.jp/history/ 2001 0121 81. http://mujina.sakura.ne.jp/history/ 1889 0501 82. ... 83. 84. 85. Windows 86. 87. 88. 89. 3 10 or 1 90. 3 10 91. LCR IP... 92. () 1 93. IBM (PC/AT) PC-98 Windows Windows OS ... 94. A < B + C 2? 95. http://www.exbuzzwords.com/static/keyword_3631.html http://www.exbuzzwords.com/static/keyword_3632.html 96. IT 97. 1 98. 2 99. ! 100. ? 101. https://www.ickr.com/photos/suewaters/7564724934 102. https://www.ickr.com/photos/xlibber/2962488972 103. https://www.ickr.com/photos/simonehudson/1353033710 104. World? (DAC : Development Assistance Committee) http://en.wikipedia.org/wiki/Development_Assistance_Committee http://ja.wikipedia.org/wiki/%E9%96%8B%E7%99%BA%E6%8F%B4%E5%8A %A9%E5%A7%94%E5%93%A1%E4%BC%9A http://en.wikipedia.org/wiki/File:DAC_members.svg 105. World! (DAC : Development Assistance Committee) http://en.wikipedia.org/wiki/Development_Assistance_Committee http://ja.wikipedia.org/wiki/%E9%96%8B%E7%99%BA%E6%8F%B4%E5%8A %A9%E5%A7%94%E5%93%A1%E4%BC%9A http://en.wikipedia.org/wiki/File:DAC_members.svg 106. ... (DAC : Development Assistance Committee) http://en.wikipedia.org/wiki/Development_Assistance_Committee http://ja.wikipedia.org/wiki/%E9%96%8B%E7%99%BA%E6%8F%B4%E5%8A %A9%E5%A7%94%E5%93%A1%E4%BC%9A http://en.wikipedia.org/wiki/File:DAC_members.svg 107. https://www.ickr.com/photos/shawnleishman/2349218847 108. https://www.ickr.com/photos/ianz/3988940325 109. https://www.ickr.com/photos/69583224@N05/7386519508 110. https://www.ickr.com/photos/jmenj/9460355596 111. https://www.ickr.com/photos/69583224@N05/8140823868 112. The Next Billion 10 113. The Next 4 Billion 40 BOP : Base of the Pyramid 114. 2002 3,000 7 40 BOP Bottom of the Pyramid Base of the Pyramid Base of the Economic Pyramid BOP http://www.bop.go.jp/bop 115. 116. 117. http://www.rekishikan.museum.ibk.ed.jp/10_kanndayori/documents/suihannki.pdf 118. http://www.rekishikan.museum.ibk.ed.jp/10_kanndayori/documents/suihannki.pdf 32 23,000 35 58,000 32 62,500 30 4,500 119. http://www.stat.go.jp/data/kakei/longtime/ http://www.rekishikan.museum.ibk.ed.jp/10_kanndayori/documents/suihannki.pdf 32 23,000 35 58,000 32 62,500 30 4,500 () 30(1955) 29,169 120. http://www.stat.go.jp/data/kakei/longtime/ https://www.amazon.co.jp/ (2014/04/15) JW-K42H(W) 18,880 LC-19K90-B 23,168 JR-N106H(K) 20,152 SR-ML051-W 5,671 () 25(2013) 523,736 121. ICT 122. ??? ??? ??? ICT http://www.soumu.go.jp/johotsusintokei/whitepaper/h24.html 24 ITU World Telecommunication/ICT Indicators Database 2011(15th Edition) 123. 53.6 ??? ??? ICT http://www.soumu.go.jp/johotsusintokei/whitepaper/h24.html 24 ITU World Telecommunication/ICT Indicators Database 2011(15th Edition) 124. 53.6 20.3 ??? ICT http://www.soumu.go.jp/johotsusintokei/whitepaper/h24.html 24 ITU World Telecommunication/ICT Indicators Database 2011(15th Edition) 125. 53.6 20.3 5.2 ICT http://www.soumu.go.jp/johotsusintokei/whitepaper/h24.html 24 ITU World Telecommunication/ICT Indicators Database 2011(15th Edition) 126. 7.2 53.6 3.9 20.3 0.2 5.2 2000 2010 http://www.soumu.go.jp/johotsusintokei/whitepaper/h24.html 24 ITU World Telecommunication/ICT Indicators Database 2011(15th Edition) 127. https://www.ickr.com/photos/kiwanja/3170269018 128. https://www.ickr.com/photos/iicd/8244401384 129. https://www.ickr.com/photos/kiwanja/3170258578 130. http://en.wikipedia.org/wiki/Internet_access http://en.wikipedia.org/wiki/File:Ghana_satellite.jpg 131. https://www.ickr.com/photos/87913776@N00/305425495 132. https://www.ickr.com/photos/kiwanja/3170244160 133. 134. https://www.ickr.com/photos/whiteafrican/3401121885/ 135. Android HuaweiIDEOS Safaricom 80 (2011) Firefox OS (2014) 25 (2014) 136. 79% (23,000) 199% (58,000) 214% (62,500) 15% (4500) (1955) 29,169/ 137. Android 32% (80) Firefox OS 10% (25) BOP (3000/) 250/ 138. Android 32% (80) Firefox OS 10% (25) 79% (23,000) 199% (58,000) 214% (62,500) 15% (4500) / 139. 140. 141. ? 142. 143. ? 144. 145. ISBN : 978-4822245641 http://amazon.jp/dp/4822245640 146. ISBN : 978-4798100234 http://amazon.jp/dp/4798100234 http://www.seshop.com/product/detail/2241 147. http://www.wri.org/sites/default/les/pdf/ n4b-j.pdf THE NEXT 4 BILLION 40 BOP THENEXT4BILLION40|BOP W R I BOP THE NEXT 4 BILLION 40 148. ISBN : 978-4062810531 http://amazon.jp/dp/4062810530 149. (63) 65% 2013/01/28 150. http://www.w3.org/html/logo/ 151. HTML5 HTML5 152. HTML5 = HTML5 + CSS + JS 153. HTML5 = HTML5 + CSS + JS 154. HTML5 = HTML5 + CSS + JS HTML API () 155. Semantic Elements Multi Media Canvas HTML5 Forms Oine Support Webm H.264 Micro- Data WebGL Web SQL Indexed DB SVG Server- Sent ev. Web Sockets Web Sockets Geo- location FileAPI Web Storage XHR2 Math ML Web Audio Layout Media Queries HTML5 CSS3~Trans form Anim ation Regions Flex Box HTML5 Parser Mouse, Key ev. Opus ECMA Script ECMA 6th USB CSP SPDY WebCL Web RTC Net Info MP3 Device Storage TCP Socket NFC File Sys Noti- cation XHTML5 Orien- tation Web Workers Web Messag- ing DOM4 SMIL Vibra- tion Proxi- mity XPath RSS RDF OGP Schema .org WAI- ARIA W3C WHATWG other Khronos ECMA IETF WOFF Battery Status Radio Tel HTML DNT http://www.slideshare.net/dynamis/toward-refox-os/26 156. http://www.slideshare.net/dynamis/toward-refox-os/22 Semantic Elements Multi Media HTML5 Forms Oine SupportHTML5HTML5 Parser Mouse, Key ev. XHTML5 WAI- ARIA W3C 157. HTML5 = HTML5 + CSS + JS 158. HTML5 = HTML5 + CSS + JS OpenWebPlatform 159. HTML5 ? 160. 161. 162. browse / braz / 1 ; . 2 (). 3 (). 4 . OS X Mavericks(v10.9) 163. Web Page Web Application 164. (`) ('`)('`) Typed Arrays 165. (`) ('`)('`) Web Audio API 166. (`) ('`)('`) Web Workers 167. (`) ('`)('`) CSS3 168. (`) ('`)('`) SVG 169. (`) ('`)('`) ()HTML5 ! 170. 171. (`) ('`)('`) HTML5 ? 172. (`) ('`)('`) 173. (`) ('`)('`) ? 174. 175. () ! () ! DON'T LOOK, FEEL! https://www.ickr.com/photos/juanma/2929703890 176. HTML5 177. HTML5 OS APIWeb API Web Mobile OSApp 178. OS OS Web Audio 2D(,) 3DCG (WebSocket,TCP,UDP) Bluetooth GPS etc. WebOS 179. Web API APIWeb API OS (:) 180. Open ... 181. 100 DRM ( ) DRM 182. Web P/F OpenWeb Web 183. Mobile OS iOS Android Native App UIWebView/WebView HTML5OSOSApp Apache Cordova 184. 23 Firefox OS Windows Phone Ubuntu Touch TIZEN Mobile BlackBerry 185. 3App HTML5Native AppHTML5Native App Native App HTML5 Native App HTML5 Native App HTML5 Native App HTML5 186. HTML5 187. API 188. IT? 189. IT ? 190. IT 191. 192. (...) 193. IT Open Web Platform 194. http://platform.html5.org/ (2013/04/04 ) 195. http://platform.html5.org/ (2013/04/04 ) 196. http://platform.html5.org/ (2013/04/04 ) 197. WebSocket WebRTC Web Audio API WebGL 198. 199. WebSocket WebRTC Web Audio API WebGL 200. WebSocket 201. WebSocket 2 WebSocket Protocol WebSocket API Comet Server) 12 bytes + 6 bytes 18 Bytes 33.3%Header 211. Hello, world HTTP 12 bytes + 400 bytes 412 Bytes 97.1%Header WebSocket (Client => Server) 12 bytes + 6 bytes 18 Bytes 33.3%Header Hello, world HTTP 12 bytes + 400 bytes 412 Bytes 97.1%Header WebSocket (Client => Server) 12 bytes + 6 bytes 18 Bytes 33.3%Header 23 212. Comet Comet Ajax(XHR) long polling = 213. SAMPLE 214. WebSocket Server node.js JavaScript ws WebSocket nvm node npm node WebSocket Chat 215. % mkdir chat % cd chat % nvm use v0.10.21 % npm install ws ws node.jsws 216. 217. var WebSocketServer = require('ws').Server , wss = new WebSocketServer({port: 8080}); var clients = []; wss.on('connection', function(ws) { clients.push(ws); ws.on('message', function(message) { console.log(message); clients.forEach(function(c) { c.send(message); }); }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); Server 218. var WebSocketServer = require('ws').Server , wss = new WebSocketServer({port: 8080}); var clients = []; wss.on('connection', function(ws) { clients.push(ws); ws.on('message', function(message) { console.log(message); clients.forEach(function(c) { c.send(message); }); }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); Server WebSocket Server 219. var WebSocketServer = require('ws').Server , wss = new WebSocketServer({port: 8080}); var clients = []; wss.on('connection', function(ws) { clients.push(ws); ws.on('message', function(message) { console.log(message); clients.forEach(function(c) { c.send(message); }); }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); Server WebSocket Server (8080) 220. var WebSocketServer = require('ws').Server , wss = new WebSocketServer({port: 8080}); var clients = []; wss.on('connection', function(ws) { clients.push(ws); ws.on('message', function(message) { console.log(message); clients.forEach(function(c) { c.send(message); }); }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); Server 221. var WebSocketServer = require('ws').Server , wss = new WebSocketServer({port: 8080}); var clients = []; wss.on('connection', function(ws) { clients.push(ws); ws.on('message', function(message) { console.log(message); clients.forEach(function(c) { c.send(message); }); }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); Server 222. var WebSocketServer = require('ws').Server , wss = new WebSocketServer({port: 8080}); var clients = []; wss.on('connection', function(ws) { clients.push(ws); ws.on('message', function(message) { console.log(message); clients.forEach(function(c) { c.send(message); }); }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); Server 223. var WebSocketServer = require('ws').Server , wss = new WebSocketServer({port: 8080}); var clients = []; wss.on('connection', function(ws) { clients.push(ws); ws.on('message', function(message) { console.log(message); clients.forEach(function(c) { c.send(message); }); }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); Server 224. var WebSocketServer = require('ws').Server , wss = new WebSocketServer({port: 8080}); var clients = []; wss.on('connection', function(ws) { clients.push(ws); ws.on('message', function(message) { console.log(message); clients.forEach(function(c) { c.send(message); }); }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); Server 225. var WebSocketServer = require('ws').Server , wss = new WebSocketServer({port: 8080}); var clients = []; wss.on('connection', function(ws) { clients.push(ws); ws.on('message', function(message) { console.log(message); clients.forEach(function(c) { c.send(message); }); }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); Server 226. var WebSocketServer = require('ws').Server , wss = new WebSocketServer({port: 8080}); var clients = []; wss.on('connection', function(ws) { clients.push(ws); ws.on('message', function(message) { console.log(message); clients.forEach(function(c) { c.send(message); }); }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); Server 227. var WebSocketServer = require('ws').Server , wss = new WebSocketServer({port: 8080}); var clients = []; wss.on('connection', function(ws) { clients.push(ws); ws.on('message', function(message) { console.log(message); clients.forEach(function(c) { c.send(message); }); }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); Server 228. 229.
Client 230.
Client Script 231.
Client WebSocket 232.
Client 233.
Client 234.
Client 235.
Client 236.
Client 237. WebSocket HTTPSwitching Protocols HTTPS95% Header Comet 238. WebRTC 239. WebRTC API P2P 240. http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 241. (TV) http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 242. Over The Top Skype, WebEx (YouTube, Ustream) / API http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 243. Web WebRTC / http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 244. Over The Top Web (TV) Skype, WebEx (Youtube, Ustream) WebRTC / API / http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 245. WebRTC 2 Media Capture and Streams (getUserMedia) WebRTC 1.0: Real-time Communication Between Browsers 246. Media Capture and Streams (getUserMedia) WebRTC (with Web Audio API) etc. (with Canvas) etc. ? 247. DEMO 248. SAMPLE 249. 250. Script 251. 252. 253. 254. 255. 256. 257. WebRTC 1.0: Real-time Communication Between Browsers SIP XMPP WebSocket