CodeZine(コードジン)

特集ページ一覧

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

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

 本記事では、グレープシティのJavaScriptスプレッドシート部品「SpreadJS」の新バージョン「V14J」で追加された新機能を紹介します。Excelのようなリボンメニューを表示するリボンコンテナや新種類のチャートなど、さまざまな機能が加わりました。

はじめに

 SpreadJSは、ExcelライクなスプレッドシートをWeb上で実現する、グレープシティのJavaScriptライブラリです。2020年1月にリリースされた「V13J」バージョンに続き、2021年1月に最新バージョン「V14J」がリリースされました。V14Jの新機能は、公式ページで案内されています。本記事では、V14Jの代表的な新機能を、サンプルコードとともに説明していきます。

対象読者

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

必要な環境の準備

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

Windows 10 64bit版

  • SpreadJS 14.0.7
  • Microsoft Edge 89.0.774.45
  • Node.js 14.16.0 64bit版

 サンプルを動作させるには、SpreadJSのファイルが必要です。グレープシティのWebページよりダウンロードしたSpreadJSトライアル版のZIPファイルから、SpreadJSのファイルをサンプルのプロジェクトにコピーします(詳細は各サンプルのreadme.mdを参照してください)。その後「npm install」コマンドでライブラリをダウンロードして、「npm run start」コマンドを実行すると、Webブラウザーが開いてWebページが表示されます。

SpreadJSの基本的な利用法

 最初に、SpreadJSの基本的な実装を、単純なスプレッドシートを表示する図1のサンプル(p001-basic)で説明します。

図1 SpreadJSの基本的な実装のサンプル(p001-basic)
図1 SpreadJSの基本的な実装のサンプル(p001-basic)

 まず、index.htmlの<head>タグに、SpreadJS関連の定義をリスト1の通り記述します。(1)は言語(日本語)設定で、(2)でSpreadJSのCSSとJavaScriptを参照します。

[リスト1]SpreadJS関連の定義記述(p001-basic/index.html)
<!-- 言語設定 ...(1)-->
<meta name="spreadjs culture" content="ja-jp" />
<!-- SpreadJSのファイルを参照 ...(2)-->
<link rel="stylesheet" href="SpreadJS/css/gc.spread.sheets.excel2016darkGray.14.0.7.css">
<script src="SpreadJS/scripts/gc.spread.sheets.all.14.0.7.min.js"></script>
<script src="SpreadJS/scripts/resources/ja/gc.spread.sheets.resources.ja.14.0.7.min.js"></script>

 JavaScript処理では、リスト2の通りSpreadJSを利用します。

[リスト2]スプレッドシートを表示するJavaScript実装(p001-basic/main.js)
// ライセンスキーの設定 ...(1)
GC.Spread.Sheets.LicenseKey = '<ライセンスキー>';
// ページ表示時の処理
window.addEventListener('load', function () {
  // スプレッドシートの描画処理 ...(2)
  var workbook = new GC.Spread.Sheets.Workbook(
    document.getElementById('spreadjs-container'),
    { sheetCount: 1 }
  );
(略:ワークシートを取得してデータを設定)
}, false);

 (1)はライセンスキーの設定です。ライセンスキー取得方法の詳細はグレープシティの公式ページで案内されています。(2)でGC.Spread.Sheets.WorkbookコンストラクタにHTML要素(IDが「spreadjs-container」の要素)を渡して実行するとスプレッドシートを描画できます。「sheetCount: 1」はワークシート数の指定です。以下ではこのサンプルをもとに、V14Jの新機能を紹介していきます。

Excelライクなリボンメニューを表示するリボンコンテナ

 V14Jでは、スプレッドシートにさまざまな操作が行えるExcelライクなUI部品「リボンコンテナ」が利用できます(図2)。利用法を以下で説明していきます。

図2 リボンコンテナのサンプル(p002-ribbon-container-1)
図2 リボンコンテナのサンプル(p002-ribbon-container-1)

 まずHTMLで、SpreadJSの本体と各種プラグインのファイル、およびリボンコンテナそのもののファイルを、リスト3の通り参照します。

