SpreadJS(日本語版) について

ExcelライクなHTML5表計算ウィジェット。

SpreadJSはWebアプリケーションのデータ表示に特化した二つのコントロールを収録するJavaScript製品です。ExcelライクなUIを実現するSpread.Sheetsと、グリッド表現の枠を超え多彩なデータレイアウトを可能にするSpread.Viewsが、WebアプケーションのUI開発を強力に支援します。Spread.SheetsはWebアプリケーションでExcelライクなUIを実現するために開発されたJavaScriptコントロールです。フィルタや表計算関数、条件付き書式など、豊富なExcel互換機能を搭載したスプレッドシートをブラウザ上に描画し、エンドユーザーになじみのあるUIと操作性を提供します。Spread.Viewsは、グリッドUIの可能性を追求することによって生まれた全く新しいコントロールです。標準的なグリッド表示はもちろんのこと、レイアウトプラグインや行テンプレート機能を活用することでカレンダーやガント、タイムラインなど、既存の表形式表示にとらわれない自由なデータ表現を実現できます。

SpreadJSを選ぶ理由

  • ハイパフォーマンス:SpreadJSは軽量でありながら豊富な機能とともに高速で動作するように設計されています。HTML5 Canvas機能を使用したSpreadJSのUI描画は、DOM要素を使用した従来のデータグリッド描画よりはるかに高速です。ライブラリは機能ごとに分割しており、必要なファイルのみをロードすることによってそのサイズを最小限に抑えることができます。
  •  モダンな開発に対応:Spread.Sheetsは効率やメンテナンス性を重視した大規模開発でもご利用いただけるよう、近年最も人気のあるJavaScriptフレームワーク「AngularJS」と「Angular」用のディレクティブを備え、TypeScriptを使用した開発にも対応しています。また、Spread.Viewsを使用した開発ではソーシャルネットワーキングサイトやモダンなECサイトでみられるレイアウトを簡単に作成することが可能です。
  • OS非依存、マルチブラウザ・マルチデバイスに対応:クライアントサイドで動作するSpreadJSは、OSやデバイスによらずHTML5に対応するほとんどのブラウザで使用可能です。タッチ操作もサポートされており、PC用ブラウザでの外観をそのままにiPadやタブレッドPCなど幅広い環境から、製品を使用したアプリケーションをご利用いただけます。
  • 安心のサポート:ライブラリを使用中に用法がわからず開発が頓挫してしまったり、思わぬところで調査に時間を要してしまったりした経験はありませんか?SpreadJSのサブスクリプションサービスにはテクニカルサポートが付属しており、ライブラリの不明点や使用方法をいつでもメールでご質問いただけます。

SpreadJSの製品構成
ExcelライクなUIを実現するSpread.Sheetsと、グリッド表現の枠を超え多彩なデータレイアウトを可能にするSpread.Viewsの二つコントロールを収録するJavaScript製品です。

Spread.Sheets 
Excelライクなスプレッドシート機能は、業務アプリケーションにおいて非常に多い要望のひとつです。Spread.Sheetsには表計算関数やフィルタリングなど多くのExcel互換機能が搭載されており、このコントロールひとつで、エンドユーザーに対し満足度の高いWebアプリケーションを提供することができます。製品にはExcelライクな使い勝手のGUIで簡単にスプレッドシートのレイアウト設計ができる「Spread.Sheets デザイナ」が付属します。これによりコーディングレスでスピーディーにSpread.Sheetsを作成できます。レイアウトが完了したシートデータはJSON形式のファイルとして保存されます。またSpread.Sheets デザイナExcel形式のファイル読み込みにも対応。Excelで作成したシートデザインを簡単にSpread.Sheets に再現することができます。Excel互換機能のみならず、Spread.SheetsにはWebアプリケーションの操作性やデータの視認性を高める様々な機能が搭載されています。セル型やデータシリアライズ、印刷機能などを活用しシートの動作を拡張することで、従来のスプレッドシートUIを上回る使い勝手の良さと機能性をエンドユーザーに提供できます。

主要なExcel互換機能

  • フィルタリング:Spread.SheetsではExcel形式のフィルタダイアログによるフィルタリング機能を搭載しています。エンドユーザーは使い慣れた操作性で必要なデータを絞り込むことができます。もちろん、プログラミングによる絞り込みも可能です。
  • 条件付き書式:セルやセル範囲にアイコンセットやデータバー、カラースケールといったルールを作成し、セルの値に応じてルールを自動的に適用できる条件付き書式機能を搭載。Excelと全く同様の使用感でセルデータを視覚的にわかりやすく表示できます。
  • 数式と関数:Spread.Sheetsは日付、財務、統計、検索、文字列などさまざまな業種や職種で活用できる380種以上の実用的な表計算関数を提供しています。ほぼ全ての表計算関数がExcel互換となっており、Excelファイルをインポートした場合も実ファイルでの集計結果を高い精度で再現します。
  • 書式設定:Excelと同様の書式文字列を使用して、セルデータの表示形式を柔軟に設定できます。日本市場に欠かせない和暦日付や通貨記号表示にもしっかり対応しています。
  • マルチシート:アプリケーションで取り扱うデータを複数のシートで管理・処理できます。数式などを設定している場合に威力を発揮するExcelのシート間参照機能は、Spread.Sheetsにも搭載されています。
  • Excel入出力機能:Spread.SheetsのAPIや製品に付属の「ExcelIOコンポーネント」を利用して、Excel形式ファイルをインポート・エクスポートすることが可能です。
  • ピクチャ:Spread.Sheetsはピクチャレイヤ機能を実装しているため、シート上で自由に画像を配置することが可能です。Excelファイルのインポート時にファイルに埋め込まれた画像が消失することもありません。
  • アウトライン:複数の行や列をアウトラインとして設定し折りたたんだり、展開したりできます。Excelのグループ化と同様に、アウトラインをネストさせて複数レベルのグループ構造を表現することも可能です。
  • タッチサポート:Spread.Sheetsでは選択、スクロール、ズーム、タップ、ピンチといった基本的なタッチ操作が可能なほか、タッチツールバーや選択グリッパーをはじめとするタッチ専用UIが提供されています。Excel と同様の操作性を提供し、タッチ対応デバイスを利用するエンドユーザーの要望に応えます。

