1. Xhr2 streaming + Twitter w/ iPad 2010/5/27(thu) 「HTML5 : W3C Widget とその応用を考える会」 こまつ けんさく（@komasshu）

2. 自己紹介 名前：こまつ けんさく 勤務先：NTTコミュニケーションズ Twitter : http://twitter.com/komasshu Blog : http://blog.livedoor.jp/kotesaki/

3. Demo Twitter streaming api + iPad

4. Overview Web Server (apache) xhr2 streaming Streaming api HTML5/CSS3 w/ iPad

5. xhr(Xml Http Request) streaming GET Web Server browser HTTP Data GET xhr streaming 〜Server-Sent Event〜 Web Server browser Data Data Data Upgrade Web Socket Server browser Data Data Data Web Socket Data Data Data

6. How to send? (flush) print cgi.header( "type"=>"text/event-stream”, "Access-Control-Allow-Origin"=>"*”, "Access-Control-Allow-Methods"=>"GET”) while1 ifcurr != cache['pos'] …… print"data: "+message+"¥n” STDOUT.flush end end

7. How to receive? (xhr2 streaming) ※ iPad/iPhone xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.onreadystatechange= function() { if(xhr.readyState > 2 && xhr.readyState < 5) { messages = xhr.responseText.substring(lastSize).split(“¥n"); lastSize= xhr.responseText.length; if (arr = messages[i].match(/^data:[ ]?({.+?})/)) { show(arr[1]); } } if(xhr.readyState == 4) { } } xhr.send(null);

8. How to receive?(Server-Sent-Event) ※ Webkit nightly / Chromium vareventSource = new EventSource("/cgi-bin/test.cgi"); eventSource.onmessage = function(e){ messages = e.data.split(“¥n"); varlen = messages.length; for (vari = 0; i < len; i++) { show(messages[i]); } }

9. How to draw?(CSS3 animation) @-webkit-keyframestraverse_l{ 0%{opacity: 0.2; -webkit-transform: translate(-600px,0px);} 50% {opacity: 1.0; -webkit-transform: translate(150px,0px);} 100% {opacity: 0.2; -webkit-transform: translate(900px,0px);} } .traverse_l{ -webkit-animation-name: traverse_l; -webkit-animation-duration: 5s; } varobj = document.createElement('div'); obj.innerHTML= '<b>' + info.user + '</b>&nbsp;' + info.text; obj.setAttribute('class', 'traverse_l’); setTimeout(function(){ lists.removeChild(obj); }, 5000);

10. Thank you!!