[リスト3]リボンコンテナを表示するためのファイル参照(p002-ribbon-container-1/main.js)
<!-- SpreadJSのファイルを参照 -->
<link rel="stylesheet" href="SpreadJS/css/gc.spread.sheets.excel2016darkGray.14.0.7.css">
<script src="SpreadJS/scripts/gc.spread.sheets.all.14.0.7.min.js"></script>
(略:各種プラグインとリソースのJavaScriptファイル群)
<!-- リボンコンテナのファイルを参照 -->
<link rel="stylesheet" href="RibbonContainer/css/gc.spread.sheets.designer.14.0.7.min.css">
<script src="RibbonContainer/scripts/gc.spread.sheets.designer.resource.ja.14.0.7.min.js"></script>
<script src="RibbonContainer/scripts/gc.spread.sheets.designer.all.14.0.7.min.js"></script>

 JavaScriptではリスト4の通り記述します。

[リスト4]リボンコンテナを表示するJavaScript実装(p002-ribbon-container-1/main.js)
// ライセンスキーの設定...(1)
GC.Spread.Sheets.LicenseKey = '<SpreadJSのライセンスキー>';
GC.Spread.Sheets.Designer.LicenseKey = '<リボンコンテナのライセンスキー>';
// ページ表示時の処理
window.addEventListener('load', function () {
  // リボンコンテナの描画処理 ...(2)
  var designer = new GC.Spread.Sheets.Designer.Designer(
    document.getElementById('ribbon-container'));
}, false);

 (1)はライセンスキーの設定です。リボンコンテナはSpreadJS本体とは別にライセンスが提供されるため、個別のライセンスキーが必要となります。ページ表示時に、(2)でGC.Spread.Sheets.Designer.DesignerコンストラクタにHTML要素(IDが「ribbon-container」の要素)を渡して実行すると、リボンコンテナとスプレッドシートを描画できます。

 リスト5の通り、スプレッドシートとリボンコンテナを別々に生成して組み合わせることもできます。

[リスト5]スプレッドシートとリボンコンテナを組み合わせて表示するJavaScript実装(p003-ribbon-container-2/main.js)
// スプレッドシートの描画処理 ...(1)
var workbook = new GC.Spread.Sheets.Workbook(
  document.getElementById('spreadjs-container'),
  { sheetCount: 1 }
);
// リボンコンテナの描画処理 ...(2)
var designer = new GC.Spread.Sheets.Designer.Designer(
  document.getElementById('ribbon-container'), '', workbook);

 (1)で生成したスプレッドシートの変数workbookを、(2)でリボンコンテナのコンストラクタで第3引数に指定します。コンストラクタの第2引数には設定オブジェクトが指定できますが、ここでは何も指定しないため空文字としています。

 リボンコンテナでは、リボンメニューやスプレッドシート上に表示されるコンテキストメニューの内容をカスタマイズして、既存のボタンや項目を削除したり、独自のメニューや機能を追加したりすることが可能です。詳細はグレープシティの開発ブログを参考にしてください。

チャートの機能強化

 チャートは、スプレッドシートのデータを直感的に表示する際に有効です。V14Jではチャートの機能強化が行われました。

新チャート形式「ファンネルチャート」

 V14Jではファンネルチャート(じょうごグラフ)が追加されました。図3の通り、プロセスが進むにつれてだんだん減っていくデータを表示するのに有効です。

図3 ファンネルチャートを表示するサンプル(p004-funnel-chart)
図3 ファンネルチャートを表示するサンプル(p004-funnel-chart)

 図3のチャートを表示する処理はリスト6です。チャート名と種類(ファンネルチャート)、チャートの位置とサイズ、参照するデータを、activeSheet.charts.addメソッドの引数に与えて実行します。

[リスト6]ファンネルチャートを表示するJavaScript実装(p004-funnel-chart/main.js)
var chart = activeSheet.charts.add(
  'chart1', // チャート名
  GC.Spread.Sheets.Charts.ChartType.funnel, // 種類(ファンネルチャート)
  250, 0, 500, 300, // 位置(x:250, y:0)とサイズ(幅:500px、高さ:300px)
  'B1:C5' // 参照するデータ
);

 V14Jではこの他にも、チャートの背景にパターンを指定できるようになるなど、チャート機能の細かい強化が行われています。詳細は公式ドキュメントを参照してください。

スプレッドシートの表示・入力に関する新機能

 ここでは、SpreadJSのスプレッドシートにデータを入力したり表示したりする際に利用できる、V14Jの新機能を紹介していきます。

ドロップダウンの表現力を高めるマルチカラムピッカー

 さまざまなドロップダウンを表示してセルへの入力を支援するドロップダウンオブジェクト機能に、マルチカラムピッカーが追加されました。この機能を使うと、ドロップダウンで表示される複数列のリストからセルへの入力項目を選択できるようになります(図4)。

