1. HTML5 Open Web Platform WebSocket / WebRTC / Web Audio API / WebGL 2014/04/21 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. C A U T IO N C A U T IO N 5. HTML5 6. C A U T IO N C A U T IO N 7. HTML5 8. 9. 2 n d E d itio n 2 n d E d itio n 10. 11. 12. 13. http://www.ted.com/talks/hans_rosling_and_the_magic_washing_machine Hans Rosling: The magic washing machine 14. http://www.rekishikan.museum.ibk.ed.jp/10_kanndayori/documents/suihannki.pdf 15. http://www.rekishikan.museum.ibk.ed.jp/10_kanndayori/documents/suihannki.pdf 16. 17. 18. 20 19. (/) 20. 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 21. http://en.wikipedia.org/wiki/Stevedore http://en.wikipedia.org/wiki/File:Stevedores_ny_1912.jpg 22. http://en.wikipedia.org/wiki/Container_ship http://en.wikipedia.org/wiki/File:Korean-war-merchant-marine-load.jpg 23. 24. 25. 26. http://en.wikipedia.org/wiki/Stevedore http://en.wikipedia.org/wiki/ File:Starker_Gezeitenstrom,_Ladungsarbeiten_bei_schwierigen_Arbeitsbedingungen.jpg 27. http://en.wikipedia.org/wiki/Semi-trailer_truck http://en.wikipedia.org/wiki/File:Artic.lorry.arp.750pix.jpg 28. 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 29. 30. ISBN : 978-4822245641 http://amazon.jp/dp/4822245640 31. 32. 33. 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 34. 35. 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 36. 37. 38. ? 39. () 40. http://en.wikipedia.org/wiki/Compact_Cassette http://en.wikipedia.org/wiki/File:Philips_EL3302.jpg 41. http://en.wikipedia.org/wiki/Compact_Cassette http://en.wikipedia.org/wiki/File:CassetteTypes1.jpg 42. 43. http://www.ickr.com/photos/kismihok/8928946658/ 44. IT 45. 46. http://en.wikipedia.org/wiki/135_lm http://en.wikipedia.org/wiki/File:135_fuji_lm_macro.jpg 47. 48. http://www.ickr.com/photos/jvcamerica/6193351840/ 49. : DPE 50. 51. http://www.toledoblade.com/Technology/2011/10/05/Apple-co-founder-Steve-Jobs- dead-at-56.html 52. 53. 54. 55. http://www.ickr.com/photos/x1brett/4928370431/ 56. http://www.digitaltrends.com/photography/two-pioneers-of-digital-photography- honored-by-national-inventors-hall-of-fame/ 57. 100 x 100 58. QV-10 59. http://www.ickr.com/photos/ume-y/5439197136/ 60. 320 x 240 2MB96 (3496) 61. Apple 62. http://blog.livedoor.jp/ma_oyabu/archives/1749687.html 63. 2G/2.5G(GSM/GPRS/EDGE) Appsinstall Copy&Paste Flash FOMA(3G)903i904i 64. 65. 66. 67. 68. 69. 70. 71. DTM CD CD IT 72. (DRM) 73. 74. 75. http://mujina.sakura.ne.jp/history/ 2001 0121 1889 0501 76. http://mujina.sakura.ne.jp/history/ 2001 0121 77. http://mujina.sakura.ne.jp/history/ 1889 0501 78. ... 79. 80. 81. Windows 82. 83. 84. 85. 3 10 or 1 86. 3 10 87. LCR IP... 88. () 1 89. IBM (PC/AT) PC-98 Windows Windows OS ... 90. A < B + C 2? 91. http://www.exbuzzwords.com/static/keyword_3631.html http://www.exbuzzwords.com/static/keyword_3632.html 92. IT 93. 1 94. 2 95. ! 96. ? 97. https://www.ickr.com/photos/suewaters/7564724934 98. https://www.ickr.com/photos/xlibber/2962488972 99. https://www.ickr.com/photos/simonehudson/1353033710 100. 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 101. 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 102. ... (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 103. https://www.ickr.com/photos/shawnleishman/2349218847 104. https://www.ickr.com/photos/ianz/3988940325 105. https://www.ickr.com/photos/69583224@N05/7386519508 106. https://www.ickr.com/photos/jmenj/9460355596 107. https://www.ickr.com/photos/69583224@N05/8140823868 108. The Next Billion 10 109. The Next 4 Billion 40 BOP : Base of the Pyramid 110. 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 111. 112. 113. http://www.rekishikan.museum.ibk.ed.jp/10_kanndayori/documents/suihannki.pdf 114. http://www.rekishikan.museum.ibk.ed.jp/10_kanndayori/documents/suihannki.pdf 32 23,000 35 58,000 32 62,500 30 4,500 115. 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 116. 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 117. ICT 118. ??? ??? ??? ICT http://www.soumu.go.jp/johotsusintokei/whitepaper/h24.html 24 ITU World Telecommunication/ICT Indicators Database 2011(15th Edition) 119. 53.6 ??? ??? ICT http://www.soumu.go.jp/johotsusintokei/whitepaper/h24.html 24 ITU World Telecommunication/ICT Indicators Database 2011(15th Edition) 120. 53.6 20.3 ??? ICT http://www.soumu.go.jp/johotsusintokei/whitepaper/h24.html 24 ITU World Telecommunication/ICT Indicators Database 2011(15th Edition) 121. 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) 122. 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) 123. https://www.ickr.com/photos/kiwanja/3170269018 124. https://www.ickr.com/photos/iicd/8244401384 125. https://www.ickr.com/photos/kiwanja/3170258578 126. http://en.wikipedia.org/wiki/Internet_access http://en.wikipedia.org/wiki/File:Ghana_satellite.jpg 127. https://www.ickr.com/photos/87913776@N00/305425495 128. https://www.ickr.com/photos/kiwanja/3170244160 129. 130. https://www.ickr.com/photos/whiteafrican/3401121885/ 131. Android HuaweiIDEOS Safaricom 80 (2011) Firefox OS (2014) 25 (2014) 132. 79% (23,000) 199% (58,000) 214% (62,500) 15% (4500) (1955) 29,169/ 133. Android 32% (80) Firefox OS 10% (25) BOP (3000/) 250/ 134. Android 32% (80) Firefox OS 10% (25) 79% (23,000) 199% (58,000) 214% (62,500) 15% (4500) / 135. 136. 137. ? 138. 139. ? 140. 141. ISBN : 978-4822245641 http://amazon.jp/dp/4822245640 142. ISBN : 978-4798100234 http://amazon.jp/dp/4798100234 http://www.seshop.com/product/detail/2241 143. 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 144. ISBN : 978-4062810531 http://amazon.jp/dp/4062810530 145. (63) 65% 2013/01/28 146. http://www.w3.org/html/logo/ 147. HTML5 HTML5 148. HTML5 = HTML5 + CSS + JS 149. HTML5 = HTML5 + CSS + JS 150. HTML5 = HTML5 + CSS + JS HTML API () 151. 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 152. 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 153. HTML5 = HTML5 + CSS + JS 154. HTML5 = HTML5 + CSS + JS Open Web Platform 155. HTML5 ? 156. 157. 158. Web Page Web Application 159. (`) ('`)('`) Typed Arrays 160. (`) ('`)('`) Web Audio API 161. (`) ('`)('`) Web Workers 162. (`) ('`)('`) CSS3 163. (`) ('`)('`) SVG 164. (`) ('`)('`) ()HTML5 ! 165. 166. HTML5 167. HTML5 OS APIWeb API Web Mobile OSApp 168. OS OS Web Audio 2D(,) 3DCG (WebSocket,TCP,UDP) Bluetooth GPS etc. WebOS 169. Web API APIWeb API OS (:) 170. Open ... 171. 100 DRM ( ) DRM 172. Web P/F OpenWeb Web 173. Mobile OS iOS Android Native App UIWebView/WebView HTML5OSOSApp Apache Cordova 174. 23 Firefox OS Windows Phone Ubuntu Touch TIZEN Mobile BlackBerry 175. 3App HTML5Native AppHTML5Native App Native App HTML5 Native App HTML5 Native App HTML5 Native App HTML5 176. HTML5 177. API 178. IT? 179. IT ? 180. IT 181. 182. (...) 183. IT Open Web Platform 184. http://platform.html5.org/ (2013/04/04 ) 185. http://platform.html5.org/ (2013/04/04 ) 186. WebSocket WebRTC Web Audio API WebGL 187. 188. WebSocket WebRTC Web Audio API WebGL 189. WebSocket 190. WebSocket 2 WebSocket Protocol WebSocket API Comet Server) 12 bytes + 6 bytes 18 Bytes 33.3%Header 200. Hello, world HTTP 12 bytes + 400 bytes 412 Bytes 97.1%Header WebSocket (Client => Server) 12 bytes + 6 bytes 18 Bytes 33.3%Header HTTP 12 bytes + 400 bytes 97.1%Header WebSocket (Client => Server) 12 bytes + 6 bytes 33.3%Header 23 201. Comet 202. SAMPLE 203. WebSocket Server node.js JavaScript ws WebSocket nvm node npm node WebSocket Chat 204. % mkdir chat % cd chat % nvm use v0.10.21 % npm install ws ws node.jsws 205. 206. 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 207. 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 208. 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) 209. 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 210. 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 211. 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 212. 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 213. 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 214. 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 215. 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 216. 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 217. 218.

Client 219.

Client Script 220.

Client WebSocket 221.

Client 222.

Client 223.

Client 224.

Client 225.

Client 226. WebSocket HTTPSwitching Protocols HTTPS95% Header Comet 227. WebRTC 228. WebRTC API P2P 229. http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 230. (TV) http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 231. Over The Top Skype, WebEx (YouTube, Ustream) / API http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 232. Web WebRTC / http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 233. Over The Top Web (TV) Skype, WebEx (Youtube, Ustream) WebRTC / API / http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 234. WebRTC 2 Media Capture and Streams (getUserMedia) WebRTC 1.0: Real-time Communication Between Browsers 235. Media Capture and Streams (getUserMedia) WebRTC (with Web Audio API) etc. (with Canvas) etc. ? 236. DEMO 237. SAMPLE 238. 239. Script 240. 241. 242. 243. 244. 245. WebRTC 1.0: Real-time Communication Between Browsers SIP XMPP WebSocket