CodeZine(コードジン)

特集ページ一覧

JavaScriptスプレッドシート部品「SpreadJS」最新版V13Jの新機能を紹介!

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本記事では、グレープシティのJavaScriptスプレッドシート部品「SpreadJS」について、2020年1月にリリースされた最新版「V13J」で追加された新機能を紹介します。SpreadJSで表示するテーブルやチャートに、さまざまな新機能が追加されました。

はじめに

 「SpreadJS」は、ExcelライクなスプレッドシートをWeb上で実現する、グレープシティのJavaScriptライブラリーで、2020年1月に最新版「V13J」がリリースされました。V13Jでは、テーブルやチャートの表現力や操作性を高める、さまざまな新機能が導入されました。V13Jの新機能は、公式ページで案内されています。

 本記事では、V13Jの代表的な新機能を、サンプルコードとともに説明していきます。

対象読者

  • ExcelライクなスプレッドシートをWebページで実現したい方
  • SpreadJSのバージョンアップによる新機能を把握したい方
  • スプレッドシートでセルやチャートの表現力にこだわりたい方

必要な環境の準備

 本記事のサンプルは、以下の環境で動作を確認しています。Node.jsは、SpreadJSの動作に必ずしも必要ではありませんが、ローカルでWebサーバーを動作させるために利用しています。

Windows 10 64bit版

  • SpreadJS 13.0.4
  • Microsoft Edge 44.18362.449.0
  • Node.js 12.16.1 64bit版

 SpreadJSは、グレープシティのWebページからトライアル版をダウンロードできます。トライアル版のZIPファイルからSpreadJSのファイルをプロジェクトに配置して、「npm install」コマンドでライブラリーをダウンロード後、「npm run start」コマンドを実行すると、Webブラウザーが開いてWebページが表示されます。プロジェクトに配置するSpreadJSのファイルについては、各プロジェクトのreadme.mdを参照してください。

 サンプルコードには、SpreadJSでスプレッドシートを表示する基本的な実装のサンプル(p001-basic)を含めています。本記事で新機能を紹介するサンプルコードは、このサンプルをもとに実装しています。SpreadJSの基本的な実装方法については、過去記事も参考にしてください。

セルに関する新機能

 以下では、SpreadJSで表示するスプレッドシートのセルに関する主な新機能を紹介します。

テンプレート型セル

 テンプレート型セルは、1つのセルに複数の情報を表示できる機能です。図1のサンプルでは、機種名、メーカー、重量の3つの値を1つのセルに表示します。

図1 テンプレート型セル(p002-template-cell)
図1 テンプレート型セル(p002-template-cell)

 テンプレート型セルを利用する実装を、リスト1に示します。

[リスト1]テンプレート型セルの実装(p002-template-cell/main.js)
// テンプレートシートを作成 ...(1)
var templateSheet = new GC.Spread.Sheets.Worksheet();
// 文言を設定 ...(2)
templateSheet.setValue(0, 0, '機種名');
templateSheet.setValue(1, 0, 'メーカー');
templateSheet.setValue(2, 0, '重量(g)');
// データバインディングを設定 ...(3)
templateSheet.setBindingPath(0, 1, 'name');
templateSheet.setBindingPath(1, 1, 'vendor');
templateSheet.setBindingPath(2, 1, 'weight');
// テンプレートシートの3行2列分を表示するテンプレートCellTypeを生成 ...(4)
var rangeTemplateCelltype =
  new GC.Spread.Sheets.CellTypes.RangeTemplate(templateSheet, 0, 0, 3, 2);
// CellTypeをワークシートに設定 ...(5)
activeSheet.getRange(0, 0, 3, 1).cellType(rangeTemplateCelltype);
// ワークシートにデータを設定 ...(6)
activeSheet.setValue(0, 0, {
  name: 'Galaxy S20',
  vendor: 'Samsung',
  weight: 163
});

 テンプレートを定義するためのワークシートtemplateSheetを(1)で新規作成して、そのワークシートのセルに、(2)で固定の文言、(3)でデータバインディングを、それぞれ設定します。この段階で、テンプレートを定義するtemplateSheetの内容は図2の通りになります。ここで「<name>」「<vendor>」「<weight>」は、セルに設定されたデータバインディングを表した便宜上の記述です。このtemplateSheetをもとに、テンプレート型セルを設定します。

図2 セルに設定するテンプレート(p002-template-cell)
図2 セルに設定するテンプレート(p002-template-cell)

