って、本当に少しだけ。。

getElementsByClassNameは遅いというのは有名な話だけども、少しだけ効率化してみた。って、メッチャ情けない効率化だけども、一応効果はあるんだぜ。IE限定だけどね。私の環境のXPathのないIEではだいぶ速くなったよ。MozillaはそのままXPathにお任せ。

まぁ、getElementsByClassNameにタグも指定できるようにしただけ。つーか、本当にいじったのほんの少し。。。orz
だいたいclass指定は同じ要素にすることが多いと思うんだけど、getElementsByClassNameでは、getElementsByTagNameで全て持ってきちゃっているのね。ここを少しだけ改良しただけ。

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;
 }
}

えと、他にもprototype.jsのDOM操作はヤヴァイね。下手に使うと遅すぎ。。。next, previous, up, downとか。。。どこかにも書いてあったけど、引数を付けるとダメダメ。付けなくてもダメだけど。。まぁ、最初はカッコよく書くためにprototype.jsで書いて、それから効率化するときに適当にnextElementとかの自分用メソッドを拡張なんかしちゃったりして、重そうな処理を削れば結構快適になるがいいかもね。

最近はファウラーのリファクタリングを読んでいるけど、最初からうまく行く設計なんてないよねー。全く何もないところからはさすがに無理だと思うけど、思いついたらその都度設計を変えていけばいいと思うんだよね。で、今回はリファクタリングを結構していたため、パフォーマンス改善周りもやりやすかったのは感激。

しかし職業としてプログラミングをしていると、構造の正しさ、美しさやアルゴリズムよりも、泥臭い対応の方が現実的だったりするのが、なんというか、そういうのちょっと嫌。

最近は、激しくJavaScript。いやー。setTimeoutが使いこなせないので、まだまだなのだけども、勉強しながらやっているっす。つーか、最近はまったのよ。Elementがextendされない問題についてね。あ。ちなみにIEのみね。でも、IEで問題があるサイトなんて使えないので、結構大事だと思う。

その件について、いろいろ悩んでググッていたら、[javascript,prototype]innerHTMLに +=(文字列結合)するのはよろしくないみたいのサイトを発見したのだけど、まさしくこの状態。つーか、結構前のポストだし解決されたんだ、と思ってscript.aculo.usの中に入っているprototype.jsを見てびっくり。1.5.0じゃねーか。つまり、未解決状態。。。まぁ、私は文字列結合していないんだけど、問題があったけどね。同じ要素オブジェクトを削除したり、追加したりしているのが問題だったみたい。バグフィクスにもそんなようなメッセージになっているので。

Changeset 6385

Make Element.extend work on IE for Nodes with the same ID that where discarded.

えと、このバグフィクスは、1.5.1_rc2で解決されているんだけども、だいたいprototype.jsはscript.aculo.usと一緒に使うので（って私だけ？）、問題が残っているんだな。上にも書いたようにscript.aculo.usのバージョン1.7.0（現時点の正規版）に入っているprototype.jsは1.5.0なので。速く次のバージョンでないかな。ってか、ベータ版を使えば、この問題はないので、それでいいのかも。つーか、できれば正規版のバージョンを上げて欲しい。

で、この問題を解決するには、Element.extend doesn’t seem to work in IE sometimesにも書いてあるように上のChangeset 6385のリンクに書いてあるようにするか、ベータ版を使うか、どちらか。

そういえば、今回の件でscript.aculo.usについて調べていたら、こんなe-bookが出ているらしい。欲しいにょ。まだベータみたいだけど、$22なら買いかなー。つか、うちのPC壊れているので、今買ってもなんかなー。と言っている間に一年くらい過ぎそうのだが。。。うん。もう少し様子見よう。7章と8章でも読んで買うかどうかを決めようっと。まだまだ勉強が足りないっす。

ちょっと前にブックマークしておいたYou think you know (JavaScript) but you have no ideaのビデオを見ていたのだけど、この講義はイイ。復習にイイ。しかも、英語の勉強になる。私にはちょうどいいレベルでこのくらいだったらほぼ何を言っているか理解できる。

いきなり「おはよう。ようこそ、ブレアウィッチプロジェクトへ」って外しているところがなんとも良いね。そこで、Douglas Crockford氏のファンになってしまいました。彼のビデオは、YUI Theaterにいくつか上がっているみたいなので、YUI Theaterを毎日一つずつくらい見ようと思う。

明日は、これを見よう。ktkr約50分。。。
Douglas Crockford — “Quality”

Yahoo! JavaScript Architect Douglas Crockford provided the anchoring keynote for Yahoo!’s annual internal web-development conference in March, 2007. The subject of the talk is “Quality” — the processes by which we engineer quality into our software and, of course, the processes by which we often fail to do so.

というわけで、自分の英語力も試してみたくなったので、TOEICでも受けてみることにする。ついでにスピーキングとライティングも見ることができるものもあるみたいなので、そちらも受けてみる。学生の頃、受けたときがパーセンタイルで80%くらいだったので、それよりもは上がっているかな。まぁ、仕事には全く関係ないけどね。。。まぁ、エゴですよ。エゴ。

実は、会社を辞めてからの方が忙しい。。。会社にいたときは、「会社での仕事をする」という正統な理由があったため、ずっと後回しにしていたTODOが溜っていたのだ。で、最近は、ずっと家にいるので、溜ったTODOをこなすのに、ヒーヒー言っている。

最近は、ほとんどJavaScriptしか書いていない。もしかしたらPHPよりも得意な言語かもしれないので、まぁ、いいのだが、結構いっぱいいっぱい。

