はじめに
SpreadJSは、グレープシティのJavaScriptライブラリです。Webページ用のスプレッドシート「Spread.Sheets」と、グリッド表示から発展してさまざまなレイアウトを実現する「Spread.Views」を含みます。
SpreadJSの新バージョン「V11J」が、2018年8月にリリースされました。主にSpread.Sheetsに機能追加が行われ、よりExcelライクに使えるようになりました。すべての新機能については、公式ページも参照してください。
| 概要 | 機能追加の内容 |
|---|---|
| よりExcelライクに | チャート、コンテキストメニュー、数式の追加など |
| より多機能に | フィルター機能、PDFエクスポート、アウトライン表示など |
| より開発しやすく | npm対応、React／Vue対応など |
本記事では、V11Jで導入された、さまざまな新機能の利用法を説明していきます。
対象読者
- よりExcelに近いスプレッドシートをWebページで実現したい方
- 表形式データを手軽にWebページで表示・編集させたい方
- SpreadJSの旧バージョンを利用していて、新バージョンが気になる方
必要な環境の準備
本記事のサンプルは、以下の環境で動作を確認しています。
-
Windows 10 64bit版
- Microsoft Edge 42.17134.1.0
- SpreadJS 11.2.4
SpreadJSは、グレープシティのWebサイトからトライアル版をダウンロードできます。
注：npm対応とReact／Vue対応
V11Jでは、JavaScriptパッケージマネージャーのnpmを利用してインストールできるようになりました。また、JavaScriptフレームワークとして、新たにReact／Vueの利用をサポートしました。詳細は公式ドキュメントを参照してください。
本記事ではフレームワークを利用せず、単体でSpread.Sheetsを利用します。
Spread.Sheetsでスプレッドシートを表示
最初に、図2のように、Webページにスプレッドシートを表示させてみます。
Spread.SheetsのCSS／JavaScriptファイルを、表2のように配置します。
| No. | ファイルとパス | ファイルの役割 |
|---|---|---|
| 1 | css/gc.spread.sheets.excel2013white.11.2.4.css | CSSファイル |
| 2 | scripts/gc.spread.sheets.all.11.2.4.min.js | 本体ファイル |
| 3 | scripts/gc.spread.sheets.resources.ja.11.2.4.min.js | 日本語リソースファイル |
スプレッドシートを表示するHTMLファイルは、リスト1の通り記述します。
<!DOCTYPE html> <html> <head> （略） <!-- Spread.Sheetsの言語設定 ...（1）--> <meta name="spreadjs culture" content="ja-jp" /> <!-- Spread.Sheetsのファイルを参照 ...（2）--> <link rel="stylesheet" href="css/gc.spread.sheets.excel2013white.11.2.4.css" /> <script src="scripts/gc.spread.sheets.all.11.2.4.min.js"></script> <script src="scripts/gc.spread.sheets.resources.ja.11.2.4.min.js"></script> <!-- スプレッドシートを描画する実装を記述するJavaScriptファイル ...（3）--> <script src="main.js"></script> </head> <body> <!-- スプレッドシートを描画する領域 ...（4）--> <div id="spreadjs-container" style="width:100%; height:500px;"></div> </body> </html>
（1）のmetaタグはSpread.Sheetsの言語設定で、ここでは「ja-jp」として日本語を設定します。（2）で表2のCSS／JavaScriptファイルを参照して、Spread.Sheetsを利用できるようにします。（4）は、スプレッドシートを描画する領域を表すdivタグです。
（3）のmain.jsでは、ページのロード時に、リスト2の処理を実行します。
var workbook = new GC.Spread.Sheets.Workbook( // ワークブックを生成 ...（1） document.getElementById('spreadjs-container'), // 生成先のHTML要素 ...（2） { sheetCount: 1 } // オプション：シート数 ...（3） );
（1）で、スプレッドシートに対応するGC.Spread.Sheets.Workbookオブジェクトのコンストラクターを実行します。第1引数は、（2）のように生成先のHTML要素を指定します。第2引数はオプションの指定で、ここでは表示するシート数を（3）のように行っています。指定できるオプションは、公式ドキュメントを参照してください。
注：ライセンスの設定
ライセンスを設定しないと、スプレッドシートの右下にトライアル版であることを示す透かし文字が表示されます。公式サイトの手順で取得したライセンスキーを、GC.Spread.Sheets.LicenseKeyプロパティに代入すると、ライセンスが設定されて透かし文字が消えます。
GC.Spread.Sheets.LicenseKey = '<ここにライセンスキーを設定>';
スプレッドシートには数値や数式を入力できます。入力時には、ヘルプや入力支援が表示されます。
