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

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

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2