サクサク書けて柔軟なカスタマイズが可能な、UIフレームワーク「Webix」

最終更新日

最近、Webixを弄ってます。

webix

Webix
Demo

WebixはリッチなUIコンポーネントを備えたウィジェットフレームワークです。

参考:クロスプラットフォームHTML5アプリケーション開発を支援するJavaScriptのUIライブラリWebix

似たタイプのフレームワークとしてはSencha Ext.jsKendo UIなどがあります。Ext.jsは過去に触ってみたことがあり仕事でも利用したことがあるのですが、わりと厳密にガッツリExt.jsのお作法に沿ってコード書かなければならないところがあるため、あまり手軽に使えるものではありませんでした。(私が触ったことがあるのはSenchaになる前のExt.jsなので、現在は変わっているかもしれません)

Webixは、そこらへんが緩くぶっちゃけ適当に書いてもそこそこ動きます。基本、JSONでコンポーネントの設定を積み上げていくだけでそれなりの画面が作れます。なんて素晴らしい!

D3.jsとも組み合わせて使いやすいフレームワークだったので、しばらく遊んでみようと思います。

ちなみにWebixは話題のフレームワーク「Angular.js」とも組み合わせやすいように設計されています。
Webix : angular Samples

サンプル1

rowやcolumnの構造をJSONで記載すれば自動的にレイアウトされます。

example

ここでは画面全てをWebixのみで作成していますが、DIV要素で枠だけ作ってID属性を指定してコンポーネントを埋め込むといったこともできます。
また、カスタムデータ属性「data-*」を利用してコンポ―ネットを設置することもできます。

サンプル2

ちょっと作ってみたもの。
webix + D3.js
example

Google Maps API、leaflet.js、D3.js、で描いた地図をWebixのWindowコンポーネントで表示しています。
Webixはカスタムコンポーネントが比較的簡単に作成できて、D3.jsと組み合わせるのが楽なところが気に入ってます。

webix + map
example

Listviewとmapの連動

関連

Webix Advent Calendar 2014 やっています。