Dragオブジェクトがscrollなdivを乗り越える方法1

今回は、技術的なネタを書いてみようと思います。二回に分けて書こうと思います。今日はですます調な気分です。

ネタは、3ヶ月程前にはまった内容にしてみようと思います。前々から忘れてしまう前にポストしないとなぁと思いながら、先延ばしにしていました。問題としては、以下のように当時は書いておりますね。

draggableな要素がoverflowのhidden, scroll, auto(たぶん)のときには、そのoverflowを指定してある要素の外では見えなくなっちゃう。

また、この問題はscript.aculo.usの開発者も知っているのだけど、なかなか対応が面倒なもののようです。こんな感じに言っていますから。

I discussed this with Thomas some time ago, and the problem is that the element we move (be it in ghosting mode or not) usually must remain at the same DOM level because otherwise, styles might get lost. I'm working on a solution right now, too, it will involve a new option you can use to assign a class name to the element while it's being dragged. If this class name is supplied, the element will be attached to the body. Let's see if this works, I'll provide the patch as soon as it is ready

一応、closedとなっており、 Effects Treasure Chestにその解決方法が上がっているのですが、以下の質問があるように、私もこのソースでは、実際に動いているところを見たことがありません。動作は見ていないのですが、ソースを軽くみたら、がんばったら動きそうな感じがしますけどね。そして、この方法は、実際のライブラリには組み込まれていません。

Could you show an example of how to use this effect?

Edit 01/08/2007 by Greg Hinch – added a line to turn this.dragging on and off when calling initDrag() and finishDrag(). This was to fix an issue where if a draggable was clicked but not dragged the duplicate element would not be removed from the page.

さて、この問題は、scrollなdivの要素の下にDragオブジェクトがあったら、そのdivを乗り越えることができないというものです。これはライブラリの問題ではなく、ブラウザの実装の話です。そういう仕様なのですね。まぁ、IE6では大丈夫だけど、IE7、Mozillaではダメというのがなんともやるせないですが。

実際どういう状態になるか、簡単にスクリプトを書いてみました。
下のページを見てください。

Drag object over scroll div(Not Working!)

右ペインにあるtakoとかikaといったdiv要素はドラッグが可能です。しかし、右ペインから左ペインにドラッグしようとすると見えなくなってしまいます。この状態をなんとかしたいのです。さらに不思議なことに、見えなくなっても、実はドロップすることはできます。再び書きますが、おそらくIE6ではちゃんと左ペインにDragオブジェクト持っていってもちゃんと見えると思います。確認はしていませんが、3ヶ月前に調査したときは、IE6では想定した動作をしていました。

JavaScriptの方では、動かないバージョンでは以下のようになっています。

Event.observe(window, 'load', function() {
$A($('scroll-b').getElementsByClassName('drag-obj')).each(function(obj) {
new Draggable(obj, { revert: true, scroll: 'scroll-b' });
});
Droppables.add('drop-container', {
hoverclass: 'dragdrop-in',
onDrop: function(obj, target) { target.innerHTML += obj.innerHTML+"<br />"; }
});
});

大したことはしていません。class属性の値にdrag-objを持つ要素をドラッグ可能にしています。また、id属性の値にdrop-containerを持つ要素をドロップ可能にしており、ドロップした際に、その要素のinnerHTMLにドラッグ要素のテキストを書き足します。

そして、CSSの方で重要な場所が以下のようになっています。

#scroll-a {
float: left;
width: 70%;
height: 100%;
overflow-y: scroll;
}
#scroll-b {
height: 100%;
overflow-y-: scroll;
}

別にscroll-aはoverflowがscrollでなくてもいいのですが。。。あと、overflow-yって、IEだけだと思っていましたが、手元のfirefoxでは動いたので、とりあえずこれでいきます。

今回はここまでです。動く方のソースは実はまだ頭の中で、ソースには書き出してはいません。どうやるか、ということですが、Dragオブジェクトをscroll-bの下ではなく、body直下に置く、もしくは、scroll指定していない場所に置くという方法を採用する予定です。

来週中に書くことを目指します。

そういえば、2ヶ月振りにscript.aculo.usを使いました。いつの間にか1.8.0が出ていましたね。prototype.jsのバージョン1.6ともcompatibleでうれしい限りです。

for文書きたくない。

タイトルにYUIとか書くと全く関係ないところが、キーワードを拾って、リンクを張ってきやがる。日本人にとって、YUIという言葉は、普通Yahoo! User Interfaceなんかではなく、人の名前になる。しかも、女性の可能性が高いので、リファラーがYUIだらけに。

というわけで、YUIを最近使っているわけだが、イテレートするのにfor文を書くのが嫌なので、eachとmapだけでも、prototype.jsから移植してみた。~~勝手に、YAHOO.util.Collectionと名前を付けてみたりw。~~改め、YAHOO.utilx.Collectionにした。また、使いそうなコレクションがあったら追加してみる予定。別に、anyやらallやら全部prototype.jsから持ってきてもいいのだけど、面倒なので必要があれば実装するし、使わなければ実装しない。
というわけで、以下がソース