主な拡張機能

  • セル型:セル型はコマンドボタンやチェックボックス、コンボボックスやハイパーリンク動作をセル上に実現する機能です。単純なExcel互換スプレッドシートにとどまらない拡張性で、多岐に渡るアプリケーション要件へ柔軟に対応します。
  • 複数行/複数列ヘッダ:列ヘッダの複数行表示、行ヘッダの複数列表示、コーナーヘッダのカスタム機能を搭載。ヘッダ領域上のセルは、通常のセルと同様に結合したり、スタイルを設定したりすることが可能です。また、コーナーヘッダは、HTML5のCanvasを使用して自由に描画をカスタマイズできます。
  • データシリアライズ:Spread.Sheetsはデータのシリアル化/逆シリアル化をサポートしています。スプレッドシート本体はもちろんのこと、セル型、関数、フォーマッタ、タグ、行フィルタなど様々な情報をJSONデータとして取得でき、また任意のタイミングでこれを読み込んでシート上に再度復元できます。
  • 印刷:Spread.SheetsのAPIを利用して、シート内容の印刷ができます。アプリケーション画面では隠れてしまっている領域や表示されていない別シートも印刷可能です。

Spread.Views
バラエティ豊かなデータレイアウト:オーソドックスな業務アプリケーションからモダンな商用Webサイトまで、Spread.Viewsのレイアウト/グルーピング機能を活用すれば幅広いシーンでインパクトのあるデータ表示が可能です。たった数行のコード設定で、様々な用途にマッチしたレイアウトを簡単に構築できます。Spread.ViewsではUIの外観だけでなく、行や列、ヘッダ/フッタなども自在に設定可能です。行テンプレートや列プレゼンター、編集モードの設定によりWebアプリケーションのあらゆる表示要件へ柔軟に対応します。

レイアウト一覧

  • グリッド:業務アプリケーションで広く活用できるオーソドックスなグリッド表示です。一般的なグリッドに見られる一覧表示に加えて、列を水平方向に配置して表示する「水平レイアウト」も設定できます。また、行テンプレート機能を使用すれば、1レコード複数行表示にも対応します。
  • カレンダー:データレコードの日付情報をグループ化して、カレンダー形式のレイアウトを実現します。月単位の表示だけでなく週や日単位の表示も可能になっており、個人のスケジュールから会社規模のイベント管理まで、幅広い用途で活躍します。
  • ガント:プロジェクトの進捗管理に最適なガント形式でデータを表現します。データレコードにあるタスク開始日や終了日、進捗率を読み込み、指定のエリア上に視認性の高いガントチャートを表示します。連結データに親子関係を設定すれば、チームやタスク種別ごとにデータをまとめて階層表示を行うことも可能です。
  • カード:データをカード状に並べて表示するカードレイアウトは、ECサイトなどでの商品データ陳列に適しています。また階層表示機能を併用することで、組織図やデータ分析結果の表示などにも対応します。
  • トレリス:トレリスは、Atlassian Trello™ライクなボード表示を実現するレイアウト/グループ化機能です。カードに描画されたデータレコードをグループごとに並べて表示します。ソフトウエアでは実施が難しい「カンバン方式」のプロジェクト管理も、Spread.Viewsなら簡単に実現できます。
  • タイムライン:データレコードにある時間情報をグループ化してデータを時系列順に表示します。チャットプログラムの会話表示やカスタマーサポートのログ管理、業務予定・イベントの表示など、時間経過と密接な関連のあるレイアウトの構築に効果を発揮します。
  • メーソンリー:メーソンリーレイアウトはPinterest(ピンタレスト)™などに見られる、タイル状のデータ表示を実現します。ソーシャルネットワーキングサイト等の開発での利用はもちろんのこと、会社サイトでの商品紹介などに活用することで、インパクトのあるWebサイトを構築できます。

主要なカスタマイズ機能

  • 行テンプレート:HTMLやCSSで作成したテンプレートを使ってSpread.Viewsの行やヘッダ/フッタを自由にデザインできます。グリッドの要件としてよく求められる1レコードの複数行表示や、予定表アプリケーションに最適なカード型のデータ配置など、設定のバリエーションは無限大です。
  • 列データの視覚化:列プレゼンター機能を使用すると、Spread.Sheetsのセル型や条件付き書式のようにデータを視覚的に表現できます。doT.js記法を用いた柔軟な設定によって、列のデータ値と連動するチェックボックスやプログレスバーなどをはじめとする、バリエーション豊かなデータ表現が可能になります。
  • 編集モード:Spread.Viewsはデータの外観設定だけでなく編集機能も強力です。組み込みで搭載されたインライン、ポップアップ、フォームの3つの編集モードが、Webアプリケーション開発でさまざまな入力シーンに応じます。またテンプレート機能の活用によって、各編集UIをさらにカスタマイズすることも可能です。
  • Excelライクな書式設定:Excelと同様の書式設定文字列を使用して、列に設定された文字データを日付や通貨、時間表示に特化した書式に設定できます。