(4)で図2のtemplateSheetに対応するセル型を生成して、(5)でそのセル型を設定後、(6)でセルにデータを設定します。(6)のデータに含まれる「name」「vendor」「weight」の値が、(3)でデータバインディングを設定したセルに表示されます。

項目選択型セル

 1つのセルの中に複数のチェックボックスやラジオボタンを表示して、項目選択させることができます。ここではチェックボックスリストを表示する図3の例を説明します。

図3 チェックボックスリスト(p003-checkbox-list)
図3 チェックボックスリスト(p003-checkbox-list)

 図3の実装はリスト2の通りです。(1)で、チェックボックスリストに対応するCheckBoxListセル型を生成して、チェックボックスを垂直に並べる設定(2)、選択肢の設定(3)を行った後、(4)でセルに設定します。

[リスト2]チェックボックスリストの実装(p003-checkbox-list/main.js)
// チェックボックスリストのCellTypeを生成 ...(1)
var checkBoxListCellType = new GC.Spread.Sheets.CellTypes.CheckBoxList();
// チェックボックスを垂直に並べる ...(2)
checkBoxListCellType.direction(GC.Spread.Sheets.CellTypes.Direction.vertical);
// 選択肢:表示(text)と値(value)...(3)
checkBoxListCellType.items([
  { text: '価格', value: 1 },
(略)
]);
// チェックボックスリストCellTypeを設定 ...(4)
activeSheet.getCell(1, 0).cellType(checkBoxListCellType);

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

 セルの中にボタンを表示したり、ボタン押下時にさまざまな機能を持ったドロップダウンを表示したりできます。図4のサンプルで説明します。

図4 セルボタンとドロップダウンオブジェクト(p004-cell-button)
図4 セルボタンとドロップダウンオブジェクト(p004-cell-button)

 単純なセルボタンは、リスト3の通り実装します。(1)でスタイルを生成して、(2)でcellButtonsプロパティにセルボタンの内容を設定後、(3)のsetStyleメソッドでセルにスタイルを適用します。このセルボタンを押下すると、(2a)のcommandに設定された処理でalertが表示されます。

[リスト3]単純なセルボタンの実装(p004-cell-button/main.js)
var cellButton1Style = new GC.Spread.Sheets.Style(); // スタイルを生成 ...(1)
cellButton1Style.cellButtons = // スタイルにセルボタンを設定 ...(2)
  [{
    caption: 'セルボタン',  // 文言
    useButtonStyle: true,   // ボタン風に表示
    command: function () {  // 押下時の処理 ...(2a)
      alert('セルボタンが押されました。');
    }
  }];
activeSheet.setStyle(0, 1, cellButton1Style); // スタイルを適用 ...(3)

 セルボタン押下時に、入力を支援するドロップダウンオブジェクトを表示させることもできます。電卓の計算結果を入力できるドロップダウン電卓を表示させるには、リスト4の通り、commandにドロップダウン電卓に対応する「openCalculator」を設定します。

[リスト4]ドロップダウン電卓を表示するセルボタンの実装(p004-cell-button/main.js)
calStyle.cellButtons = [
  {
(略)
    command: 'openCalculator' // 押下時にドロップダウン電卓を表示
  }];

 サンプルコードには、さまざまなドロップダウンオブジェクトを表示する実装を含んでいます。ドロップダウンオブジェクトの種類は、公式ドキュメントを参照してください。

自動マージ

 自動マージでは、図5の赤枠部の通り、同一値のセルを自動的に結合して表示できます。

図5 自動マージ(p005-auto-merge)
図5 自動マージ(p005-auto-merge)

 自動マージを設定する実装はリスト5です。

[リスト5]自動マージの実装(p005-auto-merge/main.js)
activeSheet.autoMerge(range, // 領域
  GC.Spread.Sheets.AutoMerge.AutoMergeDirection.column, // 列をマージ
  GC.Spread.Sheets.AutoMerge.AutoMergeMode.restricted   // 制御モード ...(1)
  // GC.Spread.Sheets.AutoMerge.AutoMergeMode.free      // 自由モード ...(2)
);

 autoMergeメソッドで自動マージを設定します。第1引数は設定する領域、第2引数はマージの方向(ここでは列単位で、つまり縦にマージ)を指定します。第3引数はマージのモードで、(1)の「制御モード」では、前のデータ(この場合は左の列)がマージされている場合だけマージします。(2)の自由モードに変更すると、常にマージが行われるため、図6の通りC列も自動マージされます。

図6 自由モードでの自動マージ(p005-auto-merge)
図6 自由モードでの自動マージ(p005-auto-merge)