YAHOO.namespace('utilx');
YAHOO.utilx.Collection = function() {
var _each = function(data, iterator) {
if (YAHOO.lang.isArray(data)) {
for (var i = 0, l = data.length; i <l; i++) {
iterator(data[i]);
}
} else if (data && typeof data === 'object') {
for (var property in data) {
iterator({key: property, value:data[property]});
}
}
};
return {
$break: {},
$continue: new Error('"throw $continue" is deprecated, use "return" instead'),
each: function(data, iterator) {
var index = 0;
try {
_each(data, function(value) {
iterator(value, index++);
});
} catch (e) {
if (e != this.$break) throw e;
}
return data;
},
map: function(data, iterator) {
var results;
this.each(data, function(value, index) {
var result = (iterator || function(v) { return v;})(value, index);
if (YAHOO.lang.isArray(data)) {
results = results || [];
results.push(result);
} else {
results = results || {};
if (result && result['key'] && result['value']) {
results[result['key']] = result['value'];
}
}
});
return results;
}
}
}();

次のように使う。配列のとき

var hogeArray = ["foo", "bar", "baz"];
YAHOO.utilx.Collection.each(hogeArray, function(data) {
console.log(data + "hogehoge")
});
hogeArray = YAHOO.utilx.Collection.map(hogeArray, function(data) {
if (data == 'baz') {
throw YAHOO.utilx.Collection.$break;
}
data = data + "hogehoge";
return data;
});
console.log(hogeArray);

オブジェクトのとき

var hogeObj = {"foo": "This is Foo", "bar": "This is Bar", "baz": "This is Baz"};
YAHOO.utilx.Collection.each(hogeObj, function(data) {
console.log(data.value + "hogehoge")
});
hogeObj = YAHOO.utilx.Collection.map(hogeObj, function(data) {
if (data.key == 'baz') {
throw YAHOO.utilx.Collection.$break;
}
data.value = data.value + "hogehoge";
return data;
});
console.log(hogeObj);

とりあえず、for文を書きたくないので、これで少しすっきりした。

(more...)

JavaScript Module Patternいいね。半年遅れだけど。。。

Module Pattern祭があったのは、今年の6月だったみたいですね。まだ時代の流れに遅れていますが、少しずつ追いかけていこうと思います。

現在は、jQueryでもprototype.jsでもなく、YUIを調査しています。まだまだ頭がprototype.js脳なので、多少苦しんでいますが、だいぶ掴めてきました。そして、YUIでも直接呼び出せばいいような小さなプログラムは書けるようになってきました。

ところで、prototype.jsでは、Class.createされるとinitializeが呼ばれ、ほげほげするように書きますよね。

var Hoge = Class.create();
Hoge.prototype = {
// public vars
varA: "hogehoge",
varB: "foobar",
initialize: function() {
console.log("initialized");
},
alertA: function() {
alert(this.varA);
}
}
var hoge = new Hoge();
hoge.alertA();

とか。そして、それなりに大きいプログラムでもクラスごと（こんなことを言ったら怒られる？）に分けて、整理して構成することができますね。

どうやったら上のように、そしてYUIっぽく書けるかな、と昨日の晩から調査をしていました。そして、ようやくその手がかりとなるポストを見つけることができました。（別にYUI以外でもこの書き方していいけど。。。）
A JavaScript Module Patternです。名前はこのポストの著者のEricさんが勝手に付けたっぽいのですが、いいです。これ。日本でも半年前に話題になっていたみたいですね。時代遅れですいません。

クロージャを使うことによって、privateメンバっぽく書けるのもうれしいですね。上の例では、結局varAとvarBはpublicメンバとして評価されてしまうので、適当なコーディング規約がないとグループで開発したときに呼び出してしまいそうです。

そして、そのポストで紹介されていたような書き方は以下の通り。

var Hoge = function() {
console.log("initialized");
var varA = "hogehoge";
var varB = "foobar";
return {
alertA: function() {
alert(varA);
}
}
}();
var hoge = Hoge;
hoge.alertA();

これだとvarAとvarBがHogeの中からしか参照できません。そして、returnでalertAという関数オブジェクト（メソッドのように使う）を持ったオブジェクトを返してくれます。

これからはこれで行こうと思います。

また、JavaScriptでは、無駄にnewをしない方がいいようです。YUIの調査をしていたら私のヒーローのDouglasさんがそうおっしゃっています。
JavaScript, We Hardly new Ya
なんでもprototypeオブジェクトを無駄に持ってしまうことが問題であるとおっしゃっているのです。つまり、メモリの無駄遣いは止めましょうとのことです。そのため、newしない方がいいそうです。というか、newすると時代遅れだそうです。

てっきり、prototypeオブジェクトにいろいろ書いておくと、newされたオブジェクトが使いまわしてくれるので、積極的にprototypeオブジェクトを使用して、newでオブジェクト生成し、それを使っていくのが通だと思っていたのですが、そうでもないのですね。

ただDouglasさんは、newを使用するときもなくはない、と言っています。私のpoorな頭ではどんなときにnewを使用した方がよいのか、ということがわかりませんでした。何度もそのオブジェクトを作成する場合と理解したらいいのでしょうか？

どちらにせよ、Douglasさんを信じて、あまりnewをしないように、prototypeオブジェクトは使用しないように今回は作っていこうと思います。

しかし、まだまだprototype.js脳から離れられていないので、Array.eachやらArray.mapやらのイテレーション系の関数がないのは苦しいです。自作しようかしらん。

次は、CustomEventが使えるようになりたいです。この辺がまだ理解できていませんので、読んでいきます。きっとここら辺が理解できたら、YUIでそれなりのプログラムが書けそうです。
Event-Driven Web Application Design
The Bubbling Technique & Custom Event, YUI’s Secret Weapon by Caridy Patiño Mayea

removeChildをするときには、その前にEventを全部取ること！

