Skip to content

ダッシュボードを作るのに便利なライブラリまとめ

by : 2018/04/17

業務に必要なデータは幾つかのシステムにまたがっていることは少なくありません。そうした時に、それぞれのシステムにログインしてステータスをチェックするのは面倒です。そこで便利なのがダッシュボードです。

ダッシュボードは必要なデータをまとめてチェックするのに適しています。今回はそうしたダッシュボードを作るのに最適なライブラリを紹介します。

codaxy/dashboards: Drag & drop dashboard builder!

あらかじめ用意されたウィジェットをドラッグ&ドロップで配置してダッシュボードを作成するソフトウェアです。配置はとても柔軟で、ウィジェット同士を重ねて配置することもできます。

背景色やダッシュボード全体のサイズを変更することもできます。

codaxy/dashboards: Drag & drop dashboard builder!

gridstack/gridstack.js: gridstack.js is a jQuery plugin for widget layout

あらかじめ決められたグリッドに沿ってウィジェットを配置します。グリッドは複数の枠にまたがって配置することも可能です。配置データはJSONになっているので、それを使って配置の再現も可能です。

gridstack/gridstack.js: gridstack.js is a jQuery plugin for widget layout

jerrywham/SonarRSS: Netvibes minimalist alternative

フィードを配置するのに特化したダッシュボードです。最初はタイトルだけですが、クリックすると本文も表示されます。情報のビジュアル化には向きませんが、一覧でまとめて新着情報をチェックしたいといったニーズに使えそうです。

jerrywham/SonarRSS: Netvibes minimalist alternative

oazabir/Droptiles: Droptiles is a “Windows 8 Start” like Metro-style Web 2.0 Dashboard. It compromises of Live Tiles. Tiles are mini apps that can fetch data from external sources. Clicking on a tile launches the full application.

Windows8 Style UIに近いダッシュボードです。パネルの配置は自分で変更できます。基本的に横スクロール型のUIとなっています。テーマごとにブロックを分けられるので、グルーピングにも向いています。

oazabir/Droptiles: Droptiles is a “Windows 8 Start” like Metro-style Web 2.0 Dashboard. It compromises of Live Tiles. Tiles are mini apps that can fetch data from external sources. Clicking on a tile launches the full application.

Shopify/dashing: The exceptionally handsome dashboard framework in Ruby and Coffeescript.

デザインがすっきりとした、モダンなUIのダッシュボードです。グラフを描画することも可能です。グリッド型になっているので、配置はそれに沿って変更できるようになっています。

Shopify/dashing: The exceptionally handsome dashboard framework in Ruby and Coffeescript.

ducksboard/gridster.js: gridster.js is a jQuery plugin that makes building intuitive draggable layouts from elements spanning multiple columns

Pinterestライクにグリッドが重なったUIになっています。利用する最小のカラム数、行数が指定できます。グリットに沿った形で配置を自由に変更できます。

ducksboard/gridster.js: gridster.js is a jQuery plugin that makes building intuitive draggable layouts from elements spanning multiple columns


ダッシュボードは特に並び替え、配置換えが必要です。それによって担当者一人一人に最適化されたUIが実現できます。作業効率も変わってくるでしょう。どこまで自由にカスタマイズできるかはライブラリ次第です。

開発者は個々のウィジェットを開発します。Web APIをうまく使えば多数のシステムからまとめてデータを収集して表示できるようになるでしょう。

From → まとめ

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

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