Webアプリケーションを構築する上で、優れた操作性をもったUIは欠かすことができない。まるでデスクトップアプリケーションのようなインタフェースを持ったソフトウェアが数多く存在している。

Picture 481.png

Prototype.jsを使ったUIライブラリ

 

そんなUIを構築するライブラリは数多いが、そのためだけのツールが多く、柔軟性にかけるものが多い。そこで優れたJavaScriptライブラリであるPrototype.jsをベースにしたPrototype UIを使ってみよう。

Prototype UIはPrototype.jsとScript.aculo.usを使ってWebアプリケーションにふさわしいインタフェースを提供してくれるJavaScriptライブラリだ。

Prototype.jsがベースという点において好き嫌いが分かれる所かもしれない。とは言え、Railsで標準で組み込まれていることもあり、利用されている方は多いと思われる。Webアプリケーションのみならず利用できそうなライブラリなので、ぜひチェックして欲しい。

Picture 482.png

ウィンドウの幅に応じて表示画像の数が変わる

 

現在公開されているのはウィンドウとスライドショーの二つになっている。ウィンドウは画面上に小さなウィンドウを表示するもので、スキンに対応し影を表示することもできる優れものだ。スライドショーはウィンドウとの組み合わせで利用するもので、静的もしくはAjaxを使って取得した画像データを表示し、左右のバーで別な画像に切り替えることができる。

スライドショーはウィンドウの大きさを変更すると表示する画像の数が変わるという面白い機能がある。そして次に予定されているのがFacebookやMac OSX風のオートコンプリート機能で、その後コンテクストメニュー、カレンダー、アコーディオンなどがリストアップされている。

このように簡単に使えるライブラリであれば、Webアプリケーション以外でも効果的に利用できる場面はあるかも知れない。ポップアップウィンドウやログインウィンドウの代わりに使ったりすれば、ユーザビリティの高いサイトにつながりそうだ。

 

Prototype UI

 http://www.prototype-ui.com/