removeChildのみならずreplaceChildのときも必要！さらに、innerHTMLで内でEventを指定していた要素にも必要！

前からIE6にはメモリリークがあるってことは知っていた。そして、要素同士が双方にポインタを持つこと？で、そのメモリリークが起こると知ってはいた。そして、それを避けるべきだということも言葉では理解していた。でも、実際にどうすればいいの？ってことがわからなかったのだ！そして、つい先ほど、その問題解決がわかった！！！超感動！

確かに最近開発したWebアプリでは、再読み込みをする度に重くなっていき、絶対メモリリークしているなってことに気づいていた。でも、だからってどうしたらいいかはわからなかった。って、それはそれで問題なのだけど、こうやってわかった以上は早速月曜日に修正するぜ！

で、どうやって気づいたかというと、YUI TheaterのDouglas Crockford氏のThe Theory of the DOMからだった。いいよ！いいよ！Qualityも良かったけど、本当に勉強になるっす。一応3つも映像があって、全部で一時間半弱なんだけど、見てよかった！ここには、そのメモリリークについて話があったPart3を貼り付けておく。メモリリークの話だけなら、Part3の最初の6分くらいなので、それだけチェックしてもいいかも。

で、講義の中で上げられていた削除する前にイベントを削除する方法としては、上の映像では次の関数を使用していた。実際に動かしていないから間違っているかもしれんけど、だいたいこんな感じ。

function purgeEventHandlers(node) {
walkTheDOM(node, function(e) {
for (var n in e) {
if (typeof e[n] === 'function') {
e[n] = null;
}
}
});
}
function walkTheDOM(node, func) {
func(node);
node = node.firstChild;
while (node) {
walkTheDOM(node, func);
node = node.nextSibling;
}
}

もしくはYUIのpurgeElementで指定した要素以下の要素のイベントを一掃してくれるとのことだ。
まぁ、方法がわかれば簡単に作れるさ。prototype.jsなどでElement.remove()とかしているところもremoveする前にイベントを一掃しないとメモリリークしてしまうので、気をつけないといけない。私の問題はまさにこれだったと思う。というわけで、Douglasさんのファンになりましたので、当分YUIを調べることになりそうす。
うーむ。やってみたけど、メモリが開放されない。。。なんでだろ。dragdrop.jsのdraggableをたくさん作って、その上のDIVコンテナのinnerHTMLを書き換えているので、おそらくdraggableな要素が無くなってもメモリは持っているかのようだ。。。ちょっと調査せなかんな。

つーか、Wordpressのバージョンを上げたらwysiwygエディタを消すオプションが無くなってた。。。orz
ソースコードのスペースを勝手に削りやがって！！！！空行も削りやがる。許せん！くそー。腹が立ってきた。
って、少し調べたら私の他にも腹が立っている人はいるみたい。
Idea: Option to turn off WYSIWYG editor, sitewide!
解決方法がtinymceのディレクトリを削除しろだって？やってらんねー。
(more...)

つーか、全く速くならんかった。

昨日からはてブで賑わっている「一行でIEのJavaScriptを高速化する方法」を試したのだけど、私の環境では全く速くならんかった。記事を読んだときは、私も「これはすごい」と思って、今朝早速、最近ずっと開発していた場所に組み込んでベンチを取ってみたのだけど、全く変わらないという結果が出た。

まず、 IE では document にそのままアクセスすると window オブジェクトの内部メソッドが実行されてしまいます。これが非常に重いのです。

まぁ、確かに理解はできるし、軽くなりそうな気がするけども、実際はdocumentを呼ぶ機会は少ない（DOMで検索した要素もキャッシュ化している）ので、高速化されなかったってことかな。きっと、

この方法は document と書かれた部分を 5 倍以上（ループのコストを引くとたぶん 10 倍以上？）速くすることができるのですが、その数倍というのは「プロパティアクセス」と「関数呼び出し」の差です（関数呼び出しを減らしていると考えてください）。

ですので、ほとんどのウェブサイトでは効果はあまり感じられないかもしれません。

とのことなので、私のスクリプトが重いのはDOM検索なので、変わらなかったんだろうな。

つーか、変数の初期化に関しては、勉強になったよ。特にJavaScript高速化 - まさにっき（使えないプログラマーの記録）の「とおりすがり」氏、説明わかりやすい！というわけで、私もメモとして書かしてもらおうっと。

とおりすがり『> これもまた、 JavaScript では変数はスコープの先頭で生成されるため、 document は空の変数となり undefined になってしまいます。

例えば var foo = 1, bar = 2; var foobar = foo + bar; なんていう宣言があった場合、
var foo = bar = foobar = undefined; //宣言された変数はスコープの最初に全部まとめて生成される。
foo = 1; bar = 2; foobar = foo + bar;
みたいに解釈されます。なので
var doc = document; var document = doc; は
var doc = document = undefined; doc = document; document = doc;
になって undefined になるんですよ。

> 2行目の時点での doc が undefined になっているのか？
var document; がある時点で、そのスコープに入った瞬間に document が undefined になるわけです。
と、全然関係ない通りすがりでした。』 (2007/10/11 08:05)

あと、amachangさんの言っているevalのタイミングについても勉強になった。

eval で var 宣言することでスコープ途中から変数を生成することができるのです。

しかし、

/*@cc_on _d=document;eval('var document=_d')@*/

といった、いかにも黒魔術的な書き方はハックって感じがするね。

JavaScriptで重い処理をするとアニメーションGIFが止まる件について

