HTML5


   2010/6/17



    hagino3000
About me...
id

    hagino3000




(     : hagino_3000)
twitter




 Follow
blog (   )
github
• JavaScript
• Oracle
• Java, PL/SQL
• Excel
• Ext JS
• new → Python
• Java-ja
• Python ( / Hack-a-thon)
• Google
 • Hackathon
 • Google Dev Fest (Developers Day)
JavaScript
(   )
Chaos Proxy Viewer
Chaos Proxy
            LAN




http://wiki.github.com/yuiseki/chaos_proxy/for-
• js
•
(   )
JavaScript



    •   CSS3 Animation
    •   WebWorker
CSS3 Animatioin


•
•
CSS3 Animatioin
/*********** CSS **********/
div#hoge img {
  -webkit-animation-timing-function: ease-in;
  -webkit-animat...
WebWorker

• XMLHttpRequest
•
• DOM
WebWorker
// main thread                            // worker thread
var loader = new Worker('loader.js');     onmessage =...
• WebSocket
WebSocket

• Server-Push
•
WebSocket
•
    • “¥0x00Hello World¥0xff”
• Flash

•         10message/
DOM
        User Input                             DOM Manipuration

                                     DOM Event
      ...
??
HTML5
2012   HTML5
HTML5 API
• Device API
• Web SQL Database API
HTML5を使ったウェブアプリケーションの高速化
HTML5を使ったウェブアプリケーションの高速化
Upcoming SlideShare
Loading in …5
×

HTML5を使ったウェブアプリケーションの高速化

2,742
-1

Published on

Chaos Proxy Viewerのいろいろ

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,742
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide





























  • HTML5を使ったウェブアプリケーションの高速化

    1. 1. HTML5 2010/6/17 hagino3000
    2. 2. About me...
    3. 3. id hagino3000 ( : hagino_3000)
    4. 4. twitter Follow
    5. 5. blog ( )
    6. 6. github
    7. 7. • JavaScript • Oracle • Java, PL/SQL • Excel • Ext JS • new → Python
    8. 8. • Java-ja • Python ( / Hack-a-thon) • Google • Hackathon • Google Dev Fest (Developers Day)
    9. 9. JavaScript
    10. 10. ( )
    11. 11. Chaos Proxy Viewer
    12. 12. Chaos Proxy LAN http://wiki.github.com/yuiseki/chaos_proxy/for-
    13. 13. • js •
    14. 14. ( )
    15. 15. JavaScript • CSS3 Animation • WebWorker
    16. 16. CSS3 Animatioin • •
    17. 17. 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; }
    18. 18. WebWorker • XMLHttpRequest • • DOM
    19. 19. 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'})); })); }
    20. 20. • WebSocket
    21. 21. WebSocket • Server-Push •
    22. 22. WebSocket • • “¥0x00Hello World¥0xff” • Flash • 10message/
    23. 23. 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
    24. 24. ??
    25. 25. HTML5
    26. 26. 2012 HTML5
    27. 27. HTML5 API • Device API • Web SQL Database API

    ×