セルの状態に応じたスタイル設定

 セルの状態に応じて、個別のスタイルを設定できるようになりました。図7のサンプルでは、選択時とマウスホバー時のスタイルを設定しています。

図7 セルの状態に応じたスタイル設定(p006-stateful-style)
図7 セルの状態に応じたスタイル設定(p006-stateful-style)

 図7のスタイルを設定するには、リスト6の通り実装します。

[リスト6]セルの状態に応じたスタイル設定の実装(p006-stateful-style/main.js)
// マウスホバー時のスタイル ...(1)
var hoverStyle = new GC.Spread.Sheets.Style();
hoverStyle.backColor = 'pink';
hoverStyle.foreColor = 'red';
// 選択時のスタイル ...(2)
var selectedStyle = new GC.Spread.Sheets.Style();
selectedStyle.backColor = 'yellow';
// 範囲を指定してホバー時と選択時のスタイルを適用 ...(3)
var range = new GC.Spread.Sheets.Range(0, 0, 4, 3);
activeSheet.cellStates.add(range,
  GC.Spread.Sheets.CellStatesType.hover, hoverStyle);
activeSheet.cellStates.add(range,
  GC.Spread.Sheets.CellStatesType.selected, selectedStyle);

 (1)でマウスホバー時のスタイルを生成して、backColorプロパティに背景色、foreColorプロパティに文字色を設定します。同様に(2)で選択時のスタイルを生成して、(3)で各スタイルを適用します。

テキストローテーション

 図8の通り、セル内の文字列を回転させて表示できるようになりました。

図8 テキストローテーション(p007-text-rotation)
図8 テキストローテーション(p007-text-rotation)

 図8の実装内容はリスト7の通りです。(1)でスタイルを生成して、textOrientationプロパティにテキスト回転を設定後、(2)でセルにスタイルを適用します。(3)の通り、セルに直接テキスト回転を設定することもできます。

[リスト7]テキストローテーションの実装(p007-text-rotation/main.js)
// テキスト回転と背景色のスタイルを作成 ...(1)
var style = new GC.Spread.Sheets.Style();
style.textOrientation = 45;
style.backColor = 'lightblue'
// スタイルを適用 ...(2)
activeSheet.setStyle(0, 1, style);
activeSheet.setStyle(0, 2, style);
activeSheet.setStyle(0, 3, style);
(略)
// セルを指定してテキスト回転を設定 ...(3)
activeSheet.getCell(0, 0).textOrientation(90);

チャートに追加された新機能

 以下では、SpreadJSのチャートに追加された主な機能を紹介します。

マーカーと凡例のカスタマイズ

 チャートに表示するマーカーシンボルの種類やサイズ、凡例のフォント設定ができるようになりました。また、凡例の表示位置として、従来なかった「右上」が指定できるようになりました。

図9 マーカーと凡例のカスタマイズ(p008-chart-customize)
図9 マーカーと凡例のカスタマイズ(p008-chart-customize)

 マーカーの設定は、リスト8の通り行います。(1)でチャートのデータ系列を取得して、(2)でsymbolプロパティにマーカー図形(shape)とサイズ(size)を設定後、(3)でチャートに系列を再設定します。設定できるマーカー図形の種類は、公式ドキュメントを参照してください。

[リスト8]マーカーをカスタマイズする実装(p008-chart-customize/main.js)
var series1 = chart.series().get(0); // 系列を取得 ...(1)
series1.symbol = { // 系列のマーカーシンボルを設定 ...(2)
  shape: GC.Spread.Sheets.Charts.SymbolShape.triangle, // 図形(三角形)
  size: 15 // サイズ
}
chart.series().set(0, series1); // 系列を再設定 ...(3)

 凡例の設定は、リスト9の通り行います。(1)でチャートから凡例を取得後、(2)でフォント、(3)でフォントサイズ、(4)で表示位置を設定後、(5)でチャートに凡例を再設定します。

[リスト9]凡例をカスタマイズする実装(p008-chart-customize/main.js)
var legend = chart.legend(); // 凡例を取得 ...(1)
legend.fontFamily = '游明朝'; // フォント ...(2)
legend.fontSize = 20; // フォントサイズ ...(3)
legend.position =
  GC.Spread.Sheets.Charts.LegendPosition.topRight; // 位置(右上) ...(4)
chart.legend(legend); // 凡例を再設定 ...(5)

ホバー時アニメーションとスタイル

 チャートにマウスカーソルをホバーしたときのアニメーションとスタイルを指定できるようになりました。