当分の間JavaScriptオンリーです。今日はですます調です。

Ajaxのローディングとかでクルクル回るアニメーションGIFてありますよね？あのローディングのアニメーションGIFをJavaScriptで重い処理をするときに使おうと思っていてその画像を探していました。そして、先日調べていたら、こんなサイトを発見しました。激しくいいですね。
Ajaxload - Ajax loading gif generator
実は、結構有名なサイトなんですね。知らなかったです。でも、先日知って、早速作ってみました。

そして、早速使おうと思ったのですが、重い処理をしている間にアニメーションGIFを表示させていてもアニメーションがされないのです。。。つまり、アニメーションではない状態のGIF画像が表示されるだけなのです。その原因はJavaScriptが処理されている間だからです。また、重いJavaScriptが処理中の際にはその間はブラウザが固まります。

その解決方法を探していたのですが、その際にようやく私もsetTimeoutの使いかたがわかりました。そして、ページ描画のタイミングを制御できるようになりました。そうです。ポイントはsetTimeoutです。重い処理を一つの関数に入れちゃダメなんですね。つまり、これはダメなのです。

Event.observe(window, 'load', function() {
var loadingImage = Builder.node('img', {src: 'loading.gif'});
var sync = $('sync');
var async = $('async');
var loading = $('loading');
var working = $('working');
var loop = $('loop');
Event.observe(sync, 'click', function() {
var breakNumber = 500;
var callback = function() {
// ここが重いということにする。例えば、以下はまぁまぁ重い。
while (breakNumber--) {
working.appendChild(Builder.node('div', {className: 'test'}));
document.getElementsByClassName('test');
}
loading.removeChild(loading.firstChild);
loop.innerHTML = 501 - breakNumber;
sync.disabled = false;
}
loading.appendChild(Builder.node('div', [loadingImage, "Loading..."]));
sync.disabled = true;
setTimeout(callback, 0);
});
});

あ。ちなみにprototype.jsとscript.aculo.usがあることを前提に書いているので、その辺は適当にほげほげしてください。まぁ、ここではsetTimeoutを使用して、その中で重い処理を実行していますね。処理を始める前にアニメーション画像を出して、処理が終わる際にローディングの画像を消す処理をしています。そして、while文の中を勝手に重い処理としてここでは使用しています。しかし、このwhile文が流れている間、いや正確にはcallback関数が実行されている間はアニメーションGIFが止まります。

そこで、アニメーションGIFを止めないような方法を考えました。その根本にある考えは。。。重い処理は一つの関数に入れないということです。つまり、一つ関数の中にループで重い処理を実行させるのではなく、再帰を使用して何個も関数を呼び出す必要があります。もちろんそれが再帰処理ができないような重い処理であればこの方法は無理ですが、往々にして重い処理というのはDOMを使ってイテレーションを使用するところになる可能性が高いと思いますので、それを再帰処理に置き換えましょう。そして、修正したコードは以下の通りです。

Event.observe(window, 'load', function() {
var loadingImage = Builder.node('img', {src: 'loading.gif'});
var sync = $('sync');
var async = $('async');
var loading = $('loading');
var working = $('working');
var loop = $('loop');
Event.observe(async, 'click', function() {
var breakNumber = 500;
var callback = function() {
if (breakNumber--) {
working.appendChild(Builder.node('div', {className: 'test'}));
document.getElementsByClassName('test');
setTimeout(callback, 0);
} else {
loading.removeChild(loading.firstChild);
async.disabled = false;
}
loop.innerHTML = 501 - breakNumber;
};
loading.appendChild(Builder.node('div', [loadingImage,"Loading..." ]));
async.disabled = true;
setTimeout(callback,0);
});
});

これで、重いループををしていても、だいたいの場合はアニメーションGIFが止まらずに済みます。「だいたいの場合」と書いたのは理由があります。実は、私の実環境では、もっと重い処理をしなければいけない用件がありましたので、修正版でもアニメーションGIFが動きませんでした。正確にはfirefoxでは大丈夫でした（たぶんそれほど重くなかったのが原因かもしれません。）が、IE6ではアニメーションGIFが止まりました。原因は、再帰の中で呼び出しているsetTimeoutのmillisecondの値でした。私はどうせ次の処理を実行してもらうのだから0でいいのではないか、と考えていたのですが、0だとすぐ関数をエンキューするのはいいのですが、現在走っている処理が終わると、すぐキューにたまった関数をデキューして実行するので、JavaScriptの処理が常に動いていることになったようです。あくまで想像ですが。なので、ここにラグを与える必要があったのです。そこで、setTimeoutに渡すmillisecondの値を適当な数値に変更すると、カクカクするけど、アニメーションGIFが動いてくれました。
動くサンプルは以下に置いておきます。ちなみにこのサンプルはカクカクしません。
Animation GIF and JavaScript setTimeout

404 Blog Not Found:javascript - ページはいつ再描画されるかが激しく参考になりました。

先日、jQuery開発者向けメモを見て、一通り試してみましたがなかなか直感的に書けそうなライブラリなので今後使用することを検討してみます。今、開発の勢いが一番あるライブラリなので追いかけたりするのが楽しそうですね。prototype.jsとscript.aculo.usは、なかなか新たなリリースが無く、ちょっとさみしいですが、これはこれでライブラリとして成熟段階に入ったといことでアリなのでしょうね。

