Skip to content

業務で使えるJavaScriptライブラリ「UI/コンポーネント編」

by : 2016/03/23

Bootstrap

オープンソース・ソフトウェア(MIT)。BootstrapはWebサイト、Webアプリケーションを開発する際のベースデザインとして使えるデザインフレームワークです。プログラマでも手軽に使える反面、カスタマイズの自由度があまり高くないのでデザイナーには嫌がられます。管理画面などに使うのが最適です。以下はボタンなどの画面パーツです。

サポートされているUIパーツが非常に多く、

  • グリッド
  • 引用(コード)
  • テーブル
  • メニューバー
  • フォーム
  • ボタン
  • 角丸、丸形などの画像表示
  • ボタングループ
  • パンくず
  • ページネーション
  • バッジ
  • プログレスバー
  • アラート

などが提供されています。また、JavaScriptと組み合わせることで、

  • カルーセル
  • ドロップダウン
  • モーダル
  • タブ
  • ツールチップ

なども標準で提供されています。カラーテーマやカスタマイズを行うサイトもあり、情報も充実しています。以下の画像はBootstrapで作られたダッシュボード風画面です。

Wijmo 5

商用。業務システムでよく使われる多彩なコントロールを提供しています。グリッド、リストボックスやカラーピッカーなどの各種インプット、チャートやグラフなどがあります。TypeScriptベースで作られており、AngularJSもサポートしています。特に業務システム用に開発されているので、柔軟なカスタマイズと保守性の高さを売りとしています。jQueryなどへの依存性もありません。

以下はグリッドのサンプルです。

他にも細かいUIコンポーネントとして、

  • リストボックス
  • 入力補完
  • メニュー
  • カレンダー
  • 入力マスク
  • カラーピッカー

などが提供されています。データのビジュアライズとして、

  • パイチャート
  • ゲージ
  • 棒グラフ

などに対応しています。

Wijmo 5はモバイルブラウザーをサポートしており、タッチ操作やレスポンシブデザインにも対応しています。

Infagistics

商用。jQuery/HTML5、ASP.NET MVC/WebForms、Windows Forms、WPF、Silverlight、iOS、Android、Xamarin.Formsなど多くのプラットフォームに対応した開発が行えます。UIプロトタイピングツールを使って画面設計を素早く行えるのも特徴です。

SharePoint ServerやOffice 365へのアクセスがサポートされているということもあり、Windows系プラットフォームを厚めにサポートしているようです。
HTML5/JavaScript向けにはAngularJS、KnockoutJS、 Microsoft MVC、Boostrap、Ionic、Onsenといった有名なフレームワークを完全にサポートしており、高度なUIが実現できます。タッチ操作やレスポンシブデザインもサポートされています。UIコントロールについては75種類以上のコンポーネントが提供されています。

データの可視化では、

  • データ チャート
  • 円チャート
  • ドーナツ型チャート
  • ファンネル チャート
  • ラジアル ゲージ
  • スパークライン
  • ブレット グラフ
  • リニア ゲージ
  • マップ

など、数多くのチャートをサポートしています。他にもExcel風のUIも提供されています。デザイナーツールも提供されているので、UIをWebブラウザベースで手軽にデザインできるようになっています(画像は公式サイトより)。

From → HTML5

現在コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。