国立新美術館の<a href="http://www.kayamaten.jp/">加山又造展</a>を見てきました。
とにかく、一度は実物を見たかったので待ってました。

<a href="http://www.flickr.com/photos/20720251@N04/3296473397/" title="IMG_3578.JPG by itoyohja, on Flickr"><img src="https://farm4.static.flickr.com/3240/3296473397_8953d0bd16.jpg" width="500" height="375" alt="IMG_3578.JPG" /></a>


<a href="http://www.flickr.com/photos/20720251@N04/3297297402/" title="IMG_3557.JPG by itoyohja, on Flickr"><img src="https://farm4.static.flickr.com/3514/3297297402_3eae9bf92c.jpg" width="500" height="375" alt="IMG_3557.JPG" /></a>

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

<a href="http://www.flickr.com/photos/20720251@N04/3296472549/" title="IMG_3563.JPG by itoyohja, on Flickr"><img src="https://farm4.static.flickr.com/3520/3296472549_2fdc1e425f.jpg" width="375" height="500" alt="IMG_3563.JPG" /></a>

中。

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

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

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

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

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

<a href="http://www.flickr.com/photos/20720251@N04/3297298402/" title="IMG_3574.JPG by itoyohja, on Flickr"><img src="https://farm4.static.flickr.com/3463/3297298402_dd15ddba2c.jpg" width="500" height="375" alt="IMG_3574.JPG" /></a>

雪・月・火

JavaScriptでドラッグ＆ドロップ。



<img alt="Draggable List 1" src="https://farm4.static.flickr.com/3330/3274319724_347db04230.jpg" width="500" height="161" />

<img alt="Draggable List 2" src="https://farm4.static.flickr.com/3452/3273500707_7653c8de30.jpg" width="500" height="225" />

リスト要素をドラッグして順番を変えられます（<a href="/lab/draggable_list/">サンプル</a>）。

# オレオレイベント予約関数だとremoveEventListenerできない

だめじゃん。removeEventListenerできないとstopDragできない。

```js
//removeEventListenerが必要なければこれでいいんだが・・・
Event.observe = function(_el, _func, _callback) {
 if (_el.addEventListener) {
 _el.addEventListener(_func, _callback, false);
 } else if (_el.attachEvent) {
 _el.attachEvent("on"+_func, _callback);
 }
}
```

&nbsp;

<iframe width="320" height="240" style="width: 120px; height: 240px;" src="https://rcm-jp.amazon.co.jp/e/cm?t=110changcom-22&amp;o=9&amp;p=8&amp;l=as1&amp;asins=4873113296&amp;md=1X69VDGQCMF7Z30FM082&amp;fc1=000000&amp;IS2=1&amp;lt1=_blank&amp;m=amazon&amp;lc1=0000FF&amp;bc1=000000&amp;bg1=FFFFFF&amp;f=ifr" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>

で、シコシコ`if`文で分岐させました。もっかいJavaScript第５版読んでリスナー解除できるイベントユーティリティ書こう。

ドラッグ＆ドロップはイベントたらい回しまくりです。それぞれのli要素にmouseDownイベントをリスナー登録しておきます。mouseDownイベントが送信されたらstartDrag関数を呼びwindowオブジェクトにmouseMoveイベントをリスナー登録、同時にwindowオブジェクトにmouseUpイベントをリスナー登録。mouseUpイベントが送信されたらstopDrag関数を呼びmouseMoveイベントとmouseUpイベントをリスナー解除します。

こいつらをリスナー解除させるためにイベントハンドラは全部ローカル変数に格納。スコープを通したいので変数もほとんどローカル変数。外から見る必要がある変数だけthisキーワードで宣言しています。JavaScriptではなるべくローカル変数使った方が取り回しがいいのかも。

このとき、なぜかIEではwindow.attachEventではなくdocument.attachEventでないと動きません。マウス関係のイベントだけそうなの？

# ドロップの仕組み

晴れてmouseMoveイベントが送信できたら今度はドロップです。試行錯誤の結果、ダミー要素をマウスに追随させ、この要素と、もともとのリスト要素群の間に挿入されたドロップ候補とで接触判定をすることにしました。

接触していたらドロップ候補を表示します。mouseUpイベントが送信された時接触しているドロップ候補があれば、そのドロップ候補の直前にドラッグ対象になった要素をinsertBeforeして、ダミー要素やドロップ候補をすべて削除、ドラッグ＆ドロップを終了します。

<img alt="Draggable List 3" src="https://farm4.static.flickr.com/3332/3274401826_409e4c9d97.jpg" width="500" height="161" />

# IE6だけロード直後にテキストノードしかクリックできない

li要素の中身がテキストノードだと、テキストの部分しかクリックできない。一旦、テキストをドラッグするとli要素全体がクリック可になる。unselectableとかいろいろやってみたが直らない。のおおおおおおおおおぉぉぉぉぉぉぉぉぉぉぉぉぉぉ！！！！！！！！！！！！

# JavaScriptでもdispatchEvent

<a href="http://www.fladdict.net/blog-jp/archives/2005/06/javascript.php">イベント・ドリブンなJavaScriptのやり方</a>

このEventDispatcherをそのまま使わせていただきました。ASのようにカスタムイベントを発射できる。すばらしい。

Archive for 2009.02

雪・月・火

ドラッグ＆ドロップで入れ替え可能なリスト