さて、本日はTOEICを受けてきました。過去に２回ほど受けたのですが、相変わらず時間が足らなかったです。問題が中途半端に全問解けそうなので、ついついちゃんと読んでやってしまうのが原因です。そのため最後に15問ほど残ってしまいます。スピード勝負はつらいですね。でもまぁ、おそらくそれなりのスコアは出たでしょう。試験地の愛知大学が思ったよりもとてもキレイでした。

先日激しくヘコむことがありましたが、ようやくすっきりしました。今日から強く生きていこうと思います。

DOM検索効率化のメソッド群を作ってみた。

というわけで、もういっちょ。考えていたDOM検索効率を考えたメソッド群を作ってみた。

ええと、prototype.jsのElementオブジェクトにaddMethodsしていることからもわかるようにprototype.js必須っす。ええと、私の使っているprototype.jsは、1.5.1ね。script.aculo.us（v1.7.1_beta3）と一緒に使っているので。

document.getElementsByClassNameAndTagName = function(className, parentElement, tagName) {
if (Prototype.BrowserFeatures.XPath) {
return $(parentElement).getElementsByClassName(className);
} else {
var children = $(parentElement).getElementsByTagName(tagName || '*');
var elements = [], child;
for (var i = 0, length = children.length; i <length; i++) {
child = children[i];
if (Element.hasClassName(child, className))
elements.push(Element.extend(child));
}
return elements;
}
}
Element.addMethods({
getElementsByClassNameAndTagName: function(element, className, tagName) {
return document.getElementsByClassNameAndTagName(className, element, tagName);
},
nextElement: function(element) {
do {
element = element.nextSibling;
} while (element && element.nodeType != 1);
return $(element);
},
previousElement: function(element) {
do {
element = element.previousSibling;
} while (element && element.nodeType != 1);
return $(element);
},
firstChildElement: function(element) {
var child = element.firstChild;
while (child && child.nodeType != 1) {
child = child.nextSibling;
}
return $(child);
},
lastChildElement: function(element) {
var child = element.lastChild;
while (child && child.nodeType != 1) {
child = child.previousSibling;
}
return $(child);
},
childElements: function(element) {
var children = [];
var child = element.firstChild;
while (child) {
if (child.nodeType == 1) {
children.push($(child));
}
child = child.nextSibling;
}
return children;
},
childElement: function(element, index) {
var nodeIndex = 0;
var child = element.firstChild;
while (child) {
if (child.nodeType == 1 && index == nodeIndex++) {
return $(child);
}
child = child.nextSibling;
}
return null;
},
cleanWhitespaceRecursive: function(element) {
var f = function(element) {
var child = $(element).cleanWhitespace().firstChild;
while (child) {
if (child.nodeType == 1) {
f(child);
}
child = child.nextSibling;
}
};
f(element);
return element;
}
});

nextElement, previousElementはそのまんま。textNodeはすっ飛ばして、elementNodeだけを見ている。firstChildElementとlastChildElementはfirstElementとlastElementって命名しようかと思ったけど、childだということを意識したかったのでちょいと冗長だけど、これで堪忍してや。で、意味もそのまんま。textNodeをすっ飛ばして最初や最後のelementNodeを返す。

childElementsは、前回のポストの結果を考慮してfirstChildとnextSiblingを採用。elementNodeの配列を返す。childElementは、index指定でelementNodeを返す。本当は、こんな感じでchildElementsメソッドの返す配列のindexを返す方がすっきりしていていいんだけどなぁ。

childElement: function(element, index) {
return $(element).childElements()[index];
},

しかし、それだとnextSiblingを全て見てまわってしまうので、遅くなりそうなので、不採用。

cleanWhitespaceRecursiveはついでの産物。今回作成したものとは関係がないのだけども、一応。HTMLコーダにじかにHTMLを書かれるとwhitespaceが入ってしまい、困るので再帰的に消してみることにした。JavaScriptで再帰をするときってやっぱり、ローカル変数に関数をぶちこんで、それを何度も呼び出す方がいいのかな、と思ったので、自分自身を何度も呼び出すような方は不採用。
自分自身を呼び出すのは、こんな感じか。

cleanWhitespaceRecursive: function(element) {
element = $(element);
var child = element.cleanWhitespace().fistChild;
while (child) {
if (child.nodeType == 1) {
child.cleanWhitespaceRecursive();
}
child = child.nextSibling;
}
return element;
}

どっちがいいんだろうなぁ。。。

で、本当は、オプションで、$指定で返すか、そのままのelementを返すかを指定できるようにするかで迷ったのだけど、prototype.jsと一緒に使うことを前提としているので、$で返すようにした。これもパフォーマンスに関係してくるんだけど、まぁ、その辺は考慮中。

