SpreadJS(日本語版) について

ExcelライクなスプレッドシートをWeb上で実現するJavaScriptライブラリ。

SpreadJSは、フィルタや表計算、チャート、条件付き書式などのExcel互換機能を豊富に搭載し、エンドユーザーに馴染みのある操作性を提供します。SpreadJSはWebアプリケーションでMicrosoft Excel®ライクなUIを実現するために開発されたJavaScriptライブラリです。フィルタや表計算関数、条件付き書式など、豊富なExcel互換機能を搭載したスプレッドシートをブラウザ上に描画し、エンドユーザーになじみのあるUIと操作性を提供します。

特長

  • Excelのような操作性と外観:フィルタリングやソート、数式、条件付き書式など、豊富なExcel互換機能を搭載したスプレッドシートをブラウザ上に描画し、エンドユーザーになじみのあるUIと操作性を提供します。
  • セル型:データ型や用途に合わせたセル型が提供され、コマンドボタンやチェックボックス、コンボボックスやハイパーリンク動作をセル上に実現できます。
  • デザイナで短期開発:SpreadJSを使った開発では、デザイン用のGUIデザイナを利用可能です。デザイナの使い勝手もExcelに類似しているため、各種外観スタイルを直感的に操作できます。多くのコード量が必要な設定もノンコーディングで実現し、開発工数を大幅に削減します。
  • データシリアライズ:SpreadJSはデータのシリアル化/逆シリアル化をサポートしています。様々な情報をJSONデータとして取得でき、また任意のタイミングでこれを読み込んでシート上に再度復元できます。
  • 先進フレームワークへの対応:効率やメンテナンス性を重視した大規模開発で利用されることの多いJavaScriptフレームワーク上でお使いいただけるように設計されています。AngularやAngularJS、ReactやVue.jsなどに対応しています。
  • タッチ機能のサポート:タッチキーボードによる入力、スワイプによるスクロールや、ピンチ/ストレッチ操作での拡大・縮小といった基本的なタッチ操作のほか、タッチツールバーや選択グリッパーといったタッチ専用UIが提供されています。

ExcelライクなUI

  • 外観と操作性:Excelのような外観で、データを単一スプレッドシートおよびマルチシートで表示できます。セル範囲や行、列の選択、セルのドラッグ移動、アンドゥ・リドゥといったのExcelと同等の操作性を備えます。
  • 編集操作:エンドユーザーは、セルのクリックで編集を開始でき、ブラウザ上であってもExcelのような操作感でデータを編集できます。
  • セルの書式とスタイル:フォント、テキスト配置、余白、境界線、文字色あるいは背景色といったスタイルはセル単位から設定可能です。また、セルにはデータ型に応じて、日付や通貨などの書式を設定することができます。

データの可視化と分析機能

  • チャート:SpreadJS上に、縦棒や折れ線、散布図などのチャートを表示できます。Excelと同様に、タイトルや凡例の表示が可能なほか、エンドユーザーにチャートの移動やリサイズを許可することも可能です。また、サポートするチャートを含んだExcelファイルのインポート・エクスポートにも対応しています。
  • スライサー:スライサーはテーブルに付随する機能です。テーブルでデータを絞り込む作業を行うとき、スライサーを使用すれば、直感的でわかりやすい操作で実行することができます。また、スライサーパネルの状況を確認することで、現在のフィルタ状態を簡単に把握することも可能です。
  • 条件付き書式:条件付き書式ではルールを作成してセルの外観表示を設定します。ルールはカラースケールルール、データバールール、アイコンセットルールなどExcelで提供されている馴染みのあるものをサポートします。

豊富なExcel互換機能

  • ソート・フィルタリング:Excelと同等のUIを備えるソート・フィルタ機能を提供しています。データの単純な並び替えやフィルタリングにとどまらず、色フィルタや日付フィルタの利用も可能です。
  • コンテキストメニュー:GUIによるシート編集には欠かせないコンテキストメニューを標準装備。コピーや切り取り、豊富なオプションを備える貼り付けなど、Excelに慣れ親しんだエンドユーザーに違和感のない操作性を提供します。
  • グループ化:複数、広範囲に表示される行や列の折りたたみと展開を可能にする「グループ化」機能をサポート。グループは複数・多段で設定したり、APIから操作して開閉したりすることも可能です。
  • ステータスバー:シート上で選択されたデータを自動で分析し、様々な情報を表示するステータスバー機能に対応。平均値やデータ数、合計値などを表示できるほかスライダーを使ったシートの拡大・縮小操作にも対応します。

