SpreadJS

  ホーム   製品情報   Spread.Views

Spread.Views


Spread.Views

柔軟なデータ表現を可能にする
多目的グリッドコントロール

Spread.Viewsは、グリッドUIの可能性を追求することによって生まれた全く新しいコントロールです。標準的なグリッド表示はもちろんのこと、レイアウトプラグインや行テンプレート機能を活用することでカレンダーやガント、タイムラインなど、既存の表形式表示にとらわれない自由なデータ表現を実現できます。


バラエティ豊かなデータレイアウト

オーソドックスな業務アプリケーションからモダンな商用Webサイトまで、Spread.Viewsのレイアウト/グルーピング機能を活用すれば幅広いシーンでインパクトのあるデータ表示が可能です。たった数行のコード設定で、様々な用途にマッチしたレイアウトを簡単に構築できます。

レイアウト一覧

グリッド

業務アプリケーションで広く活用できるオーソドックスなグリッド表示です。一般的なグリッドに見られる一覧表示に加えて、列を水平方向に配置して表示する「水平レイアウト」も設定できます。また、行テンプレート機能を使用すれば、1レコード複数行表示にも対応します。

グリッド

カレンダー

データレコードの日付情報をグループ化して、カレンダー形式のレイアウトを実現します。月単位の表示だけでなく週や日単位の表示も可能になっており、個人のスケジュールから会社規模のイベント管理まで、幅広い用途で活躍します。

カレンダー

ガント

プロジェクトの進捗管理に最適なガント形式でデータを表現します。データレコードにあるタスク開始日や終了日、進捗率を読み込み、指定のエリア上に視認性の高いガントチャートを表示します。連結データに親子関係を設定すれば、チームやタスク種別ごとにデータをまとめて階層表示を行うことも可能です。

ガント

カード

データをカード状に並べて表示するカードレイアウトは、ECサイトなどでの商品データ陳列に適しています。また階層表示機能を併用することで、組織図やデータ分析結果の表示などにも対応します。

カード

トレリス

トレリスは、Atlassian Trello™ライクなボード表示を実現するレイアウト/グループ化機能です。カードに描画されたデータレコードをグループごとに並べて表示します。ソフトウエアでは実施が難しい「カンバン方式」のプロジェクト管理も、Spread.Viewsなら簡単に実現できます。

トレリス

タイムライン

データレコードにある時間情報をグループ化してデータを時系列順に表示します。チャットプログラムの会話表示やカスタマーサポートのログ管理、業務予定・イベントの表示など、時間経過と密接な関連のあるレイアウトの構築に効果を発揮します。

タイムライン

メーソンリー

メーソンリーレイアウトはPinterest(ピンタレスト)™などに見られる、タイル状のデータ表示を実現します。ソーシャルネットワーキングサイト等の開発での利用はもちろんのこと、会社サイトでの商品紹介などに活用することで、インパクトのあるWebサイトを構築できます。

メーソンリー


すべてを柔軟にカスタマイズ

Spread.ViewsではUIの外観だけでなく、行や列、ヘッダ/フッタなども自在に設定可能です。行テンプレートや列プレゼンター、編集モードの設定によりWebアプリケーションのあらゆる表示要件へ柔軟に対応します。

主要なカスタマイズ機能

行テンプレート

HTMLやCSSで作成したテンプレートを使ってSpread.Viewsの行やヘッダ/フッタを自由にデザインできます。グリッドの要件としてよく求められる1レコードの複数行表示や、予定表アプリケーションに最適なカード型のデータ配置など、設定のバリエーションは無限大です。

行テンプレート

列データの視覚化

列プレゼンター機能を使用すると、Spread.Sheetsのセル型や条件付き書式のようにデータを視覚的に表現できます。doT.js記法を用いた柔軟な設定によって、列のデータ値と連動するチェックボックスやプログレスバーなどをはじめとする、バリエーション豊かなデータ表現が可能になります。

列プレゼンター

編集モード

Spread.Viewsはデータの外観設定だけでなく編集機能も強力です。組み込みで搭載されたインライン、ポップアップ、フォームの3つの編集モードが、Webアプリケーション開発でさまざまな入力シーンに応じます。またテンプレート機能の活用によって、各編集UIをさらにカスタマイズすることも可能です。

編集モード

Excelライクな書式設定

Excelと同様の書式設定文字列を使用して、列に設定された文字データを日付や通貨、時間表示に特化した書式に設定できます。

Excel書式