つーか、また後で追記したり、ソース修正するかもしれん。名前はなんでもよかったのだけど、domx.jsとしよう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script language="JavaScript" type="text/javascript" src="js/prototype.js"></script>
<script language="JavaScript" type="text/javascript" src="js/scriptaculous.js"></script>
<script language="JavaScript" type="text/javascript" src="domx.js"></script>
<script language="JavaScript" type="text/javascript">
Event.observe(window, 'load', function() {
var mainContainer = $('main');
var fc = mainContainer.firstChildElement();
fc.style.backgroundColor = '#eee';
var lc = mainContainer.lastChildElement();
lc.style.backgroundColor = '#aaa';
var ce = mainContainer.childElement(1);
ce.style.backgroundColor = '#ddd';
var ne = ce.nextElement();
ne.style.backgroundColor = '#ccc';
var pe = lc.previousElement();
pe.style.backgroundColor = '#bbb';
$A(mainContainer.childElements()).each(function(e) {
e.style.margin = '0.5em';
});
var sushinoneta = mainContainer.getElementsByClassNameAndTagName('sushinoneta', 'input');
$A(sushinoneta).each(function(neta) {
neta.style.marginLeft = '20px';
switch (neta.name) {
case 'tako':
neta.value = '380';
break;
case 'ikura':
neta.value = '420';
break;
case 'uni':
neta.value = '600';
break;
default:
neta.value = '360';
break;
}
});
var before = $('before');
before.appendChild(Builder.node('h1', 'Before cleanWhitespaceRecursive'));
before.appendChild(Builder.node('textarea', {cols: '100', rows: '5'}, mainContainer.innerHTML));
mainContainer.cleanWhitespaceRecursive();
var after = $('after');
after.appendChild(Builder.node('h1', 'After cleanWhitespaceRecursive'));
after.appendChild(Builder.node('textarea', {cols: '100', rows: '5'}, mainContainer.innerHTML));
});
</script>
<title>DOMX Demo</title>
</head>
<body>
<div id="main">
<div>
<label>
<span>tako:</span>
<input type="text" name="tako" class="sushinoneta" />
</label>
</div>
<div>
<label>
<span>ika:</span>
<input type="text" name="ika" class="sushinoneta" />
</label>
</div>
<div>
<label>
<span>uni:</span><input type="text" name="uni" class="sushinoneta" />
</label>
</div>
<div>
<label>
<span>ikura:</span><input type="text" name="ikura" class="sushinoneta" />
</label>
</div>
<div>
<label>
<span>maguro:</span>
<input type="text" name="maguro" class="sushinoneta" />
</label>
</div>
</div>
<div id="before"></div>
<div id="after"></div>
</body>
</html>

ソースはここ。

domx.js
ライセンスは適当っす。自己責任で使ってちょ。

で、上のソースを動かす形にしたデモもここに置いておく。domx demo

うーん。そろそろjQuery使ってみようかなぁ。。。onReadyとか便利そうだし。。。インデントがタブなのが非常に嫌なので、敬遠しているのだけど。。。

全然関係ないが、ここ二日ほど愛知県図書館で開発をしている。なかなか良いね。ホットスポットもあるみたいだけど、契約をしていないのでインターネットにつなげない。でも、そのおかげで効率がいいよん。インターネットがあるとダラダラしちゃって、ダミだ。

DOM検索効率化をもう少し追ってみる。

やったよ。やった。ようやくキーボードが届いたよ。ここ3ヶ月、私のキーボードはC-xと]}のキーが壊れていたのだけど、ようやく快適に打てるようになったよ。私の状態を見兼ねて買ってくれた学生時代の恩師の稲葉先生どうもありがとうございます。つーか、そのくらい自分で買えばいいのだけど、なんか買う気がなかなか起こらなくて、ダラダラしてました。。。

で、さっそく簡単なプログラムを書きはじめている。えと、実はまだDOM検索周りを調べているのだけど、一つ疑問があがってきた。それは以下の通り。

childNodesでの検索とfirstChildとnextSiblingの検索について。つまり、どちらでも子ノードを取得することができるのだけど、実際どっちを使ったらいいの？

ググってみるとパフォーマンスを見ている人がいたのだが、childNodesよりも、fistChildを取ってnextSiblingで検索する方が速いということらしい。特に、IE6が良くないとのこと。ブラウザの実装によるのね。。。
new Blah().list(); node.childNodes[] performance
うーむ。てっきりnextSiblingって、いかにもリンクリストな感じでその要素の数を線形探索しないといけないから、O(log(n))で、childNodesでindex指定で取得したら、O(1)で速いんだろうなぁ、なんて思っていたのだけど、どうやらそうでないみたい。。。と鵜呑みにするのもどうか、と思うのだが、まぁ、いいや。

ええと、何でこんなことを調べているかと言うと、私はchildNodesからelementNodeだけの配列を取得するようなメソッドが欲しかったので、作ろうと思っていたのだ。そして、その際に、firstChildからnextSiblingでグルングルン回すか、childNodes分こっちもグルングルン回するかどっちにしようかな、と思っていたのだ。そこで自分でベンチマークを取ってみたよ。まぁ、結局、全てを線形探索するのだから、どっちでもいいような気がするけども。。。で、ベンチマークツールはamachang氏のbenchmark.jsを使用した。

