ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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

Webアプリケーション化が進めば進むほど、JavaScriptに期待されるのがリッチインタフェースの実現だ。もともとWebブラウザ自体がリッチなインタフェースだが、ローカルアプリケーション並みのコンポーネントや操作性を求められるようになっている。


Picture 431.png

四角のレイアウト

 

そのようなインタフェースを実現するライブラリは数多く登場してきている。その一つとしてJxを紹介しよう。

JxはMooToolsをベースとしたJavaScriptライブラリで、リッチなユーザインタフェースを実現する。Google Code上でホスティングされているオープンソース・ソフトウェアで、ライセンスはMITとなっている。

Jxの公式サイトには様々なサンプルが登録されている。レイアウトに関するもの、スライドやドラッグができるダイアログやパネル、テーブル表示、ツリー、ツールバー、メニュー、タブなど様々だ。


Picture 432.png

ツリービュー

 

それぞれさらにパターンがあり、細かく表示を制御できる。他にもバックグランドにグリッドを表示したり、テーマを切り替えたりすることも簡単にできる。ツールバーを使えば、まさにWebアプリケーションとして使いやすいものになるだろう。

Webアプリケーションとして使うのはもちろん、統一されたデザインを活かしてサイト全体のオブジェクトデザインを統一するのにも使えそうだ。カラーパレットなど小粋なツールや、デザインを見栄えよくするスプリッタなど開発する上で便利な機能もたくさんある。個別で探して適用するよりも簡単で統一感も出る。

既にこのようなライブラリは幾つも存在するので、どれを使うか悩ましい所ではある。しかしこの手のツールをうまく選定すれば開発効率は一気に向上する。様々なツールの中からどれが最も自分たちのプロジェクトに適しているか、試しつつ確認して欲しい。


Picture 433.png

テーブル

 


Picture 434.png

ツールバー

 


Picture 435.png

タブ機能

 

Jx

 http://jxlib.org/

jxlib - Google Code

 http://code.google.com/p/jxlib/

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2