泣きそうになる

「ふれていたい」という曲がありまして、アルバムにしか入っていない曲なんですが、これを聞いてaikoを好きになったと言ってもいい曲。弾き語りで歌ってくれて、久しぶりに聞いてかなり極まった状態になりましたが我慢しました。ここで泣いておけば、MCの時にいじってくれたかも！？

即興

客席からキーワードを拾って、そのキーワードで即興。 「朝青龍」「豆腐」「就職」「電子レンジ」などというわけのわからないキーワードにさすがのaikoも消化不良気味で、科白っぽいのを入れてごまかしてたw、本当はもっと、ほろっとくる曲にするつもりだったらしいけど「朝青龍」じゃーねーえw

アンコールのアンコール

アンコールの前に「２、３分したらまた出てくるから」「いつものやつは忘れないで」とぶっちゃけていたaikoですが、それはアンコールのアンコールがあることの伏線だったのか。アンコール２曲、挨拶してハケたあと、サプライズの１曲。そして４月からのLLP13の告知。早えええよ、CD出せよ！３月とかにアルバム出るのか・・？

おまけに

帰って来てから、最近いち押しの吉岡聖恵（いきものがかり）のオールナイトニッポンを聞いていたら、今日のライブに来てたらしい。２階の最前列にいたらしい。気付かなかったわー２階席の客の顔まで見えないわー。

var id = "f_"+type+"_"+callback;

これでは異なる要素の同じイベントハンドラを区別できないです。

というわけで、addListenerの時に要素・イベントタイプ・コールバック・コールバック呼出元と、これらから作成した無名関数もまとめてスタックしておき、removeListenerの時に要素・イベントタイプ・コールバック・コールバック呼出元が全て一致したとき、スタックから取り出した無名関数を返すことにした。

removeListenerの時に同じ素材で新たに無名関数を作っても、比較したときに異なるオブジェクトとみなされてしまうので、最初に作成した変数を参照で（JavascriptのFunctionは参照渡しらしい）呼び出す。この辺、前回時は理解できてなかった。

コールバックに無名関数を使いたい時もあるので、callbackが関数型の場合はスタックに積まずにリスナー登録のみ。これをremoveするには無名関数内でarguements.callee。

EventHandler = {
    addListener: function(element, type, callback, context)
    {
        var func;
        if(typeof(callback)=="function")
        {
            func = callback;
            //
        } else if(typeof(callback)=="string") {
            //
            func = function(e){ context[callback](e); };
            EventHandler.Stack.addStack(element, type, callback, context, func);
            //
        } else {
            return;
        }
        if(element.addEventListener) element.addEventListener(type, func, false);
        else if(element.attachEvent) element.attachEvent("on"+type, func);
    },
    removeListener: function(element, type, callback, context)
    {
        if(!typeof(callback)=="string") return;
        var num = EventHandler.Stack.findStack(element, type, callback, context);
        var func = EventHandler.Stack.getStack(num).func;
        EventHandler.Stack.removeStack(num);

        if(func==null) return;
        if(element.removeEventListener) element.removeEventListener(type, func, false);
        else if(element.detachEvent) element.detachEvent("on"+type, func);
    }
}

こちらはスタックを保持するためのオブジェクト

EventHandler.Stack = {
    _count: 0,
    _list: [],
    addStack: function(element, type, callback, context, func)
    {
        var obj = {
            id: EventHandler.Stack.getUID(),
            element: element,
            type: type,
            callback: callback,
            context: context,
            func: func
        };
        EventHandler.Stack._list.push(obj);
    },
    removeStack: function(num)
    {
        EventHandler.Stack._list.splice(num, 1);
    },
    getStack: function(num)
    {
        return EventHandler.Stack._list[num];
    },
    findStack: function(e, t, cb, ct)
    {
        for(var i=0; i<EventHandler.Stack._list.length; i++)
        {
            var s = EventHandler.Stack._list[i];
            if(s.element==e&&s.type==t&&s.callback==cb&&s.context==ct)
            {
                return i;
            }
        }
        return null;
    },
    getUID: function()
    {
        return EventHandler.Stack._count++;
    }
}

いちお、これでFF、Safari、IEで動いているけど、どうなんでしょう。僕的にはとても便利です。

人生、何かあったわけではなく、最近、ブログを書くのが面倒くさいなーと思うようになっただけです。

あと、前のブログと今のブログを統一してやろうとか画策しているのであまり今のブログの記事を増やしたくない、というのもあります。画策しているだけで何も進んでいませんが。

以前、ドラッグ＆ドロップの仕組みを作ったときにremoveEventListenerができなくて、これじゃダメじゃん的な感じだったわけですが、それを解決する仕組みを考えました。

スコープの維持

イベントハンドラのコールバック関数のスコープはwindowオブジェクトになってしまうので、それを回避するために

var scope = this;
var callback = ・・・
window.addEventLisetner("load", function(event)
{
    callback.call(scope, event);
}, false);

などとしてスコープを維持するのですが、この場合、コールバック関数は無名関数なので、この無名関数の外からはremoveEventListenerすることができません。なんかくやしい。

無名関数を特定する