ソースはこんな感じ。ここにサンプルも置いておくよ。childNodes && firstChild + nextSibling Benchmark

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</meta><meta http-equiv="Content-Style-Type" content="text/css">
</meta><meta http-equiv="Content-Script-Type" content="text/javascript">
<script language="JavaScript" type="text/javascript" src="js/prototype.js"></script>
<script language="JavaScript" type="text/javascript" src="js/scriptaculous.js"></script>
<script language="JavaScript" type="text/javascript" src="benchmark.js"></script>
<script language="JavaScript" type="text/javascript">
Element.addMethods({
_childElementsByFirstChildNextSibling: function(element) {
var children = [];
var child = element.firstChild;
while (child) {
if (child.nodeType == 1) {
children.push(child);
}
var child = child.nextSibling;
}
return children;
},
_childElementsByChildNodes: function(element) {
var children = [];
var nodes = element.childNodes;
var child = null;
for (var i = 0, l = nodes.length; i <l; i++) {
child = nodes.item(i);
if (child.nodeType == 1) {
children.push(child);
}
}
return children;
},
_childElementByChildNodes: function(element, index) {
var nodeIndex = 0;
var nodes = element.childNodes;
var child = null;
for (var i = 0, j = 0, l = nodes.length; i <l; i++) {
child = nodes.item(i);
if (child.nodeType == 1 && index == j++) {
return child;
}
}
return null;
},
_childElementByFirstChildNextSibling: function(element, index) {
var nodeIndex = 0;
var child = element.firstChild;
while (child) {
if (child.nodeType == 1 && index == nodeIndex++) {
return child;
}
child = child.nextSibling;
}
return null;
}
});
benchmark({
'initialize': function() {
for (i = 0; i <5000; i++) {
$('main').appendChild(Builder.node('div', 'item:' + i));
}
},
'firstChild + nextSibling childElements': function() {
$A($('main')._childElementsByFirstChildNextSibling()).each(function(e) {
e.style.margin = '0.5em';
});
},
'childNodes childElements': function() {
$A($('main')._childElementsByChildNodes()).each(function(e) {
e.style.margin = '0.5em';
});
},
'firstChild + nextSibling childElement': function() {
var ce = $('main')._childElementByFirstChildNextSibling(50);
ce.style.backgroundColor = '#ddd';
},
'childNodes childElement': function() {
var ce = $('main')._childElementByChildNodes(50);
ce.style.backgroundColor = '#ddd';
},
'prototype.js down + next': function() {
var ce = $($('main').down()).next(49);
ce.style.backgroundColor = '#ddd';
}
});
</script>
<title>childNodes && firstChild + nextSibling Benchmark + next</title>
</script></meta></head>
<body>
<h1 style="text-align:center;">childNodes && firstChild + nextSibling Benchmark</h1>
<div id="main"></div>
</body>
</html>

firefox2.0.0.7の私の環境での結果は。。。

preparing ...
let's go!
.
*** initialize ***
result : 2763.966739[ms]
.
*** firstChild + nextSibling childElements ***
result : 680.966739[ms]
.
*** childNodes childElements ***
result : 400.966739[ms]
.
*** firstChild + nextSibling childElement ***
result : 48.991075[ms]
.
*** childNodes childElement ***
result : 51.991075[ms]
.
*** prototype.js down + next ***
result : 440.966739[ms]
.
finish!

childNodesの方が速い。まぁ、あんまり変わらないけど、予想と違うぞ？つーか、downとnextの組み合わせ遅すぎ。
ついでにIE6でも見てみる。

preparing ...
let's go!
.
*** initialize ***
result : 67827.967579[ms]
.
*** firstChild + nextSibling childElements ***
result : 1151.967579[ms]
.
*** childNodes childElements ***
result : 14900.967579[ms]
.
*** firstChild + nextSibling childElement ***
result : 59.089179[ms]
.
*** childNodes childElement ***
result : 3354.967579[ms]
.
*** prototype.js down + next ***
result : 22592.967579[ms]
.
finish!

うーん。洒落になってねぇ。ブラウザが死んだかと思たよ。。。childNodes重いっす。。。まぁ、線形探索っぽくchildNodesのitemを見て回っているので、遅くなることはしょうがないのだけど、なんとかならんかな。。。textNodeをすっ飛ばさなくてもいいのだったら、childNodesでindex指定で一発で取れて速そうだけど、今回の目的のelementNodeだけが欲しいならダメだね。こりゃ。

というわけで、firefoxでは、少しだけchildNodesの方が速かったのだけど、IE6のためにfirstChildとnextSiblingを採用するということになりました。。。つーか、downとnextはさらに使いものにならん。。。

prototype.jsのcleanWhitespaceなんかを見てみると、firstChildからnextSiblingを取っているのは理由があったのね。

DOM操作は自分で書いた方が良さそう。

未だ、prototype.js。しかし、DOM周りはやっぱり重くて使い物にならん。。。nextとかあかんね。引数無しで使っても重すぎ。というわけで、自作でnextElementとかのメソッドを追加するのが良さそうだ。まぁ、とりあえず調べてみた。そしたら、はてなの匿名ダイアリーに結構コッテリしたソースが載っているじゃない？つーか、このレベルのJavaScriptが書けたら、いいよなー。

というわけで、一応リンク。つーか、読みがいもあるし、いいかもしんね。つーか、Tenって何？
http://anond.hatelabo.jp/20070719173038

えーと、特に使えそうだと思ったのは、Ten.DOM周り。このままじゃ使えんけど、まさにやりたかったことが書いてある。

