※ 画像は公式サイトデモより

Mac OSXのデスクトップ下部に表示されるDock。Windowsで言えばタスクバーとクイック起動が合わさったようなものだが、大きな違いが幾つかある。その一つはマウスを当てるとズームしてアイコンを目立たせる表示形式だ。

はじめてMac OSXに触れるとこれが衝撃的で、何度もマウスを左右に動かしてしまう。慣れてからもどこにマウスポインタがあるのかすぐに分かり、使い勝手が良い。そんなDockのズーム表示機能を再現したJavaScriptライブラリがこれだ。

今回紹介するオープンソース・ソフトウェアはMacStyleDock.js、その名の通りMac OSXのDockスタイルを実現するJavaScriptライブラリだ。

使い方は簡単だが、画像を用意する必要はある。多数のサイズの画像を用意しておくことで、スムーズなズーミングが臨めるようになる。後はMacStyleDock.jsを配置すれば、まさにあのDockが再現できる。

マウスを当てると当てられたものが拡大するのはもちろん、その左右にあるアイコンも若干ズーミングする。ズームの幅を大きくすると、より効果的になるだろう。クリックした後のアクションは各画像ごとに定義できる。

なお、動作はFirefox 1.5〜（Mac OSX）、Firefox2〜（Windows/Ubuntu Linux）、IE6/7、Opera9（Windows）、Safari2等と幅広いブラウザに対応している。サイズも非圧縮で6KB程度、圧縮版であれば2.6KB程度と軽量になっている。

過去において、Googleでも同様のアクションを用意し、わずか一日で消えてしまったことがあった（「Google X」ページ、さっそく行方不明に via CNet Japan）。Appleから求められたかは不明だが、設置したことによって誰かがあなたの家を訪問してくる事態になったとしても、当局では関知しないのでご注意を。

A Mac OS X-style Dock In JavaScript

　http://www.safalra.com/web-design/javascript/mac-style-dock/