そこで、このコールバック関数を一意の識別子と一緒にどこかに保管することを考えます。 一意の識別子はイベントタイプとコールバック関数名の組み合わせにします。例えば、１つの要素のクリックに対して同じコールバックを複数登録はしないはずなので。あと、コールバック関数名が必要なので、関数ではなく文字列として引数に渡すようにします。

var scope = this;
var callback = "・・・"
window.addEventLisetner("load", function(event)
{
    scope[callback](event);
}, false);

この識別子とコールバック関数の組み合わせをオブジェクトにして配列にぶち込んでおき、あとで識別子をキーにして取り出せるようにします。識別子はイベントタイプとコールバック関数名でできているので引数として渡せば取り出せます。

EventHandler = {
    stack: [],
    addListener: function(element, type, callback, context)
    {
        var id = "f_"+type+"_"+callback;
        var stack = this.stack;
        var func = function(e){ context[callback](e); };
        var handler = { id  : id   ,
                        func: func };

        for(var i=0; i<stack.length; i++)
        {
            if(id==stack[i].id) return;
        }
        if(element.addEventListener) element.addEventListener(type, func, false);
        else if(element.attachEvent) element.attachEvent("on"+type, func);
        stack.push(handler);
    },
    removeListener: function(element, type, callback, context)
    {
        var id = "f_"+type+"_"+callback;
        var stack = this.stack;
        for(var i=0; i<stack.length; i++)
        {
            if(id==stack[i].id)
            {
                if(element.removeEventListener) element.removeEventListener(type, stack[i].func, false);
                else if(element.detachEvent) element.detachEvent("on"+type, stack[i].func);
                stack.splice(i, 1);
            }
        }
    }
};

EventHandler.stack：識別子と関数名のオブジェクトを積んでおく配列です。

EventHandler.addListener：識別子の生成、コールバック関数の生成、スタックへ積み上げ。ついでにDOM LEVEL2のaddEventListenerとIEイベントのattachEventをラップします。同タイプ、同コールバックのリスナーは登録できないようにしています。

EventHandler.removeListener：スタックから識別子の一致するコールバックを取り出し、removeEventListenerします。ついでにDOM LEVEL2のremoveEventListenerとIEイベントのdetachEventをラップします。

（IE8になってもDOM LEVEL2 EVENTを実装してないってひどすぐる）

作ってみると、なんてことはない単なるオブジェクトなんですけどね・・イベントドリブンの奥は深いですね。

実は国立新美術館は初めてです。雑誌で見たときは馬鹿でかい人工的な曲面に見えて嫌だなと思っていたのですが、実際目の前にすると圧迫感もなく曲線がきれいでニヤニヤしてしまいました。気持ち悪いですね。

中。

展示室に入ってすぐ、3.5×4.3mの巨大な「雪」・「月」・「火」がお出迎え。圧倒されます。こんなに大きいとは思わなかった。加山又造といえば銀色の線で表現された波ですが（僕の中では）、本で見た限りではただの線だと思っていたのですが、ものすごく太く力強い線でした。本物が見れてよかった。

入れ替えで「千羽鶴」が見れなかったのは残念です。所蔵の東京国立近代美術館に行けば見れるのでしょうか・・？

寺院の天井画を描いたり、BMWに絵を描いたり、祇園の山車に飾るタペストリー（？）の原画を描いたり、はたまた陶器と多彩な面もあるんですね。休憩室にCGもありました。Photoshopで描いたそうです。

本で見たことの無い作品もたくさんあり、文句無し。というかぐうの音もでないというか。1,300円払ってもう１周してもいいくらい。

写真は国立新美術館のしかありません・・

ロールオーバーで他の画像を切り替えるサンプル

for文からのイベント予約

for文を回して複数の要素からスコープの異なる他の要素に何かしたいという時、for文内部からaddEventListenerしたりしたい時がありますが、

function hogehoge()
{
    var foo = bar.getElementsByTagName("a");
    var baz = ["0", "1", "2", "3", "4"];
    for(var i=0; i<foo.length; i++)
    {
        var hoge =baz[i];
        var callback = function(){ return hoge; };
        foo.addEventListener("mouseover", callback, false);
    }
}

こんな風にして、それぞれに何かさせようとしても帰ってくるのはhoge="4"=baz[4]ばかりとなります。イベントが発生する時点ではfor文が回りきった後の変数を見に行くことになるようです。

var callback = (function(_hoge){ return _hoge; })(hoge);

そこで、コールバックに渡す関数を()();で囲います。前の括弧は優先して実行（数式で使う括弧と同じ）、後の括弧は通常通り関数に引数を渡します。こうすると_hogeがゾンビのように生き残り、fooにbaz[i]がわたります。これをクロージャなんて言うらしいです。抽象的に書いたので上のコードは間違ってるかもしれません（汗

実際のコードはこちら

Javascriptで画像の先読み

同様に

(new Image).src = "path_to_image/hogehoge.jpg";

こうすると、新しいimg要素が作成され、src属性にパスが代入されるとキャッシュに読み込まれます。Firebugを使うと読み込まれているのが確認できます。

青い線はDOMツリー読み込み完了、赤い線はページ読み込み完了です。ページ読み込み完了後に読み込みを開始しているのがJavascriptでの先読み画像です。

Javascriptは自由度が高く、こういう裏技みたいなコードがあって楽しいですね。クロスブラウザはしんどいですが。