Chaos Proxy Viewerのいろいろ

1. HTML5
2010/6/17
hagino3000

2. About me...

3. id
hagino3000
( : hagino_3000)

4. twitter
Follow

5. blog ( )

6. github

7. • JavaScript
• Oracle
• Java, PL/SQL
• Excel
• Ext JS
• new → Python

9. • Java-ja
• Python ( / Hack-a-thon)
• Google
• Hackathon
• Google Dev Fest (Developers Day)

10. JavaScript

11. ( )

12. Chaos Proxy Viewer

13. Chaos Proxy
LAN
http://wiki.github.com/yuiseki/chaos_proxy/for-

14. • js
•

15. ( )

16. JavaScript
• CSS3 Animation
• WebWorker

17. CSS3 Animatioin
•
•

18. CSS3 Animatioin
/*********** CSS **********/
div#hoge img {
-webkit-animation-timing-function: ease-in;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 1s;
}
@-webkit-keyframes hide {
0% { opacity : 1} // JavaScript ///////////////////////
100% { opacity : 0 } // fadeout
} $(‘#target’).addClass(‘hide’);
.hide { -webkit-animation-name: hide; }

19. WebWorker
• XMLHttpRequest
•
• DOM

20. WebWorker
// main thread // worker thread
var loader = new Worker('loader.js'); onmessage = function(e) {
loader.onmessage = function(event) { var data = JSON.parse(e.data);
var d = JSON.parse(event.data); if (data.eventName == 'setup') {
if (d.eventName == 'setup') { setup(data);
loader.postMessage(JSON.stringify({ } else
eventName:'start' if (data.eventName == 'start') {
})); start();
} else } else {
if (d.eventName == 'load') { ...
renderImages(d.data); }
} }
};
loader.postMessage(JSON.stringify({ function setup(data) {
eventName:'setup', ...
interval : 5000 postMessage(JSON.stringify({eventName:'setup'}));
})); }

21. • WebSocket

22. WebSocket
• Server-Push
•

23. WebSocket
•
• “¥0x00Hello World¥0xff”
• Flash
• 10message/

24. DOM
User Input DOM Manipuration
DOM Event
Main Thread
WebSocket WebSocket
Connection Connection
messaging messaging
Worker Worker
XHR XHR
WebSocket WebSocket HTTP Server
Server Server

25. ??

26. HTML5

27. 2012 HTML5

28. HTML5 API
• Device API
• Web SQL Database API