こんなものを作ってみた。この写真をクリックすると、ウインドウの中心から、うぃ〜んと画像がズームする。

■写真素材
pancakeplan
→ http://www.pancakeplan.jp/

そして、ブラウザの表示領域一杯までズームすると、一旦止まる。そこで画像の下のexpandをクリックすると、リンク先画像の元サイズに拡大。closeをクリックで消去。もしくは、リンク先の画像サイズが表示領域より小さい場合は、そこでズームが止まってcloseのみ表示。クリックしたら消去。という仕様。

なぜ、こんなものを作ったかと言うと、頼まれたからだ。仕事中、突然、５年ほど前の上司から電話。
「あのさあ、ウェブサイトでサムネイル画像をクリックしたら、それが、ず〜ってズームするっての作ってくれない？」
「えー、どうしたんですか？」
「いやぁ、俺のサイトでさあ、やりたいんだよ。Ajaxとかでちょっと作ってくれないかなぁ。」
「Ajaxなんかやったことないですよ。」
「でも、分かるだろぅ？頼むよ。」

この人、５年前も、自作PCを作りたいケド、分からないからお前がやってみて教えろ、と言っていた。随分勝手だが、こっちがそういう事が大好きだと分かって言っている。ある意味、部下の趣味趣向を良く理解しているのかも。

さて、何やらAjaxと言っていたので、最初は、Ajaxの解説サイトなんかをいくつか見てみた。非同期通信を使用した、javascriptとXMLを中核とした…。うーん、これは、技術というより設計思想？非同期通信で、事前に必要な情報を得ることにより、速度的に有利になるって、これを真似すればできる、といったハナシじゃないよなぁ。

まあ、いいか。で、具体的には…、prototype.jsなどのフレームワークを利用…。ふーん、ということで、prototype.jsをダウンロードしてきて中身を見てみる。あ゛〜、４０００行もありますけど…。どうもこれは、ちょいちょいっと付け焼き刃でやれそうにないなぁ。

と、Ajaxはさっさと諦める。もう思うがまま作れば良いじゃん。でも、非同期通信ねぇー、ということで、リンクがクリックされる前に画像データを読み込む様に作ってみる。画像の先読みって、一昔前のjavascriptの解説サイトとかに、たくさん載っていたよなぁ。

そんなこんなで、なんとか作りたかったものが出来た。一番苦労したのは、ブラウザによって、javascript（DOM）の実装が違うところ。

表示領域の取得方法は、firefoxではwinodwのinnerWidthと、innerHeightで、IEではbodyのclientWidthと、clientHeightだ、という説明がいろいろなところにあったんだけど、やってみたら、firefoxでもIEと同じやり方で値が取れたので、これで良いじゃないか、と思っていたら、取れる値の意味が違っていた。しかも、試行錯誤の末、最終的に採用したのはどちらでも無い…。それから、画像のサイズ（width,height)を取得しようとしたら、Operaだけ取得できない。styleでdisplayプロパティにnoneを指定しているとサイズが０になっている？っぽい。prototype.jsとやらは、もしかしたら、ブラウザによる違い、ってヤツを吸収してくれているんだろうか。だとしたら、それはそれで便利かも。

もう一つ分からなかったのが、画像データを先読みするのは良いとして、本当はそれが完了するまで、待たせたい処理があるんだけど、どう待って良いか分からない。下手な待ち方すると、ポップアップで、スクリプトから制御が返ってこないけど、まだ実行する？なんて尋ねられてしまうので、これは諦めた。非同期通信がAjaxのポイントだとすると、Ajax的には当たり前にできるのかも知れない。やっぱり、いつかはprototype.jsを解析してみた方が良いのかなぁ。そうしたら、いろんな事が分かりそうだし。

でも、疲れたので今日はもう終わり。もし、このスクリプトが欲しいという方がいたら、簡単な説明を付けて差し上げます。コメントなりメールでどうぞ。javascriptとCSSそれぞれ１ファイルずつと、expand,closeのボタン画像ファイルで構成されています。linux版firefox3.0.4、Windows版IE6、Windows版safari3.1.2、Windows版firefox3.0.4、Windows版Opera9.6.2で動作確認済みデス。