久しぶりに記事を書きます。カンボジア記も絶賛放置中です・・



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

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

# 本題

以前、<a href="/2009/02/post-19.html">ドラッグ＆ドロップの仕組み</a>を作ったときにremoveEventListenerができなくて、これじゃダメじゃん的な感じだったわけですが、それを解決する仕組みを考えました。

# スコープの維持

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

```js
var scope = this;
var callback = //do something...
window.addEventLisetner("load", function(event) {
 callback.call(scope, event);
}, false);
```

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

# 無名関数を特定する

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

```js
var scope = this;
var callback = //do something...
window.addEventLisetner("load", function(event) {
 scope[callback](event);
}, false);
```

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

```js
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を実装してないってひどすぐる）

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

JavaScriptでスコープを維持しつつイベントハンドリングできるしくみ

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


<h3>１日目</h3>

１日目は成田18:00発でベトナムへの移動のみ。

機内で隣が女の子だったんですが、CAと日本語で普通にやりとりしていたので日本人だと思っていたんです（今回は行きも帰りもJAL）。途中で窓の外を見ろといわんばかりのジェスチャーをするので、どうしたのかと思ったら、星がきれいに見えるので感動したらしい。話をしてみるとベトナムの女の子でした。どう聞いても普通の日本語なんですけど・・

ベトナムの兄の住居で１泊。

<h3>２日目</h3>

カンボジア行きの飛行機まで時間があるので近所を散歩。最初の写真はそのときのもの。バイクが故障したんでしょうか。リヤカーの彼はどこから来たんでしょうか・・？

カンボジアへは日本からの直行便はなく、隣国のタイやベトナムから飛行機で入国するか、陸路で国境をこえなければなりません。ちょうど新型インフルエンザが世界的に流行し始めた時期だったのですが、カンボジアはノーチェックでした（タイで感染者が確認された今の状況はわかりません）。

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

シェムリアップ国際空港かっこいい！

日本語のできるガイドとドライバーつきの個人ツアーです。兄がすべて手配してくれました。僕は何もしてません。ごめんなさいごめんなさいごめんなさい

<a href="http://www.happysmiletour.com/index.html">Happy Smile Tour</a>

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

チェックイン後、バー・ストリートで夕食。この辺は観光で来やすそうです。観光地化の激しいシェムリアップですが、１歩脇道に入ると真っ暗です。

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

ナイトマーケット。割と最近できたようなのできれいです。たいていのものは数ドルなので、ガンガン買い物できますが、彼らにとって１ドルは何円ぐらいの感覚なんでしょう。

そんなことで、翌日から遺跡を見て行きます。

ベトナム＆カンボジア１日目・２日目

アンコールワットを見てきました。
とりあえず、ダイジェスト。

<img src="https://farm4.static.flickr.com/3360/3503314883_5b5f50c4fb.jpg" width="500" height="375" alt="IMG_3653.JPG" />


<h3>１日目</h3>

成田からハノイへ。移動のみ

<h3>２日目</h3>

カンボジア入国、アンコールワットに近いシェムリアップへ。

<img src="https://farm4.static.flickr.com/3347/3504123544_8b98e0daf5_m.jpg" width="240" height="180" alt="IMG_3600.JPG" />

<ul>
<li>バー・ストリートで夕食</li>
<li>ナイトマーケット</li>
</ul>

<h3>３日目</h3>

遺跡巡り

<img src="https://farm4.static.flickr.com/3537/3503323865_5db39e4d57_m.jpg" width="240" height="180" alt="IMG_3698.JPG" />

<ul>
<li>アンコール・トム</li>
<li>タ・プローム</li>
<li>バンテアイ・スレイ</li>
<li>アンコール・ワット</li>
<li>プノン・パケン</li>
</ul>

<h3>４日目</h3>

朝5:00起きでアンコール・ワットのサンライズ見学

<img src="https://farm4.static.flickr.com/3412/3504161660_e53fa4e020_m.jpg" width="240" height="180" alt="IMG_3976.JPG" />

午前中はシェムリアップ市内観光

<ul>
<li>戦争博物館</li>
<li>キリング・フィールド</li>
<li>オールド・マーケット</li>
</ul>

午後は遺跡巡り。夜カンボジア出国

<ul>
<li>プリア・カン</li>
<li>ニャック・ポアン</li>
<li>東メボン</li>
<li>プレ・ループ</li>
</ul>

<h3>５日目</h3>

ハノイ市内観光、帰国

<img src="https://farm4.static.flickr.com/3388/3503371963_e004586ed5_m.jpg" width="180" height="240" alt="IMG_4280.JPG" />

ベトナム＆カンボジア（ダイジェスト）

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

<a href="http://www1.jp.dell.com/content/products/productdetails.aspx/laptop-inspiron-9?c=jp&amp;cs=jpdhs1&amp;l=ja&amp;s=dhs">Inspiron Mini 9 ミニノートパソコン</a>



今、はやりのウルトラモバイル。

# ミニキュンに胸キュン

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

そもそもは<a href="http://www.amazon.co.jp/gp/product/4873113784?ie=UTF8&amp;tag=110changcom-22&amp;linkCode=as2&amp;camp=247&amp;creative=7399&amp;creativeASIN=4873113784">ビジュアライジング・データ</a><img src="https://www.assoc-amazon.jp/e/ir?t=110changcom-22&amp;l=as2&amp;o=9&amp;a=4873113784" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />を読んでいてコードを書いてみないとどうにも買った意味がない、というのが始まり。昼食後とか、ちょっとした時間にコーヒー飲みながら軽くコード書けたらいいなーと思って、あまり慣れてもいないヤフオクで３万で落としました。

しかし、これが３万とは安い買い物ですよ！最高に取り回しが良いです。ちょっと読み書きが遅いですけどね。今ではたいてい持ち歩いています。

ついでにイーモバイルの契約もしまして、また固定費が増える・・ちょっと月々の通信費使い過ぎです。整理したいです。

# Firefox のプラグインでGPS的な何か

この楽々持ち運べるウルトラモバイルの特徴を生かしてちょっと遊んでみました。<a href="http://labs.mozilla.com/2008/10/introducing-geode/">Geode</a>はFirefoxのプラグインで、Wi-Fiの電波からPCのだいたいの現在位置を推定するというものです。しかも、JavaScriptで簡単に緯度経度を取得できます。Firefox3.1では標準搭載されるらしいよ。

```js
navigator.geolocation.getCurrentPosition(function(pos) {
 alert( pos.latitude + ", " + pos.longitude );
})
```

<a href="http://www.flickr.com/photos/20720251@N04/3476382344/" title="geode_test by itoyohja, on Flickr"><img src="https://farm4.static.flickr.com/3322/3476382344_a42051f721.jpg" width="500" height="293" alt="geode_test" /></a>

中途半端なテストですが、横浜から実験してみました。東白楽の手前までは地下なのでワイヤレス・ネットワークがうまく取得できませんでした。あらためて東白楽から10秒間隔で10回現在位置を取得しています。

東横線では地上はまずまずで、地下はアウト、東海道線でも試しましたが速度が速すぎるのか無線LANの位置が遠いのかほとんど取得できませんでした。ともかく東横線／横浜−渋谷間やってみないとな。

<a href="/lab/geodo/">/lab/geodo/</a>

FirefoxにGeodeアドオンがインストールされていて、近くに無線LANのアクセスポイントがあれば（もちろん接続しなくて良い）誰でも現在位置を取得できます。10回試行したあと、ポリラインを引くようになっています。試行回数や間隔はこちらの都合で変更されるかも。あと、コードは汚いです・・画面ちっちゃいんで整形するのが面倒なんです・・まあ、あくまで遊びなんで。

mini9とGeodoプラグインでGPSっぽいこと

国立新美術館の<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のようにカスタムイベントを発射できる。すばらしい。

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

メールで「起きなさい！」と言われてしまいました。

<a href="http://www.flickr.com/photos/20720251@N04/3235895831/" title="A wake up call from MindMeister by itoyohja, on Flickr"><img src="https://farm4.static.flickr.com/3101/3235895831_69a1056f46.jpg" width="200" height="500" alt="A wake up call from MindMeister" /></a>



最近、ずっと使っていなかったのですが、<a href="http://www.mindmeister.com/">Mind Meister</a>というオンラインのマインドマップツールがありまして、これがWebサービスながらパッケージソフトと遜色ない使い勝手で（比較したことはありませんが今の所パッケージを買う必要がない）たびたび使っていました。

<a href="http://www.flickr.com/photos/20720251@N04/3236752084/" title="mindmeister by itoyohja, on Flickr"><img src="https://farm4.static.flickr.com/3315/3236752084_6a3df584ac.jpg" width="500" height="305" alt="mindmeister" /></a>

<h3>放置ユーザーにモーニングコール</h3>

「４ヶ月放置したあなたにはプレミアムアカウントを２ヶ月分提供しましょう。お友達も誘えばさらにプレミアム期間を追加しましょう」という趣旨のようです。名付けて「ねぼすけパック（？）」粋な計らいですね。しかし、よく読まないで２回ログインしたら「ねぼすけパック」が無効になってしまいました・・・

ともあれ、このサービスは面白そうなのでまた使ってみようと思います。

<a href="http://www.flickr.com/photos/20720251@N04/3235895831/" title="A wake up call from MindMeister by itoyohja, on Flickr"><img src="https://farm4.static.flickr.com/3101/3235895831_69a1056f46_b.jpg" width="410" height="1024" alt="A wake up call from MindMeister" /></a>

僕自身はモーニングコールなしでも朝起きれます。どうでもいいですね。

モーニングコール

同じような機能を２つの案件で求められたので作りました。

<a title="multi_rollover2 by itoyohja, on Flickr" href="http://www.flickr.com/photos/20720251@N04/3222665090/"><img alt="multi_rollover2" src="https://farm4.static.flickr.com/3339/3222665090_f8ee691d43.jpg" width="500" height="479" /></a>



大きな画像があって、サムネールにロールオーバーすると大きな画像のほうもロールオーバーする、というものです。

<a href="/lab/multi_rollover/">ロールオーバーで他の画像を切り替えるサンプル</a>

# for文からのイベント予約

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

```js
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`文が回りきった後の変数を見に行くことになるようです。

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

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

<a href="/lab/multi_rollover/">実際のコードはこちら</a>

# JavaScriptで画像の先読み

同様に

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

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

<a title="multi_rollover by itoyohja, on Flickr" href="http://www.flickr.com/photos/20720251@N04/3222752686/"><img alt="multi_rollover" src="https://farm4.static.flickr.com/3297/3222752686_770a16a3e7_o.jpg" width="500" height="500" /></a>

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

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

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

ページ分割などでよくあるインターフェース。これをコーディングするとき、`ul`要素（と`li`要素）ではセンタリングできないので`table`要素を使っていました。

<a href="http://www.flickr.com/photos/20720251@N04/3206329898/" title="リスト要素のセンタリング by itoyohja, on Flickr"><img src="https://farm4.static.flickr.com/3529/3206329898_093c695631_o.png" width="485" height="120" alt="リスト要素のセンタリング" /></a>



コーディングする際に問題になるのは、幅が可変だということです。幅が決まっていれば、`width`を指定した上、`margin: auto`でこと足りますが、幅が指定できない場合、`ul`要素の幅は100%です。そこで、内容に合わせて可変幅を持つ`table`要素の出番、となるわけです。

しかし、よく調べてみるとリスト要素はセンタリングすることができるようです。

参考：<a href="http://scuderia-web.com/tips/xhtml_css/list.php">リストのセンタリング</a>

```html
<ul class="pagenate">
 <li>1</li>
 <li><a href="#">2</a></li>
 <li><a href="#">3</a></li>
 <li><a href="#">4</a></li>
 <li><a href="#">5</a></li>
