Ninja UIはHTMLを使わずにJavaScriptで画面を描画していくUIコンポーネント。

Ninja UIはjQuery/JavaScript製のオープンソース・ソフトウェア。思うにWebサイトというのは表現力が高く、かつ自由度が高すぎるのだ。そのため見栄えにこりだすと収集がつかなくなる。またデザインセンスがないと格好いいサイトが作れない。


ボタンやアイコン

アイディアがどれだけ良く、技術力があっても見栄えがぱっとしないサイトは受け入れられない。もうHTMLは書かず、JavaScriptで組んでしまうのはどうだろう。それを可能にするのがNinja UIだ。

Ninja UIはjQuery Webjutsu(Web術?)を掲げているライブラリで、枠組みだけHTML5で組み、コンポーネントの配置は全てJavaScriptだけで記述するライブラリだ。ボタンやドロワー、アイコン、ポップアップ、レーティング、スライダー、スピナー、入力補完、タブといったコンポーネントが用意されている。


ソース

これらをNinja UIから配置していくので、同時にアクションをつけていくことでイベントドリブンな開発が実現する。jQueryライブラリなのでAjaxを使ったサーバサイドとの連携も容易だろう。対応ブラウザはChrome、Safari5、Firefox3.6以上、IE7以上となっており、iOSにも対応している。

[s2If current_user_can(access_s2member_level1)]


スライダーやポップアップ(プレミアム限定)

[/s2If]

MOONGIFTはこう見る

Ninja UIをPC向けに使うとちょっと画面に隙間が多く見えてしまうかもしれないが、iOSようのような限られた表示領域であればNinja UIはぴったりな存在になりそうだ。HTMLでデザインを決めていくよりも、プロトタイプレベルの開発であればさくさくと進むかもしれない。

このような試みはExt JSのようなライブラリでも行われている。WebアプリケーションであればHTMLで小さく作っていくよりもJavaScriptのUIライブラリを使って組み立てていく方が分かりやすい。テーマにも対応しているものが多いので、一からHTMLでデザインしていくよりも部品を当てはめていく感覚でどんどん作っていけるはずだ。

Ninja UI

デモ

ninja/ui - GitHub