hifive開発者ブログ

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ブラウザベースで手軽にデザインできるようになっています（画像は公式サイトより）。

d3.js

オープンソース・ソフトウェア（BSD）。データの可視化ライブラリです。HTML/SVG/CSSを使ってアニメーションもサポートしたグラフ/チャートを表示します。jQueryと同じような使い勝手で高度なチャートを描けるのが特徴です。

以下はサンプルのコードで、指定されたSVGタグの色を変更します。

d3.selectAll("p").style("color", function(d, i) {
　return i % 2 ? "#fff" : "#eee";
});

SVGによる表現は多彩なので、単純なグラフやチャートと言った枠を越えた表現が実現できます。

使いこなすのはそうそう簡単ではありませんが、SVGを素のまま使うのに比べると大幅に手間は軽減されるでしょう。その上でjQueryライクにプログラマブルにSVGを扱うと言った目的に最適な選択になるはずです。

three.js

オープンソース・ソフトウェア（MIT）。WebGLを使って3Dオブジェクトを描くのに使われるライブラリです。一般的にWebGLはコードが難解で分かりづらいのですが、JavaScriptで短いコード量で3D描画が実現できます。

WebGLだけでなく、WebVRであったり、CSS3D、レイトレーシングにも対応しています。ごく基本的なコードは次のようになります。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth /
　　　　　　　　　　　　　　　　　　　　　　　　　window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;

THREEというグローバルオブジェクトを使って操作していくのが基本になります。以下は別なデモですが、詳細な描画、アニメーションも実現できています。

three.jsもd3.js同様に、HTML5上で提供はされているものの、素のままでは扱いづらいWebGLをJavaScriptから使いやすくしてくれる存在です。ただしWebGLのほぼ全機能を使えるようにしているため、コード量が多くなったり、three.jsの学習コストが大きいのが欠点です。また、WebGLならではのカメラであったり、シェード、3Dといった知識も必要になります。

three.jsはWebGLを扱う上でほぼデファクトとなってきていますので、情報は数多く存在します。関連書籍も多数ありますので、three.jsからWebGLの学習をはじめるという人も多くなっています。

HighCharts

非商用に限り無料。CanvasまたはSVGを使ってグラフ/チャートを描画します。プラグイン機能があり、データエクスポートやポイントをドラッグするような拡張が提供されています。以下の画像は一例です。

主なチャートとしては、

• ラインチャート
• エリアチャート
• 棒チャート
• パイチャート
• バブルチャート
• それらの複合

となっています。また、3Dチャートであったり、ゲージチャートや地図上へのマッピング、ツリーマップ、ヒートマップもできるようになっています。チャートの種類が豊富なので、大抵の要望には適うのではないでしょうか。

使い方としてはjQueryなどと組み合わせて、

$(‘#container’).highcharts({
　/* オプション */
});

という形で渡します。オプションは多彩で、細かなカスタマイズを行えるようになっています。