JavaScriptを使って、クールなインタフェースを実現するライブラリは幾つか存在する。よく使われるものとしては、画像をクリックするとその場で拡大表示するもの、タブインタフェース、WYSIWYGなHTMLエディタ、レーティング、プログレスバー、コンテクスト(右クリック)メニューなどなど。

Picture 219.png

フローティングウィンドウ

 

どれも個別のライブラリは存在する。だが、よく使われるものだけに、一つ一つ用意するのが面倒という人もいるはずだ。そこでこれを使おう。

今回紹介するオープンソース・ソフトウェアはLivePipe UI、Prototype.jsを使ったモダンなUIを実現するライブラリだ。

LivePipe UIが実現する機能はタブ、WSYIWYGエディタ、ツールチップ、フローティングウィンドウ表示、レーティング、プログレスバー、コンテクストメニューなどがメジャーなものとして挙げられている。レーティングはマウスによって動くだけでなく、表示のみにするモードもあるのが便利だ。

Picture 222.png

プログレスバー

 

もう二つ便利な機能がある。一つは複数選択のドロップダウンだ。これは通常のHTMLでもできるものだが、LivePipe UIを使うとリストにチェックボックスが追加されて、選択するとそれらがカンマつなぎで一行になる。つまり複数選択でないドロップダウンリストと同じ高さで済むのだ。

もう一つはスクロールバーだ。長文を表示する際に使えるこれは、クリックで一番下に移動したり、逆に一番上に戻る、50ピクセルだけ動かすといった制御ができる。どれも便利で有効に使える場面が多そうだ。各機能は関数を追加して拡張できるようにもなっている。

最近はjQueryを利用する方が多かったが、LivePipe UIを使うようにすればプラグインを探す手間が省けるかも知れない。何ができるのか知っておくと、いざという時に役立つはずだ。

 

LivePipe™ : User Interface Components for Prototype

 http://livepipe.net/