図4 マルチカラムピッカーを表示するサンプル(p005-multi-column-picker)
図4 マルチカラムピッカーを表示するサンプル(p005-multi-column-picker)

 図4のマルチカラムピッカーを表示する実装は、リスト7です。

[リスト7]マルチカラムピッカーのJavaScript実装(p005-multi-column-picker/main.js)
// データソース(マルチカラムピッカーに表示するデータ) ...(1)
let dataSource = [
  {
    'Vendor': 'Samsung',
    'Name': 'Galaxy Note20 Ultra 5G',
    'Price': '145,728円'
  },
(略)
];
// マルチカラムピッカーの列情報 ...(2)
let colInfos = [
  { name: 'Vendor', displayName: '会社', size: '*' },
  { name: 'Name', displayName: '製品名', size: '2*' },
  { name: 'Price', displayName: '価格', size: '*' }
];
// セルに適用するスタイルを作成 ...(3)
var style = new GC.Spread.Sheets.Style();
// セルボタンの定義 ...(4)
style.cellButtons = [
  {
    // ボタン画像:ドロップダウンボタン
    imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
    command: 'openMultiColumn', // マルチカラムピッカーを開く指定
    useButtonStyle: true, // ボタンとして表示
  }
];
// ドロップダウンの定義 ...(5)
style.dropDowns = [
  {
    // typeにマルチカラムピッカーを指定
    type: GC.Spread.Sheets.DropDownType.multiColumn,
    option: {
      width: 400,   // 幅
      height: 150,  // 高さ
      dataSource: dataSource, // データソース
      bindingInfos: colInfos  // 列情報
    }
  }
];
// フォーマッタ(選択時にNameをセルに表示する指定) ...(6)
style.formatter = '=PROPERTY(@, "Name")';
// スタイルをセルに設定 ...(7)
activeSheet.setStyle(0, 1, style);

 マルチカラムピッカーに表示するデータは、(1)の通りJavaScriptオブジェクトの配列で記述します。データの各列に対応する表示名(displayName)や幅(size)を(2)で定義します。sizeの「*」は均等な列幅を、「2*」は他の列の2倍の列幅を表します。

 (3)でセルに適用するスタイルを新規作成し、(4)でマルチカラムピッカーを開くドロップダウンボタンをスタイルに設定します。ドロップダウンの定義は(5)で、種類(type)にマルチカラムピッカーを指定して、(1)のデータソースと(2)の列情報を与えます。(6)はフォーマッタで、マルチカラムピッカーを選択したときに製品名の列(Name)をセルに表示するよう指定しています。作成したスタイルを(7)でセル(左上を0行0列として、0行1列目)に設定すると、マルチカラムピッカーを表示するドロップダウンボタンがセルに表示されます。

 マルチカラムピッカーに表示するデータをワークシート内から参照させることもできます。詳細はドロップダウンオブジェクトの公式ドキュメントを参照してください。

セルにパターンやグラデーションを設定できるように

 V14Jでは、「SPREAD for Windows Forms」や「SPREAD for WPF」のようにセルの背景にパターンやグラデーションが設定できるようになりました。

図5 セルのパターンやグラデーションを表示するサンプル(p006-pattern)
図5 セルのパターンやグラデーションを表示するサンプル(p006-pattern)

 図5のうち、パターン塗りつぶしを行う処理はリスト8の通りです。

[リスト8]セルのパターン塗りつぶしを行うJavaScript実装(p006-pattern/main.js)
for (i = 1; i < 19; i++) {
  var pat = { // ...(1)
    type: i, // パターンの種類(1~18)
    backgroundColor: 'blue', // 背景色
    patternColor: 'red' // パターン色
  };
  style = new GC.Spread.Sheets.Style();
  style.backColor = pat; // 背景色にパターンを設定 ...(2)
  activeSheet.setStyle(i, 0, style);
}

 (1)でパターンの種類と背景色、パターン色を設定したJavaScriptオブジェクトを生成して、(2)のstyle.backColorプロパティに設定します。このサンプルで指定している18種類のパターン詳細は、公式ドキュメントにリストされています。グラデーションも同様にstyle.backColorに設定します。詳細はサンプルコードを参照してください。