ファイル入出力

  • Excel入出力:SpreadJSのAPIを利用したExcel形式ファイルのインポートやエクスポートが可能です。このときほとんどのExcel互換機能は保持されます。
  • PDF出力:Excel形式ファイルだけでなく、SpreadJSのシート内容をPDFとして出力することも可能です。ページごとの繰り返し行指定や特定のシートを指定した出力などの詳細な出力設定もサポートしています。
  • JSON形式・CSV形式データの入出力:JavaScriptを使った開発や業務アプリケーションの運用で使用されることの多い、JSON形式データやCSVデータの入出力に対応しています。

GUIでシート設計、開発効率を高めるデザイナ

  • SpreadJSデザイナ:製品付属の「SpreadJSデザイナ」で、ExcelライクなGUIを使ったSpreadJSのレイアウト設計が可能です。慣れ親しんだ操作感で簡単、スピーディーにノンコーディングの画面開発を実現できます。
  • Excel形式ファイル:SpreadJSデザイナはExcel形式のファイル読み込みおよび保存にも対応。Excelで作成したシートデザインを簡単にSpreadJSに再現することができます。
  • JSON形式ファイル:SpreadJSデザイナで作成したレイアウトやシートデータはJSON形式のファイルとして保存できます。読み込みにも対応しているため、SpreadJSデザイナで作成したデザインを別のアプリケーションに適用することも可能です。

リボンコンテナでExcelライクなUIと機能性を即座に実現

  • デザイナ機能を簡単実装:リボンコンテナはSpreadJSデザイナをベースに開発されたコンポーネントです。このコンポーネントを利用することで、同デザイナの機能をWebアプリケーションに組み込めるようになります。
  • UIを柔軟にカスタム:デザイナ機能の実現だけでなく、UIをカスタマイズして開発要件にマッチさせることも可能です。リボンやコンテキストメニューの既存項目を削除したり、新しく項目を追加して独自処理と関連付けたりすることができます。
  • シート機能の使用感はそのまま:リボンコンテナのシート部はプログラムによるアクセスが可能になっており、単体のSpreadJSと同じAPIで操作できます。

数式と関数

  • 豊富な組み込み関数:SpreadJSは日付、財務、統計、検索、文字列などさまざまな業種や職種で活用できる450種以上の実用的な表計算関数を提供しています。ほぼ全ての表計算関数がExcel互換となっており、Excelファイルをインポートした場合も実ファイルでの集計結果を高い精度で再現します
  • カスタム関数:独自の関数を作成し、定義することも可能です。
  • 数式ボックス:Excelのような数式ボックスをシートに追加することができます。

セル型と書式

  • セル型:セル型はコマンドボタンやチェックボックス、コンボボックスやハイパーリンク動作をセル上に実現する機能です。単純なExcel互換スプレッドシートにとどまらない拡張性で、多岐に渡るアプリケーション要件へ柔軟に対応します。独自にカスタマイズしたセル型を作成したり、InputManJSライブラリと併用することで更に多様な機能を提供するInputManJSセルを使用することもできます。
  • 書式設定:SpreadJSのセルには、標準の数値書式および日時書式を設定することができます。少数、パーセント、通貨、あるいは和暦、西暦の日付など、データに応じた書式を適用できます。


Excel以上の操作性

  • セルボタンとドロップダウンオブジェクト:「セルボタン」機能を使ってセル内にボタンを配置し様々な処理を関連づけて実行させることが可能です。ボタンはテキストの左右に複数配置したり、画像を使用した外観に変更したりすることができます。また、「日付時刻ピッカー」や「リスト」など、「ドロップダウンオブジェクト」機能で提供される様々なオブジェクトをセルボタンに関連づけることで、Excelにはない高機能なドロップダウンセル動作を実現することが可能です。
  • 視認性に優れたデータ検証:Excel互換のUIに加え、SpreadJSのデータ検証機能では視認性の高い2種の検証エラーUIを提供しています。「ドッグイア」型や「アイコン」型のUIによるエラー表示が、エンドユーザーの正確な入力を促します。
  • セルの自動マージ:隣接するセルの値が同じ場合に自動的にセル結合を行う自動マージ機能を搭載。データの初期表示時はもちろんのことソートやフィルター時にも抜群の効果を発揮し、視認しやすいデータ表示を実現します。

