HTML5によってUI周りは大きく改善されましたが、それでもまだまだ物足りないと感じることは多いです。その結果、外部ライブラリを導入せざるを得ず、互換性や組み合わせによる不具合が発生することもあります。 今回は多くのリッチなUIライブラリを提供するZebraを紹介します。Zebraを使えば他のライブラリを使わずともリッチなWebアプリケーションが開発できそうです。

Zebraの使い方

サンプルです。斜めになっている部分もコンポーネントです。

なのでタブをクリックして表示の切り替えができます。

曲線グラフ。

キーボードショートカットで有効、無効が切り替えられるコンポーネント。

コンポーネントの選択を切り替えるデモ。

ドラッグ&ドロップできるグラフ。

細かい表示場所の制御。

マウストラッキング。

複雑な形の中にテキストボックス。

こちらもWebアプリケーションで使えそうな複雑なUIコンポーネントです。

Zebraには40を超えるUIコンポーネントが用意されており、複雑なWebアプリケーションが開発できます。インタフェースにはCanvasを使っているので、綺麗なグラフィックスが描けるのがポイントです。

ZebraはHTML5/JavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。

| HTML5 Canvas Rich UI JavaScript Library barmalei/zebra: JavaScript library that follows easy OOP concept, provides HTML5 Canvas based Rich UI and includes Java to JavaScript converter tool