で、最近、Ajaxで受け取った結果を非同期ではなく、同期で次の処理に使いたいときがあった。つまり、Asynchronousではなくて、Synchronousなので、Sjaxか。って、ちゃんとそういう言葉があるんだね。

「Sjaxとは – はてな」

私の理解が正しければ、単純に、Ajax.Request（すでにprototype.js前提）のoptionsにasynchronous: falseって書くだけだけどね。

Ajaxの場合は、onLoadingとかonCompleteのイベントにゴニョゴニョ書いて返ってきたデータをよろしく加工しちゃったりするわけだが、まぁ、普通にこんな感じ。

new Ajax.Request(
  url,
  {
    method: 'get',
    parameters: $H({'par1': "parameter1desu", 'par2': "parameter2desu"}).toQueryString(),
    onComplete: function(request) {
       // request.responseTextをゴニョゴニョしちゃうの。
       alert(request.responseText);
    }
  }
);

Sjaxの場合は、Ajax.Requestオブジェクトのtransport.responseTextで受け取ったものをゴニョゴニョするって感じ。

var ajax = new Ajax.Request(
  url,
  {
    asynchronous: false, // デフォルトはtrueなので、指定しないとAjaxとなる。
    method: 'get',
    parameters: $H({'par1': "parameter1desu", 'par2': "parameter2desu"}).toQueryString()
  }
);
// ajax.transport.responseTextをゴニョゴニョしちゃうの。
alert(ajax.transport.responseText);

つーか、onCompleteとかonLoadingとかって書いてみたけど、何もしてくれないのね。まぁ、synchronousだから当然だけども。

確かに「Sjaxとは」にも書いてあるように、メリットは、結果をそのまま次の処理で使えちゃうことかな。まぁ、その間、同期なので、止まるけど。でも、ある関数内で、Ajax.Requestなどの結果を修正して返したいときなんかは便利だよね。イベントにそのまま渡して、非同期に処理を実行して終了するものだったらいいけど、それから先にまだまだそのデータを使いたいときとかにね。

私は、どうしても同期をとりたいときがあるんだけど、どうしたらいいのかなー、なんて考えて、フラグを立ててそれを見張るか？とか考えたんだけど、Sjaxでいいのね。

最近、仕事でcontenteditableの挙動に苦しめられている。

contenteditableと言えば、IEで使える編集可能なdivと言ったところか。あと、よろしくexecCommandとかやってあげると、タグを付けてくれたりしてくれる。Mozillaの方で同じようなことをするには、designmodeとかあるらしいのだが、それは使用していない。今作っているのが、IE限定なので。

そのため、IEの挙動をチェックしなければいけないので、まず、普段使っている開発環境をWinにしなければならない。その時点でかなり萎える。そして、contenteditableの中でいろいろすると、やってほしくないことまで勝手に補間されてしまうのだ。

世間一般にあるwysiwygHTMLエディタに、TinyMCEや、FCKeditor、DojoのRich Text Editorとかあるんだけど、どうも嫌だ。wordpressにもデフォルトでTinyMCEが入っていたが、速攻外したし。でも、まぁ、普段ブラウザはfirefoxを使っているから、まだいいのだが、IEの挙動は許せん。

改行すると勝手にPタグを突っ込むので、イベントを見張って、BRタグに変更してあげたり、まぁ、めんどくさいことをいろいろしていたのだが、今回の挙動については激しく鬱になる。
それは、勝手にハイパーリンクを補うことだ。
例えば、shin@homeとか書いたりすると、勝手にメールアドレスと判断して、mailtoのハイパーリンクをつける。同様にhttp://hogehogeとかしても、ハイパーリンクとなる。まぁ、後者のhttp://から始まるのはある程度しょうがないかなーなんて思っているわけだが、shin@homeを変えられるのは嫌だ。メールアドレスとして判別するならば、もう少しマシなチェックをしてもらいたい。ちゃんとその文字列がメールアドレスか正規表現であるでしょ、と小一時間。。。まぁ、これも見張っていて、mailtoのハイパーリンクが来た途端、取り除くってすればいいのかな。他の有効なハイパーリンクとの違いとかを考慮しないといけないので、面倒だけど。

で、実は、フルスクラッチで書いている私が馬鹿で既存のライブラリを使ったら行けるかな、と思って、TinyMCE、FCKeditor、DojoのRich Text Editorを使って実験してみた。Mozillaは問題なし。IEは同じところで勝手にハイパーリンクとなる。もう、これだけメジャーなライブラリがこれなら、拘らなくていいような気がしてきた。しかし、この挙動はウンザリで、contenteditableなんて使いたくないと心から思ったさ。

というわけで、考えていたら、今日少しアイデアが出た。Flashで作ればいいんじゃないの？contenteditableを使用し、自分が制御できないところがあるのが問題なわけで、Flashでやったら、全部制御できるwysiwygエディタが出来そうな予感。実は私は、ActionScriptを昔よく書いていたので、いけるかもしんない。2年ほど書いていないので、ブランクはあるが。。時間があるときにやってみようかなー。いかん、他にやらんといかんことがまだまだある。

Flashでのwysiwygっぽいツールとしては、NOTAというのがあるけど、もう少し構造的なHTMLを書けるものがいいなー。NOTAは、HTML表示するとposition指定をしているって感じで、見た目重視な感じがするので、ちょっと違うって感じがする。あ。でも、DojoのRich Text Editorのチュートリアルに書いてあるように、WYSHASMWMOMNBWYGなんてユーザは考えてねーよ。ってことなので、私のこの考えは逆流しているかもしれない。。。

というわけで今日初めて、WYSHASMWMOMNBWYGという言葉を知りました。”What You See Has A Semantic Meaning Which May Or May Not Be What You Get”の略だって。なげーよ！