Spread.Views
2021.01.31:Spread.Viewsメンテナンスモード終了のお知らせBenefits
特長
Spread.Viewsは、グリッドUIの可能性を追求することによって生まれた全く新しいコントロールです。標準的なグリッド表示はもちろんのこと、レイアウトプラグインや行テンプレート機能を活用することでカレンダーやガント、タイムラインなど、既存の表形式表示にとらわれない自由なデータ表現を実現できます。
柔軟なデータ表現
オーソドックスな業務アプリケーションからモダンな商用Webサイトまで、Spread.Viewsのレイアウト/グルーピング機能を活用すれば幅広いシーンでインパクトのあるデータ表示が可能です。
3種の編集モード
組み込みで搭載されたインライン、ポップアップ、フォームの3つの編集モードが、Webアプリケーション開発でさまざまな入力シーンに応じます。
タッチ機能のサポート
タッチキーボードによる入力、スワイプによるスクロールや、ピンチ/ストレッチ操作での拡大・縮小といった基本的なタッチ操作が可能です。
バラエティ豊かなデータレイアウト
![](https://grapecitycontentcdn.azureedge.net/jp/products/spreadjs/spreadviews/layout-grid.png)
グリッド
業務アプリケーションで広く活用できるオーソドックスなグリッド表示です。一般的なグリッド表示に加えて、ツリービューも設定できます。また、行テンプレート機能を使用すれば、1レコード複数行表示にも対応します。
![](https://grapecitycontentcdn.azureedge.net/jp/products/spreadjs/spreadviews/layout-card.png)
カード
データをカード状に並べて表示するカードレイアウトは、ECサイトなどでの商品データ陳列に適しています。また階層表示機能を併用することで、組織図やデータ分析結果の表示などにも対応します。
![カレンダー カレンダー](https://grapecitycontentcdn.azureedge.net/jp/products/spreadjs/spreadviews/layout-calendar.png)
カレンダー
データレコードの日付情報をグループ化して、カレンダー形式のレイアウトを実現します。月だけでなく週や日単位の表示も可能になっており、個人のスケジュールから会社規模のイベント管理まで、幅広い用途で活躍します。
![タイムライン タイムライン](https://grapecitycontentcdn.azureedge.net/jp/products/spreadjs/spreadviews/layout-timeline.png)
タイムライン
データレコードにある時間情報をグループ化してデータを時系列順に表示します。チャットプログラムの会話表示やカスタマーサポートのログ管理、業務予定・イベントの表示など、時間経過と密接な関連のあるレイアウトの構築に効果を発揮します。
![トレリス トレリス](https://grapecitycontentcdn.azureedge.net/jp/products/spreadjs/spreadviews/layout-trellis.png)
トレリス
トレリスは、Atlassian Trello™ライクなボード表示を実現します。カードに描画されたデータレコードをグループごとに並べて表示します。ソフトウエアでは実施が難しい「カンバン方式」のプロジェクト管理も、Spread.Viewsなら簡単に実現できます。
![ガント ガント](https://grapecitycontentcdn.azureedge.net/jp/products/spreadjs/spreadviews/layout-gantt.png)
ガント
データレコードにあるタスク開始日や終了日、進捗率を読み込み、指定のエリア上に視認性の高いガントチャートを表示します。連結データに親子関係を設定すれば、チームやタスク種別ごとにデータをまとめて階層表示を行うことも可能です。
![メーソンリー メーソンリー](https://grapecitycontentcdn.azureedge.net/jp/products/spreadjs/spreadviews/layout-masonry.png)
メーソンリー
メーソンリーレイアウトはPinterest(ピンタレスト)™などに見られる、タイル状のデータ表示を実現します。ソーシャルネットワーキングサイト等の開発での利用はもちろんのこと、会社サイトでの商品紹介などに活用することで、インパクトのあるWebサイトを構築できます。
すべてを柔軟にカスタマイズ
Spread.ViewsではUIの外観だけでなく、行や列、ヘッダ/フッタなども自在に設定可能です。行テンプレートや列プレゼンター、編集モードの設定によりWebアプリケーションのあらゆる表示要件へ柔軟に対応します。
![](https://grapecitycontentcdn.azureedge.net/jp/products/spreadjs/spreadviews/custom-rowtemplate.png)
行テンプレート
HTMLやCSSで作成したテンプレートを使って行やヘッダ/フッタを自由にデザインできます。1レコードの複数行表示や、カード型のデータ配置など、設定のバリエーションは無限大です。
![](https://grapecitycontentcdn.azureedge.net/jp/products/spreadjs/spreadviews/custom-presenter.png)
列データの視覚化
列プレゼンター機能を使用すると、列のデータ値と連動するチェックボックスやプログレスバーなどをはじめとする、バリエーション豊かなデータ表現が可能になります。
![](https://grapecitycontentcdn.azureedge.net/jp/products/spreadjs/spreadviews/custom-format.png)
Excelライクな書式設定
列の書式を柔軟に設定できます。Excelと同様の書式設定文字列を使用して、少数やパーセント、通貨、和暦、西暦日付などの書式設定が可能です。
編集モード
Spread.Viewsはデータの外観設定だけでなく編集機能も強力です。組み込みで搭載されたインライン、ポップアップ、フォームの3つの編集モードが、Webアプリケーション開発でさまざまな入力シーンに応じます。またテンプレート機能の活用によって、各編集UIをさらにカスタマイズすることも可能です。
![](https://grapecitycontentcdn.azureedge.net/jp/products/spreadjs/spreadviews/edit-inline.png)
インライン
スプレッドシートのように、セルを直接編集します。
![](https://grapecitycontentcdn.azureedge.net/jp/products/spreadjs/spreadviews/edit-popup.png)
ポップアップ
ポップアップするエディタ上で編集します。
![](https://grapecitycontentcdn.azureedge.net/jp/products/spreadjs/spreadviews/edit-form.png)
フォーム
編集行の下にドロップダウン表示されるフォームエディタで編集します。
必要システム
Spread.Viewsライブラリ
ブラウザ | Internet Explorer 11、Microsoft Edge、Chrome、Safari 5.1以上、iOS(Safari、Chrome) |
---|
※ Android用ブラウザはサポートしていません。