</ul>
```

```css
.pagenate {
 text-align: center;
}
.pagenate li {
 display: -moz-inline-box;/*for FF2*/
 display: inline-block;/*Modern Browser & FF3*/
}
/* Windows IE6 only */
* html .pagenate li {
 display: inline;
 zoom: 1;
}
/* Windows IE7 only */
*+html .pagenate li {
 display: inline;
 zoom: 1;
}
.pagenate a {

}
.pagenate .current {

}
```

親要素に`text-align: center`を指定した上、ブロック要素である`li`要素をインライン要素として表示するだけです。ただし、`display: inline-block`の実装はブラウザによって異なるのでそこは気をつけなければなりません。標準モード、互換モードに関わらず表示できます。

# それっておいしいの？

ページ分割の場合、中身のテキストは数字だけですからわざわざリストを使用する必要性はなさそうです。ハックを使用せず、`table`要素に`margin: auto`を指定するだけの丈夫なコーディングをするほうが効率はいいのではないかと思います。

が、「レイアウトに`table`要素を使ってはいけない」などのコーディングルールを指定される場合もあるので、この方法を知っていると心強いです。

<a href="/lab/centering_list_item/index.html">リスト要素のセンタリングのサンプル（標準モード）</a>

<a href="/lab/centering_list_item/index2.html">リスト要素のセンタリングのサンプル（後方互換モード）</a>

リスト要素（ul,li）をセンタリングする

Amazonで買い物をすると、1,500円以上なら送料無料になります。この金額に届かないときは・・・



# aiko姉さんのニューシングル「milk」リリース

「<a href="http://www.amazon.co.jp/gp/product/B001P7CMXA?ie=UTF8&amp;tag=110changcom-22&amp;linkCode=as2&amp;camp=247&amp;creative=1211&amp;creativeASIN=B001P7CMXA">milk</a><img src="https://www.assoc-amazon.jp/e/ir?t=110changcom-22&amp;l=as2&amp;o=9&amp;a=B001P7CMXA" width="1" height="1" border="0" alt="" style="display:none; border:none !important; margin:0px !important;" />」ですか・・・今回のシングルはどの曲もひと味違うタイトルがつけられています。

<ul>
<li>M1「milk」</li>
<li>M2「嘆きのキス」</li>
<li>M3「なんて一日」</li>
</ul>

milkはともかく昭和っぽいというか何と言うか。それはさておき、このシングルをAmazonで買おうとした時の話です。

# ここから本題

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

CDシングルは￥1,260なのでそのままだと300円の送料が発生します。買いたい本とかがあればいいのですが、一緒に買いたいものがないときどうするか。以前、

<a href="http://www.msng.info/archives/2008/12/amazon_1500.php">Amazon で送料無料のためにあわせて買う商品はこれが決定版かも</a>

こんな記事を読んだのですが、サラダクラブだと３個買わないと300円分は埋まりません。そんなに使うかなー。んーどうよ。そこで思いついたのが「ごはん」です。

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

ちょっと足が出ますが、せっかくおかずを作ったのにごはんを炊くの忘れたorzなどというときに重宝します。ごはんだけがいまいちな人は単品のごはんとレトルト食品とかでもいいと思います。

2/18にはCDとごはんが一緒にAmazonの箱に入って届くのかな。これはこれでシュールですね・・・

# 関係ないけど

最近、いきものがかりが良いですね。まっすぐな感じが良いです。「茜色の約束」から引っかかり始めました。ボーカルのきよえちゃんは、先週から金曜深夜のオールナイトニッポンのパーソナリティになりました。

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

aikoはテレビでは猫をかぶっているのですが、ラジオのパーソナリティとなると切れ目なく、いつ終わるともなく喋ります。そのためにコーナーが潰れかけるほどです。

リアルタイムでaikoのヌルコムを聞けなかった僕としては、きよえのオールナイトニッポンがヌルコムみたいになってくれたらいいなあとか思っています。先週聞いた所では、雰囲気はとても良いのですが、まだ「がんばって」しゃべっている感じです。これからに期待しています。

久しぶりにCSSやのネタもいくつかあるのですが、まとめる気力がないのでどうでもいい話をしてみました。

Amazonで送料無料にするために何を買うか

年賀状くれた人には郵送しました。ミクシィ年賀状で住所を伏せてた人は、郵送できないのでこちらで。


あけおめフラで燃え尽きたので、思いつきもいいとこですが・・

<a href="http://www.flickr.com/photos/20720251@N04/3169980099/" title="2009年賀 by itoyohja, on Flickr"><img src="https://farm2.static.flickr.com/1306/3169980099_dc49dcf995_o.jpg" width="378" height="561" alt="2009年賀" /></a>

2009年の年賀状

あけましておめでとうございます。
本年もよろしくお願いします。


<a href="/lab/2009newyear/">あけおめFlash</a>

牛の模様っぽく見えた方は、今年は飛躍の年になります（嘘

<h3>追記</h3>

正月っぽい音もつけてみました。

<h3>追記の追記</h3>

もっと曲らしくするために、調子に乗って音を増やしました。ちょっと重くなってしまいました。ごめんなちゃい。

５音だったものを14音に増やしました。民謡音階をベースに、下行形（正式な下行形かどうかはわかりませんが聞いたことある感じ）とグリッサンドっぽいのを追加しました。

Garage Bandに「箏」の音源があれば簡単だったのですが、￥10,000もするサウンドパックを購入しないとダメらしいので、なんとかならんかと思い調べたところ、SoundFontなるものがあるらしい。

<a href="http://gbuc.net/modules/pukiwiki/?SoundFont">SoundFont</a>

音源をフォントのように扱ってしまおうということのようです。使い方も、Garage Bandであれば、ライブラリ/Audio/Sounds/Banks内にSoundFontファイルを突っ込めば、あとはGrage Bandの設定だけで使えます。

SoundFontファイルは<a href="http://yukinisuzume.seesaa.net/">三味線のよさげなSoundFont</a>さんでフリーで配布しているものを使いました。こちらで配布している<a href="http://www.personalcopy.com/sfpack.htm">SFPack</a>という圧縮形式はMacでは解凍できなかったので、Windows環境で解凍しました。

まとめると、

<ol>
<li>希望する楽器のSoundFontファイルを入手する</li>
<li>圧縮形式にあったアーカイバで解凍する</li>
<li>ライブラリ/Audio/Sounds/Banksに入れる</li>
<li>Garage Bandの任意のトラック情報の詳細メニューを開き、</li>
<li>音源ジェネレータをDLSMusicDeviceにして、</li>
<li>編集（鉛筆のボタン）を開いて</li>
<li>「Sound Bank:」をさっき入れたものに変更</li>
</ol>

これでGarage BandでSoundFontを使用できます。SoundFontファイルの権利に問題なければ商用利用も可能かもしれません。Garage Bandは問題ないよな・・？

Archive for 2009