Ten.DOM = new Ten.Class({
getElementsByTagAndClassName: function(tagName, className, parent) {
if (typeof(parent) == 'undefined') {
parent = document;
}
var children = parent.getElementsByTagName(tagName);
if (className) {
var elements = [];
for (var i = 0; i <children.length; i++) {
var child = children[i];
var cls = child.className;
if (!cls) {
continue;
}
var classNames = cls.split(' ');
for (var j = 0; j <classNames.length; j++) {
if (classNames[j] == className) {
elements.push(child);
break;
}
}
}
return elements;
} else {
return children;
}
},
removeEmptyTextNodes: function(element) {
var nodes = element.childNodes;
for (var i = 0; i <nodes.length; i++) {
var node = nodes[i];
if (node.nodeType == 3 && !/\S/.test(node.nodeValue)) {
node.parentNode.removeChild(node);
}
}
},
nextElement: function(elem) {
do {
elem = elem.nextSibling;
} while (elem && elem.nodeType != 1);
return elem;
},
prevElement: function(elem) {
do {
elem = elem.previousSibling;
} while (elem && elem.nodeType != 1);
return elem;
},
scrapeText: function(node) {
var rval = [];
(function (node) {
var cn = node.childNodes;
if (cn) {
for (var i = 0; i <cn.length; i++) {
arguments.callee.call(this, cn[i]);
}
}
var nodeValue = node.nodeValue;
if (typeof(nodeValue) == 'string') {
rval.push(nodeValue);
}
})(node);
return rval.join('');
},
onLoadFunctions: [],
loaded: false,
timer: null,
addEventListener: function(event,func) {
if (event != 'load') return;
Ten.DOM.onLoadFunctions.push(func);
Ten.DOM.checkLoaded();
},
checkLoaded: function() {
var c = Ten.DOM;
if (c.loaded) return true;
if (document && document.getElementsByTagName &&
document.getElementById && document.body) {
if (c.timer) {
clearInterval(c.timer);
c.timer = null;
}
for (var i = 0; i <c.onLoadFunctions.length; i++) {
c.onLoadFunctions[i]();
}
c.onLoadFunctions = [];
c.loaded = true;
} else {
c.timer = setInterval(c.checkLoaded, 13);
}
}
});

でも、私はElementとか思いっきり拡張しちゃうタイプなので、nextElementやpreviousElementは、addMethodしちゃう。ついでに、childElementsなども作っちゃおうかなー。そして、引数に数字を当てて、とっちゃうような感じで作ろうかしらん。他にも、prototype.jsのcleanWhitespace()辺りをrecursiveにする奴とか。

しかし、今は、うちのキーボードが壊れて、「カッコ閉じる」が入らないので、新しいキーボードが来てからにしよう。

まだまだバグが多いのね。

最近は、ずっとJavaScriptを書いていて、世間ではjQueryが注目されている中、私は未だprototype.jsとscript.aculo.usを使っている。今の仕事では結構、面倒くさいこといろいろやっているんだけど、prototype.jsやscript.aculo.usってまだまだバグが多いのね。というか、script.aculo.usの中に入っているprototype.jsが古いっていうのもあるんだろうけど、悩ましいなぁ。ここではまると結局、中のソースを見たりしないといけないので、時間がかかってしょうがない。

で、はまったついでにメモとして書いておく。

Insertion.Afterでtableのtrを複数入れようとしたときに順番が逆になる。

えと、今作っているところの一つはtd要素にrowspanとか使っているので、複数のtr要素を一つの行として扱わないといけないところがあった。
そこで、rowspan分挿入しようとしたのだが、順番が逆になって入ってしまう。。。前回は、結構バグに悩んだけど、今回からはもう既存のバグをまず探す。そして、解決されていればいつ対応されたのかバージョンを探る。で、今回見つけたのは、これ。

Insertion.After inserts table rows the wrong way round in IE

Prototype.jsでは、1.5.2でFixedらしい。ということは、script.aculo.usと同時に使えないね。アプリ側でPrototype.Versionを見て、1.5.2より下の場合のみ拡張するコードを書いたよ。

draggableな要素がoverflowのhidden, scroll, auto(たぶん)のときには、そのoverflowを指定してある要素の外では見えなくなっちゃう。

えと、これはかなりはまった。。。。orz....divでoverflow:scrollな要素が二つあって、そこの間をドラッグドロップをしようとしていたのだけど、移動先のdivに入るとドラッグレイヤーの下に入ったかのように見えて、消えちゃうの。で、いろいろ探した結果、結構ホットなバグみたい。IE6ではちゃんと動くけど、mozillaとIE7ではダメというちょっと不思議なバグ。つーか、IE6の動作がそもそもいかんのかな。。。
draggables are stuck in a div with overflow:scroll. A way to move them to upmost dom level needed

Dragging an element outside a overflow:auto container

Drag draggables outside an overflow:auto div to an external droppable container

で、解決方法は結構大変。えと、問題なのは、
draggables are stuck in a div with overflow:scroll. A way to move them to upmost dom level needed

I discussed this with Thomas some time ago, and the problem is that the element we move (be it in ghosting mode or not) usually must remain at the same DOM level because otherwise, styles might get lost. I'm working on a solution right now, too, it will involve a new option you can use to assign a class name to the element while it's being dragged. If this class name is supplied, the element will be attached to the body. Let's see if this works, I'll provide the patch as soon as it is ready

ということなのだ。つまり、z-indexを付けようがどうだろうが、ダメなものはダメなのだ。解決方法としては、body要素の下にdraggableな要素をappendChildしてやればいいのだが、それをするとstyleが無くなる可能性ががあるというわけ。もちろん位置も合わせないといけないしね。つまり、ドラッグする要素のstyleがそれに付けられているclassやidなどで完結していればいいのだが、そうでないときは、いきなりbody要素の下に付けてもさぁ、困ったな、といったことが起きるのだ。li要素とか。。。で、未だ正しい解決方法は出てきていない。まぁ、こういうところがハックのしがいがあるんだよね。

今回の私が使用したかったところは、div要素で完結していたので、width指定とかもしておけば、body要素の下に置いても大丈夫だった。後は、Positionの位置を合わせるだけ。
Draggables.addObserverのonStartとonEndを使用して、要素をbody直下に変えたり、戻したりしたらいけた。位置がずれるところはちょっと泥臭いことしたけど、もう少しキレイに書けたらここに載せるかもしれん。

しかし、
Super.mario.bros
辺とか見ると自分はまだまだっす。。。先は長いなー。