ヘッダセルに数式やスパークラインが設定可能に

 V14Jでは、ヘッダセルに数式やスパークラインを指定して表示できるようになりました。図6のサンプルでは、スマートフォン3機種の1週間ごとの売り上げをヘッダセルにスパークラインで表示し、合計を表示します。

図6 ヘッダセルに数式やスパークラインを指定するサンプル(p007-header-cell)
図6 ヘッダセルに数式やスパークラインを指定するサンプル(p007-header-cell)

 図6の通り表示する実装はリスト9です。

[リスト9]ヘッダセルに数式やスパークラインを指定するJavaScript実装(p007-header-cell/main.js)
// 列ヘッダの行数を設定 ...(1)
activeSheet.setRowCount(3, GC.Spread.Sheets.SheetArea.colHeader);
(略)
// 1行目:機種名 ...(2)
activeSheet.setValue(0, 1, 'Galaxy Note20 Ultra 5G', GC.Spread.Sheets.SheetArea.colHeader);
(略)
// 2行目:販売台数のスパークライン ...(3)
activeSheet.setFormula(1, 1, '=LINESPARKLINE(Sheet1!B2:B9,0,,,"{seriesColor:white,lineWeight:3}")', GC.Spread.Sheets.SheetArea.colHeader);
(略
)// 3行目:販売台数の合計 ...(4)
activeSheet.setFormula(2, 1, '=SUM(Sheet1!B:B)', GC.Spread.Sheets.SheetArea.colHeader);
(略)

 まず、(1)のsetRowCountメソッドの第1引数に列数3、第2引数に列ヘッダへの適用を表すGC.Spread.Sheets.SheetArea.colHeaderを指定して実行することで、列ヘッダを3行にします。列ヘッダの1行目(2)にはsetValueメソッドで機種名を設定します。2行目(3)と3行目(4)には、setFormulaメソッドで数式を設定して、販売台数のスパークラインと合計を表示させています。数式を利用したスパークラインの設定方法については、公式ドキュメントも参照してください。

データ操作に関する新機能

 以下では、スプレッドシートのデータ操作に関するV14Jの新機能を紹介していきます。

スプレッドシートをHTMLに出力

 スプレッドシートの内容をそのままHTMLとして出力する機能が追加されました。

図7 HTML出力のサンプル(p008-html)
図7 HTML出力のサンプル(p008-html)

 実装はリスト10の通りで、activeSheet.getRangeメソッドで選択した領域に対してtoHtmlメソッドを実行するとHTMLを取得できます。このサンプルでは取得したHTMLをdiv領域に設定して画面表示させています。

[リスト10]スプレッドシートをHTML出力するJavaScript実装(p008-html/main.js)
var html = activeSheet.getRange('A1:C4').toHtml();
document.getElementById('output-html-div').innerHTML = html;

データサイズが大きなスプレッドシートで便利な増分ロード

 スプレッドシートを少しずつロードする増分ロード機能に対応しました。特にデータサイズが大きいスプレッドシートロードする際にロード過程が見えるため、ユーザーが感じるストレスを低減できます。

図8 増分ロードのサンプル(p009-incremental-load)
図8 増分ロードのサンプル(p009-incremental-load)

 実装はリスト11の通りです。スプレッドシートを読み込むfromJSONメソッドの第2引数に、増分ロードを表すincrementalLoadingオプション(2)を指定します。loadingにはロード中に呼び出される関数、loadedにはロード完了後に呼び出される関数を指定して、ロード率やロード完了を表示するようにできます。

[リスト11]増分ロードを行うJavaScript実装(p009-incremental-load/main.js)
// ワークシートをロード
workbook.fromJSON(json, { ...(1)
  // 増分ロードの指定 ...(2)
  incrementalLoading: {
    loading: function (progress) { // ロード中に呼ばれる(progressはロード率)
      // ロード率を%で表示
      progress = progress * 100;
      document.getElementById('status-div').innerText =
       'ロード中:' + progress.toFixed(2) + '%';
    },
    loaded: function () { // ロード完了時に呼ばれる
      // ロード完了を表示
      document.getElementById('status-div').innerText = 'ロード完了';
    }
  }
});

まとめ

 本記事では、SpreadJSの新バージョンV14Jで導入された新機能について紹介しました。リボンコンテナのような大規模な追加機能から、増分ロードのような使い勝手を高める気の利いた機能まで、さまざまな改善が行われたバージョンアップとなっています。

参考資料

関連リンク

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

著者プロフィール

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

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

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

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

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