はじめに
「SpreadJS(スプレッドJS)」はグレープシティが提供しているJavaScriptライブラリです。エンタープライズ向けのWeb/モバイルアプリケーション開発で利用できるExcelライクなスプレッドシートUIコンポーネントSpread.Sheetsを提供しています。

Spread.Sheetsの特長
Spread.Sheetsは以下の特長を持っています。
- Excelのような操作性と外観
データを単一スプレッドシートおよびマルチシートで表示。セル範囲や行、列の選択、セルのドラッグ移動、アンドゥ・リドゥといったExcelと同等の操作性を提供。 - セル型
コマンドボタンやチェックボックス、コンボボックスやハイパーリンク動作をセル上に実現。単純なExcel互換スプレッドシートにとどまらない拡張性で、多岐に渡るアプリケーション要件へ柔軟に対応。 - GUIデザイナ
Excelライクな使い勝手のデザイナで各種外観スタイルを直感的に操作可能。多くのコード量が必要な設定もノンコーディングで実現。 - 豊富な組み込み関数
日付、財務、統計、検索、文字列などさまざまな業種や職種で活用できる450種以上の実用的な表計算関数を提供。ほぼ全ての表計算関数がExcel互換。 - ファイル入出力
Excel形式ファイルをインポート・エクスポートすることが可能。 - JavaScriptフレームワーク(Angular/React/Vue.js)に対応
なじみのあるExcelライクなUIと操作性、そして豊富なExcel互換機能を提供するUIコンポーネント、それが「Spread.Sheets」です。
デモの紹介
Spread.Sheetsが提供するさまざまな機能の詳細については公開しているデモでご確認いただけます。
Spread.Sheets基本機能デモ
実際に操作して、さまざまな機能を直観的に確認できるデモです。
Spread.Sheetsチュートリアルデモ
わかりやすい解説つきで学習できるチュートリアルデモです。
Monacaで使ってみる
ではさっそくSpread.SheetsをMonacaで使ってみます。
プロジェクトの作成
Monaca Cloud IDEから新しいプロジェクトを作成します。テンプレートは[最小限のテンプレート]を選択します。

Spread.Sheetsのファイルを追加
ダウンロードページより、「SpreadJS」のトライアル版を入手してください。
Monaca Cloud IDEで www/vendors/spreadjs
フォルダを作成して、下記のファイルをアップロードします。
- gc.spread.sheets.12.0.7.css
- gc.spread.sheets.all.12.0.7.min.js
- gc.spread.sheets.resources.ja.12.0.7.min.js

Spread.SheetsのファイルをアップロードせずにCDNから取得する場合は、index.htmlのheadセクションに以下のコードを追加します。
1 2 3 4 |
<link rel="stylesheet" href="https://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.12.0.7.css" /> <script type="text/javascript" src="https://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.12.0.7.min.js"></script> <script src="https://cdn.grapecity.com/spreadjs/hosted/scripts/resources/ja/gc.spread.sheets.resources.ja.12.0.7.min.js"></script> |
HTMLを編集
index.htmlのheadセクションにSpread.Sheetsの参照コードを追加します。上述のCDNから取得した場合は、このコードは不要です。
1 2 3 4 |
<link rel="stylesheet" href="vendors/spreadjs/gc.spread.sheets.12.0.7.css" /> <script src="vendors/spreadjs/gc.spread.sheets.all.12.0.7.min.js"></script> <script src="vendors/spreadjs/gc.spread.sheets.resources.ja.12.0.7.min.js"></script> |
index.htmlのbodyセクションに、divとscriptタグを追加します。
1 2 3 4 5 |
<div id="ss" style="width:100%;height:100%"></div> <script> </script> |
scriptタグ内にJavaScriptコードを記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
GC.Spread.Common.CultureManager.culture("ja-jp"); var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss')); var sheet = spread.getSheet(0); var datasource = [ { id: 15, product: 'ピュアデミグラスソース', date: '2017/01/10', price: 200, amount: 30 }, { id: 17, product: 'だしこんぶ', date: '2017/01/08', price: 290, amount: 50 }, { id: 18, product: 'ピリカラタバスコ', date: '2017/01/12', price: 200, amount: 20 }, { id: 84, product: 'なまわさび', date: '2017/01/21', price: 200, amount: 40 }, { id: 85, product: 'なまからし', date: '2017/01/13', price: 200, amount: 40 }, { id: 86, product: 'なましょうが', date: '2017/01/20', price: 200, amount: 40 } ]; var idColInfo = { name: "id", displayName: "商品番号", size: 70 }; var productColInfo = { name: "product", displayName: "商品名", size: 140 }; var dateColInfo = { name: "date", displayName: "日付", size: 100 }; var priceColInfo = { name: "price", displayName: "価格", size: 50 }; var amountColInfo = { name: "amount", displayName: "数量", size: 50 }; sheet.setDataSource(datasource); sheet.bindColumn(0, idColInfo); sheet.bindColumn(1, productColInfo); sheet.bindColumn(2, dateColInfo); sheet.bindColumn(3, priceColInfo); sheet.bindColumn(4, amountColInfo); |
編集したindex.htmlを保存します。この時点ではライセンスキーを設定していないのでプレビューに警告が表示され、スプレッドシートは表示されません。



Office 2016のテーマを適用する
Spread.Sheetsは、Microsoft Excelスタイルのテーマをサポートしており、Office 2016のテーマは以下のようなcssファイルで提供されています。
- Excel 2016 Colorful:gc.spread.sheets.excel2016colorful.xx.x.x.css
- Excel 2016 Dark Gray:gc.spread.sheets.excel2016darkGray.xx.x.x.css
index.htmlのheadセクションにcssファイルの参照を追加することで、テーマの利用が可能です。
1 2 3 4 5 6 |
<!-- CDN参照の場合 --> <link rel="stylesheet" href="https://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2016colorful.11.2.4.css" /> <!-- cssファイルをアップロードして参照する場合 --> <link rel="stylesheet" href="vendors/spreadjs/gc.spread.sheets.excel2016colorful.11.2.4.css" /> |

列の固定と書式を設定する
スプレッドシートに表示されている列をカスタマイズしてみましょう。「商品番号」と「商品名」の固定と「価格」と「数量」の書式を設定してみます。列の固定は frozenColumnCount
メソッド、セルの書式は setFormatter
メソッドを使って設定できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
sheet.frozenColumnCount(2); sheet.setFormatter(0, 3, '¥#,##0'); sheet.setFormatter(1, 3, '¥#,##0'); sheet.setFormatter(2, 3, '¥#,##0'); sheet.setFormatter(3, 3, '¥#,##0'); sheet.setFormatter(4, 3, '¥#,##0'); sheet.setFormatter(5, 3, '¥#,##0'); sheet.setFormatter(0, 4, '#,##0'); sheet.setFormatter(1, 4, '#,##0'); sheet.setFormatter(2, 4, '#,##0'); sheet.setFormatter(3, 4, '#,##0'); sheet.setFormatter(4, 4, '#,##0'); sheet.setFormatter(5, 4, '#,##0'); |
プレビューで確認した結果はこちらです。

まとめ
本記事では、グレープシティのJavaScriptライブラリ「SpreadJS」のコンポーネント「Spread.Sheets」を紹介しました。エンタープライズなアプリケーションをWeb/モバイル向けにモダナイズするケースなどでも、依然としてExcelライクなスプレッドシートを求められるシーンがあるかと思います。そんな時に是非お試しください。