図10 ホバー時アニメーションとスタイル(p009-hover-animation)
図10 ホバー時アニメーションとスタイル(p009-hover-animation)

 図10のホバー時アニメーションとスタイルを設定する実装は、リスト10の通りです。(1)のuseAnimationメソッドで、ホバーアニメーションを有効にします。(2)でホバー時のスタイルを取得します。ホバー時のスタイルがnullで取得された場合は、(3)で空オブジェクトを初期設定します。(4)と(5)でスタイルを設定して、(6)でホバー時のスタイルを適用します。

[リスト10]ホバー時アニメーションとスタイルの実装(p009-hover-animation/main.js)
// ホバーアニメーションを有効にする ...(1)
chart.useAnimation(true);
// ホバー時のスタイルを取得 ...(2)
var hoverStyle = chart.hoverStyle();
if (!hoverStyle) {
  hoverStyle = {}; // null時は空オブジェクトを初期設定 ...(3)
}
hoverStyle.applyHoverStyle = true; // ホバースタイルを適用する設定 ...(4)
hoverStyle.color = 'cyan'; // 背景色 ...(5)
// (略:枠線のスタイル設定)
// ホバー時のスタイルを適用 ...(6)
chart.hoverStyle(hoverStyle);

近似曲線とエラーバー

 チャートのデータに対して、近似曲線や、誤差範囲を表すエラーバーを表示できるようになりました。近似曲線の例を図11に示します。

図11 近似曲線(p010-trendline)
図11 近似曲線(p010-trendline)

 近似曲線は、リスト11の通り設定します。(1)で系列を取得後、(2)のtrendlinesプロパティに近似曲線の設定を行って、(3)で系列を再設定します。利用できる近似曲線の種類については、公式ドキュメントも参考にしてください。

[リスト11]近似曲線の実装(p010-trendline/main.js)
var series1 = chart.series().get(0); // 系列を取得 ...(1)
series1.trendlines = [ // 近似曲線を設定 ...(2)
  {
    type: GC.Spread.Sheets.Charts.TrendlineType.logarithmic, // 対数近似曲線
    name: 'logarithmic',
    style: {
      color: 'blue'
    }
  }
];
chart.series().set(0, series1); // 系列を再設定 ...(3)

 類似の実装で、図12の通りエラーバーを表示することができます。実装の詳細はサンプルコード(p011-error-bar)を参照してください。

図12 エラーバーの表示(p011-error-bar)
図12 エラーバーの表示(p011-error-bar)

対数軸のサポート

 チャート軸を対数で表示できるようになりました。図13は、y軸(赤枠部)が対数表示になっています。

図13 対数軸のサポート(p012-log-axis)
図13 対数軸のサポート(p012-log-axis)

 対数軸を設定する実装はリスト12の通りです。(1)でチャートから軸を取得後、scalingプロパティで(2)の通り対数の底を設定します。

[リスト12]対数軸を設定する実装(p012-log-axis/main.js)
var axes = chart.axes(); // 軸を取得 ...(1)
axes.primaryValue.scaling = {
  logBase: 10 // y軸を対数軸に設定、底は10 ...(2)
};
chart.axes(axes); // 軸を再設定

動的配列数式のサポート

 Excelに導入された動的配列数式(DynamicArray)は、あるセルに設定した数式によって、複数のセルに結果を反映する機能です。この動的配列数式がSpreadJSでも利用できるようになりました。図14では、B2セルに動的配列数式「=SORT(A2:A9)」を記述すると、A2~A9セルのデータを並び替えたものを、B2~B9セルに出力できます。

図14 動的配列数式のサンプル(p013-dynamic-array)
図14 動的配列数式のサンプル(p013-dynamic-array)

 動的配列数式を利用するには、リスト13の通り、allowDynamicArrayプロパティをtrueに設定します。SpreadJSで利用できる動的配列数式は、公式ドキュメントを参照してください。

[リスト13]動的配列数式を有効にする実装(p013-dynamic-array/main.js)
workbook.options.allowDynamicArray = true;

まとめ

 本記事では、SpreadJSの新バージョンV13Jで導入された新機能の一部について紹介しました。Webページ上でスプレッドシートを利用するにあたって、より便利に活用できる機能が幅広く追加されたバージョンアップになっています。

 次回は、SpreadJSと、グレープシティのドキュメント作成・編集用ライブラリー「DioDocs」を組み合わせた利用法を紹介します。

参考資料

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5