よりExcelライクになった「SpreadJS」のコンテキストメニューやチャート機能を試す

　本記事では、グレープシティのJavaScriptライブラリ「SpreadJS」について、2018年8月のバージョンアップで追加された新機能を紹介します。バージョンアップにより、よりExcelライクなスプレッドシートがWebページで利用できるようになりました。

はじめに

　SpreadJSは、グレープシティのJavaScriptライブラリです。Webページ用のスプレッドシート「Spread.Sheets」と、グリッド表示から発展してさまざまなレイアウトを実現する「Spread.Views」を含みます。

図1　グレープシティのJavaScriptライブラリ「SpreadJS」

　SpreadJSの新バージョン「V11J」が、2018年8月にリリースされました。主にSpread.Sheetsに機能追加が行われ、よりExcelライクに使えるようになりました。すべての新機能については、公式ページも参照してください。

表1　新バージョン（V11J）におけるSpread.Sheetsの変更点

概要	機能追加の内容
より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ページにスプレッドシートを表示させてみます。

図2　Spread.Sheetsのスプレッドシートを表示するサンプル（p001-basic）

　Spread.SheetsのCSS／JavaScriptファイルを、表2のように配置します。

表2　Spraed.SheetsのCSS／JavaScriptファイル（p001-basic）

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の通り記述します。

リスト1　スプレッドシートを表示するHTMLファイル（p001-basic/index.html）

<!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の処理を実行します。

リスト2　スプレッドシートの描画処理（p001-basic/main.js）

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プロパティに代入すると、ライセンスが設定されて透かし文字が消えます。

リスト3　ライセンスキーの設定方法（p001-basic/main.js）

GC.Spread.Sheets.LicenseKey = '<ここにライセンスキーを設定>';

　スプレッドシートには数値や数式を入力できます。入力時には、ヘルプや入力支援が表示されます。

図3　スプレッドシートに数値や数式を入力（p001-basic）