こんにちわ。mBlogのQuattroです。今回でちょうど連載が始まって丸2年となりました。withDもリニューアルし、これからはより大きなサムネールで、Webに関するツールやTipsを紹介できるかと思います。そんなわけで今後ともひとつ。

さて今回は、jQueryを使ったユーザーインターフェースに関するJavascriptをいくつかご紹介したいと思います。いわゆるJavascript Libraryと呼ばれるものの中には、他にPrototype.jsやmootoolsあたりが有名どこですが、今回はjQueryに絞って紹介してみたいと思います。

AppleのサイトやDockを模したインターフェース - Slider Gallery, IconDock

　
Slider Gallery（左）、IconDock（右）

まず最初に紹介するのは、AppleのサイトやDockでのインターフェースを模したもの。マックユーザーにはお馴染みのあの動きがウェブ上で再現できます。Slider Gallery（動作デモはこちら）ではAppleのサイト内でのハードウェア選択画面の動きが、IconDock（動作でもはこちら）ではMacOS XでのDockの動きが再現されています。

デザイン的に一手間かければ、ウェブ上での有効なナビゲーションとなりそうです。元々が人によく知られたインターフェースだけに、“モロパクり”に見えないように注意する必要があるかもしれませんね。

アコーディオンと呼ばれるメニュー展開 - Horizontal Accordion, HoverAccordion

　
Horizontal Accordion（左）、HoverAccordion（右）

次に紹介するのは“アコーディオン”と呼ばれるメニュー形式のJS２つ。Horizontal Accordionはゲームする人なら見てすぐにピンとくるハズ。XBOX 360のメインメニューを模したものです。クリックする事でアコーディオンのヒダの中身が表示される仕組みです。画像を入れ替えてしまえばどんな風にでもカスタマイズできそうです。

HoverAccordionはHorizontal Accordionと違い、縦方向にメニューが並びます。こちらではマウスをヒダの部分にホバーさせると開く仕組み。これらの展開するメニューは、1ページ内に多くの情報を表示する際や、サブメニューの表示などに使えそうです。

らん外日記：ストレス解消法

友人の提唱する“ジーンズ試着して裾直しの必要がないと、めっちゃスカっとするストレス解消法”のため、先日服屋でジーンズ選んでました。試着してみるとちょっと長い。店員のオニーちゃんにも「ちょっと切りましょうか」と言われ、逆にストレスが溜まりました。「どうせ俺は平均身長さ・・・」とフテくされてる31歳の春です。

画像表示に関するJS - Galleria, FancyBox

　
Galleria（左）、FancyBox（右）

最後は画像に関するものを2つ紹介。Galleriaは、jQueryを用いた画像スライドショーのためのJSです。フェードイン効果を使ったフォトギャラリーを作れます。サムネイルの選択時にもフェード効果が使われていて、エレガントな印象。生産性も高そうです。

FancyBoxは、いわゆるLightBox亜種。ただLightBoxはPrototype.jsを使っているのに対し、こちらはjQueryを利用しています。複数のJSライブラリを混在させると色々と面倒になりそうなので、jQueryを導入したサイトにはちょうどイイかもしれません。

以前は動きのあるUIと言えばFlashの独占市場だったのですが、最近ではJavascriptでもかなり幅広い表現ができるようになりましたね。ポイントを押さえた使い方で、派手さだけでなく実用的だとユーザーに思われるようなサイト制作ができればイイですね。それではまた来月。

関連リンク

「やるな！」と思われるデザイナーに バックナンバー
jQuery
Prototype.js
mootools
Slider Gallery
IconDock
Horizontal Accordion
HoverAccordion
Galleria
FancyBox