主要な機能

  • 数式・関数:450種を超える表計算関数を搭載するほか、独自の関数を作成することも可能です。また、シート上の数式と連動する数式ボックスの表示にも対応しています。
  • ソートとフィルタリング:Excelのようなソートやフィルタリング操作を提供します。ソート・フィルタ機能はシート全体に適用することも、列単位で適用することも可能です。
  • 書式の設定:シート表示するデータにあわせてセルの書式を設定できます。少数、パーセント、通貨、和暦、西暦日付などの書式設定が可能なほか、ユーザー定義による書式の設定も可能です。
  • テーブル:シート内のセル範囲に対してテーブルを作成できます。60種の組み込みスタイルのほか、ソート、フィルタリング、構造化参照式が使用できます。
  • 条件付き書式:セル値などに応じてそのスタイルを自動的に設定する条件付き書式機能を搭載しています。カラースケール、データバーなどExcelにおいて馴染みのあるルールをサポートしています。
  • セルの状態とスタイル:セルの状態に応じて個別にスタイルを設定できます。マウスホバー中や編集中、セルの選択時や検証無効時など6種類の状態に対してスタイルを設定可能です。
  • データ検証:Excelライクなデータ検証により複雑なロジックを実装することなく、不正入力値の無効を示したり、入力のヒントを表示したりできます。
  • セルの罫線:一重線や二重罫線、破線などExcelと同等の線種をサポートしています。また、線色や太さも自由に設定可能です。
  • セル型:コマンドボタンやチェックボックス、コンボボックスやハイパーリンク動作など様々な機能をセル上に実現することができます。
  • InputManJSセル:InputManJSのGcMask、GcDateTime、GcNumber、GcComboBoxコントロールを利用して高度なセル編集を実現できます。
  • セルボタン:セル内にボタンを配置し様々な処理を関連づけて実行できます。複数個のボタン配置や画像の設定も可能です。
  • ドロップダウンオブジェクト:カレンダーや月ピッカー、電卓など様々なオブジェクトをセルボタンに関連付け、ドロップダウンとして表示できます。
  • セルの自動マージ:隣接するセルの値が同じ場合に、自動でセル結合を実施しデータの視認性を向上させることができます。
  • テキストの向き:セルに表示するテキストの角度を設定できます。横書き表示における角度設定のほか、縦書き表示も設定可能です。
  • コメント:セルにコメントを追加できます。また、その外観を設定することもでき、コメントのサイズ変更、移動、編集なども可能です。
  • シートの保護とセルのロック:シートを保護し、セルをロックすることができます。
  • チャート:SpreadJS上に縦棒、折れ線、散布図などのチャートを配置できます。チャートタイトルや凡例の設定も可能です。
  • スパークライン:セル内にチャートを表示して、データを可視化することができます。
  • スライサー:シート上のテーブルと連動する、フィルタパネルを表示できます。直感的なUIでテーブルデータの絞り込みを行うことができます。
  • コピー・ペースト:SpreadJSとExcel間のデータコピー・ペーストに対応しています。書式や数式のみのコピー・ペーストなども可能です。
  • データバインディング:セル、テーブルあるいはシートに対しデータバインドが可能です。同一シート内で、バウンド、アンバウンドの混在させることもできます。
  • セルの余白とラベル:セルの内側にパディング領域を設定でき、柔軟なセル配置が可能です。パディング領域には文字列をラベルとして配置できます。
  • テーマ:Office 2013以降のExcelスタイルがテーマとして用意されています。また、独自のスタイルを作成し定義することも可能です
  • アウトライン列:列のデータに階層情報を付与して、ツリー上の表示を実現できます。ツリーの各階層は折りたたみと展開が可能です。
  • ドラッグマージ:この機能を有効にすると選択セルに専用のインジケーターが表示され、セル結合を容易に実行できるようになります。
  • バーコード表示:QRコードやJANコードなど、11種類のバーコード表示が可能です。色やフォント、ラベルの表示位置などをカスタムすることもできます。
  • リッチテキスト:フォント色や文字サイズを部分的に変更したり、文字を上付きや下付きに設定したりして、セルデータを見やすく表示できます。
  • ステータスバー:セルの選択操作に応じて、シート下部のバーにデータの合計や平均、個数などを自動的に表示します。
  • シェイプ:円や四角、矢印などを含む180種以上のシェイプを利用可能です。またカスタムシェイプ機能で独自のシェイプを作成することもできます。
  • Excel入出力:SpreadJSの内容をExcelファイルに出力したり、お手持ちのExcelファイル内容をSpreadJSに表示したりすることが可能です。
  • PDF出力:SpreadJSで作成した内容をPDF形式ファイルとして出力できます。フォントの埋め込みに対応しており、日本語のPDF表示も問題ありません。
  • 印刷:シートの印刷に対応しています。印刷設定として印刷ヘッダーやフッター、改ページや繰り返し行の設定などに対応しています。