JavaScriptスプレッドシートライブラリ - SpreadJS（スプレッドJS） | Developer Tools〈開発支援ツール〉

Benefits

特長

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ファイルのインポート・エクスポートにも対応しています。

ピボットテーブル

シート上のデータを自在に取り出し、ピボットテーブルを作成できます。このピボットテーブルでは、直感的に操作できるピボットパネルUIを使ったデータの分析や集計が可能です。

また、ピボットテーブルを含むExcelファイルのインポートや、SpreadJSで作成したピボットテーブルの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ライクなハイパーリンク機能をサポートしています。セルにはWebサイトURLのほか、メールアドレスやセルへの参照をリンクとして設定可能です。

Excel以上の操作性

セルボタンとドロップダウンオブジェクト

「セルボタン」機能を使ってセル内にボタンを配置し様々な処理を関連づけて実行させることが可能です。ボタンはテキストの左右に複数配置したり、画像を使用した外観に変更したりすることができます。

また、「日付時刻ピッカー」や「リスト」など、「ドロップダウンオブジェクト」機能で提供される様々なオブジェクトをセルボタンに関連づけることで、Excelにはない高機能なドロップダウンセル動作を実現することが可能です。

視認性に優れたデータ検証

Excel互換のUIに加え、SpreadJSのデータ検証機能では視認性の高い2種の検証エラーUIを提供しています。「ドッグイア」型や「アイコン」型のUIによるエラー表示が、エンドユーザーの正確な入力を促します。

セルの自動マージ

隣接するセルの値が同じ場合に自動的にセル結合を行う自動マージ機能を搭載。データの初期表示時はもちろんのことソートやフィルター時にも抜群の効果を発揮し、視認しやすいデータ表示を実現します。

主要な機能

数式・関数

450種を超える表計算関数を搭載するほか、独自の関数を作成することも可能です。また、シート上の数式と連動する数式ボックスの表示にも対応しています。

デモを試す

ソートとフィルタリング

Excelのようなソートやフィルタリング操作を提供します。ソート・フィルタ機能はシート全体に適用することも、列単位で適用することも可能です。

デモを試す

書式の設定

シート表示するデータにあわせてセルの書式を設定できます。少数、パーセント、通貨、和暦、西暦日付などの書式設定が可能なほか、ユーザー定義による書式の設定も可能です。

デモを試す

テーブル

シート内のセル範囲に対してテーブルを作成できます。60種の組み込みスタイルのほか、ソート、フィルタリング、構造化参照式が使用できます。

デモを試す