BABUKUMA (^(工)^): HTML

2009年10月6日火曜日

Web WorkerとCanvasを試してみた。

HTML5の勉強でWeb WorkerとCanvasを利用して

簡単なアニメーションを作ってみて。(　´(ｴ)ﾋｿ(´(ｴ)｀)ﾋｿ(ｴ)｀　)

Canvasを人が歩き続くアニメー。。。。

タイトルは。。勝手につけた。Babukuma canvas walker。。

walkerがworkerと発音が似てて、人が歩くから。。(ﾉ∀`)'`,､'`,､'`,､'`,､'`,､

一応FireFoxとGoogle Chromeは動く。

IEとOperaはダメだった。

Babukuma canvas walker demoはこちら。

HTML5面白いね。（＾（エ）＾）

2009年10月2日金曜日

Web Workersを試してみた。

今回、Web Workersを試してみた。

JavaScriptで簡単にスレッドが使えるのが便利だったけど、

まだ、スレッドに引数はどうやれば渡せるのかがわからなくて、ちょっと不便なところもあった。

参照したサイトは　http://www.whatwg.org/specs/web-workers/current-work/

### test.html ###


<!DOCTYPE HTML>
<html>
 <head>
  <title>babukuma web workers event test</title>
 </head>
 <body>
  <table border=1>
    <tr>
      <th>thread 1</th>
      <th>thread 2</th>
    </tr>
    <tr>
      <td><ul id="result1"></ul></td>
      <td><ul id="result2"></ul></td>
    </tr>
  </table>
  <script>
   var worker1 = new Worker('worker.js');
   worker1.onmessage = function (event) {
     var liTag = document.createElement("li");
     var textNode = document.createTextNode(event.data);
     liTag.appendChild(textNode);
     document.getElementById('result1').appendChild(liTag);
   };
   
   worker1.onerror = function (event) {
     var liTag = document.createElement("li");
     var textNode = document.createTextNode("message : " + event.message);
     liTag.appendChild(textNode);
     document.getElementById('result1').appendChild(liTag);
   };
   
   var worker2 = new Worker('worker.js');
   worker2.onmessage = function (event) {
     var liTag = document.createElement("li");
     var textNode = document.createTextNode(event.data);
     liTag.appendChild(textNode);
     document.getElementById('result2').appendChild(liTag);
     
     if(event.data == 6) {
       worker2.terminate();
       
       var liTag = document.createElement("li");
       var textNode = document.createTextNode("terminate");
       liTag.appendChild(textNode);
       document.getElementById('result2').appendChild(liTag);
     }
   };
   
   worker2.onerror = function (event) {
     var liTag = document.createElement("li");
     var textNode = document.createTextNode("message : " + event.message);
     liTag.appendChild(textNode);
     document.getElementById('result2').appendChild(liTag);
   };
  </script>
 </body>
</html>

### worker.js ###


var index = 0;

var babukumaThread = function() {
 if(index == 8) {
   throw 'babukuma error!!!';
 }
 postMessage(index);
 index++;
 setTimeout(babukumaThread, 1000);
}

babukumaThread();

IEとOperaではまだWebWorkersが使えないみたいで、試せなかった。

FireFoxとGoogle Chromeでテストしてみたけど、

なぜかちょっと結果が違う。

Chromeではonerrorイベントが発生してないみたい。。

俺が何か間違ったのかな？

後でShared Workersも試してみよう。

2009年8月5日水曜日

IEでAJAXファイルアップロードするとき「multipart/form-data」がきかなかった。

本当にはまった。

AJAXでファイルアップロードするときに

なぜか、

$(form).attr("enctype", "multipart/form-data");

これだけでは、IEではコンテントタイプが「multipart/form-data」にならなかった。

http://www.bennadel.com/blog/1273-Setting-Form-EncType-Dynamically-To-Multipart-Form-Data-In-IE-Internet-Explorer-.htm

このサイトに書いてある方法で解決。

$(form)

.attr( "enctype", "multipart/form-data" )

.attr( "encoding", "multipart/form-data" )

はまる。。。絶対。。(　´д`)

BABUKUMA (^(工)^)