SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(SPREAD)byメシウス(AD)

「SpreadJS」のテーブルシートでスプレッドシートをデータグリッドとして活用する

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

 本記事では、メシウス(旧グレープシティ)のWebページ用スプレッドシートJavaScriptライブラリ「SpreadJS」で、バックエンドのデータを表示・操作するデータグリッドとしてスプレッドシートを活用できる「テーブルシート」の利用法を説明します。

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

はじめに

 SpreadJSは、ExcelライクなスプレッドシートをWebページに表示できる、メシウスのJavaScriptライブラリです。SpreadJSは表計算コンポーネントとしてのコンセプトから、バックエンドのデータを表示・更新するデータグリッドとしては使いづらいところがありました。そこでSpreadJSのバージョン15.1で、データグリッドとしての利用を想定した「テーブルシート」の機能が追加されました。本記事ではSpreadJSのテーブルシートについて、利用法を説明していきます。

対象読者

  • バックエンドのデータをWebページに表示するデータグリッド部品を探している方
  • これまでSpreadJSをデータグリッドとして利用していた方
  • バックエンドとWebページとのデータ同期を手間をかけずに実現したい方

必要な環境

 本記事のサンプルコードは、以下の環境で動作を確認しています。

  • Windows 10 64bit版
  • SpreadJS 17.0.4
  • Node.js 20.11.1 64bit版
  • Microsoft Edge 122.0.2365.92

 サンプルコードを実行するには、まずSpreadJSトライアル版ZIPファイルの「SpreadJS_Release/SpreadJS-Libs/SpreadJS」フォルダー内のcss、scriptsフォルダーを、サンプルコードのspreadjsフォルダーにコピーしてください。トライアル版は公式ページからダウンロードできます。コピー後、「npm install」コマンドでWebページ表示用の簡易Webサーバー(lite-server)をインストールして、「npm run start」コマンドを実行すると、Webブラウザーで「http://localhost:3000」としてWebページが表示されます。

テーブルシートの基本的な実装方法

 ここでは基本的なデータ表示方法の説明のため、サンプルではデータに静的な配列データを使用しています。 実際のアプリケーションで、データソースと連結してCRUD処理を実装する方法については、後述の「バックエンドとのデータ同期機能」をご覧ください。

 図1のサンプルで、テーブルシートの基本的な実装方法を説明します。データ追加用の行やカレンダーによる日付入力といった、データグリッドとしての利用に便利な機能が、基本的な実装だけで利用できるようになります。

図1 テーブルシートを表示するサンプル(p001-basic)
図1 テーブルシートを表示するサンプル(p001-basic)

 index.htmlの実装はリスト1の通りです。(1)はSpreadJSを日本語で表示する指定、(2)はSpreadJSのCSSとJavaScriptを参照する記述です。テーブルシートのJavaScriptはSpreadJS本体とは別に(2a)で参照します。(3)はテーブルシートを表示する要素です。

[リスト1]index.htmlの実装(p001-basic/index.html)
<head>
  <!-- SpreadJSのカルチャ指定 ...(1)-->
  <meta name="spreadjs culture" content="ja-jp" />
  <!-- SpreadJSを参照 ...(2)-->
  <link rel="stylesheet" href="spreadjs/css/gc.spread.sheets.excel2016colorful.17.0.4.css">
  <script src="spreadjs/scripts/gc.spread.sheets.all.17.0.4.min.js"></script>
  <script src="spreadjs/scripts/plugins/gc.spread.sheets.tablesheet.17.0.4.min.js"></script> <!--(2a)-->
  <script src="spreadjs/scripts/resources/ja/gc.spread.sheets.resources.ja.17.0.4.min.js"></script>
</head>
<body>
  <div id="table-sheet"></div> <!-- テーブルシートを表示する要素 ...(3)-->
</body>

 JavaScript(index.js)の実装内容を説明します。リスト2はSpreadJSの初期化と、データマネージャーを利用してテーブルを定義するまでの実装です。

[リスト2]SpreadJSの初期化とテーブル定義の実装(p001-basic/index.js)
// SpreadJSライセンスキーの設定 ...(1)
GC.Spread.Sheets.LicenseKey = '<ライセンスキー>';
// SpreadJSの初期化 ...(2)
const spread = new GC.Spread.Sheets.Workbook('table-sheet', { sheetCount: 0 });
// データマネージャーを取得 ...(3)
const dataManager = spread.dataManager();
// phonesTableテーブルを定義 ...(4)
const phonesTable = dataManager.addTable('phonesTable', {
  data: [ // ...(4a)
    { vendorId: 1, name: 'iPhone 15', price: '124800',
      releaseDate: '2023-09-22' },
(略)
  ],
  schema: { // ...(4b)
    columns: {
      name: { dataType: 'string' },
      price: { dataType: 'number' },
      vendorName: {
        dataName: 'vendorId',
        dataMap: { 1: 'Apple', 2: 'Samsung', 3: 'Xiaomi' }
      },
      releaseDate: { dataType: 'date', dataPattern: 'yyyy-MM-dd' }
    }
  }
});

 (1)はSpreadJSのライセンスキー設定です。ライセンスについての詳細は公式ページを参照してください。(2)でSpreadJSを初期化します。GC.Spread.Sheets.Workbookコンストラクターの第1引数にスプレッドシートを表示するHTML要素名を指定します。第2引数の「sheetCount: 0」は、初期表示のシート数を0にする指定です(後でテーブルシートを追加するためです)。

 (3)でデータマネージャーを取得し、(4)のdataManager.addTableメソッドでテーブル(phonesTable)を定義します。第1引数はテーブル名、第2引数はテーブル定義です。テーブル定義は、データ内容を表すdata(4a)と、データ構造を表すscheme(4b)に分かれます。dataではスマートフォンの情報として、vendorId(会社ID)name(製品名)price(価格)releaseDate(発売日)を定義します。schemeでは、dataで定義したデータに対して、dataTypeでデータ型、dataNameで元のデータ名、dataMapでデータ値に対応するマップを、それぞれ指定できます。ここで指定されている内容を表1に示します。

表1 リスト2(4b)の指定内容
No. データ名 指定内容
1 name データ型:string
2 price データ型:number
3 vendorName vendorIdが1なら「Apple」/2なら「Samsung」/3なら「Xiaomi」
4 releaseDate データ型:date、パターン:yyyy-MM-dd

 テーブルシートを表示する実装はリスト3の通りです。

[リスト3]テーブルシートを表示する実装(p001-basic/index.js)
// テーブルシートを追加 ...(1)
const sheet = spread.addSheetTab(
  0, 'PhoneTableSheet', GC.Spread.Sheets.SheetType.tableSheet);
// データを取得 ...(2)
phonesTable.fetch().then(() => {
  // ビューを定義 ...(3)
  const view = phonesTable.addView('myView', [
    { value: 'name', width: 110, caption: '機種名' },
    { value: 'price', width: 80, caption: '価格',
      style: { formatter: '#,0' } },
    { value: 'vendorName', width: 80, caption: '会社' },
    { value: 'releaseDate', width: 140, caption: '発売日',
      style: { formatter: 'yyyy年MM月dd日' } }
  ]);
  // ビューを表示 ...(4)
  sheet.setDataView(view);
});

 (1)でスプレッドシートにテーブルシートを追加します。spread.addSheetTabメソッドの第1引数にシートのインデックス(0は先頭を表す)と第2引数にシート名、第3引数にシートの種類(ここではテーブルシート)を指定します。(2)でテーブル(phonesTable)のfetchメソッドでデータを取得した後、データを表示するためのビューを(3)で定義します。phonesTable.addViewメソッドの第1引数にビュー名、第2引数にデータ項目の配列を指定します。配列各要素には表2の属性を指定しています。

表2 リスト3のデータ項目に指定している属性
No. 属性名 定義内容
1 value 表示するデータ名
2 width 列の幅
3 caption 表のヘッダーに表示する文言
4 style 表示スタイル(ここではformatter属性でフォーマットを指定)

 最後に(4)で、sheet.setDataViewメソッドにビューを渡して実行し、ビューをテーブルシートに表示します。以上が、テーブルシートを利用する基本的な流れとなります。

データグリッドを想定したテーブルシートの機能

 データグリッドとしての利用を想定したテーブルシートの機能を、以下でいくつか紹介します。

複数テーブルのリレーションシップ

 テーブルシートでは、2つのテーブル間にリレーションシップを定義できます。図2のサンプル(p002-relationship)では、リレーションシップが定義された2つのテーブルを参照してデータを表示します。

図2 2つのテーブルからデータを表示するサンプル(p002-relationship)
図2 2つのテーブルからデータを表示するサンプル(p002-relationship)

 このサンプルでは、スマートフォンの情報を表すphonesTableとは別に、会社の情報を表すvendorsTableが定義されています(リスト4)。

[リスト4]vendorsTableのテーブル定義(p002-relationship/index.js)
const vendorsTable = dataManager.addTable('vendorsTable', {
  data: [
    { id: 1, name: 'Apple', region: 'アメリカ' },
(略)
  ],
(略)
});

 この2つのテーブルに、リスト5の記述でリレーションシップを設定します。

[リスト5]リレーションシップを設定する記述(p002-relationship/index.js)
dataManager.addRelationship(
  phonesTable, 'vendorId', 'vendor', vendorsTable, 'id', 'phones');

 addRelationshipメソッドの引数は表3の通りです。

表3 addRelationshipメソッドの引数
No. 意味
1 テーブル1の変数
2 リレーションシップを設定するテーブル1の列名
3 テーブル2のビューから参照するときの、テーブル1の名前
4 テーブル2の変数
5 リレーションシップを設定するテーブル2の列名
6 テーブル1のビューから参照するときの、テーブル2の名前

 つまり、リスト5のaddRelationshopでは、以下のリレーションシップが定義されます。

  • phonesTableのvendorIdと、vendorsTableのidを関連付ける
  • phonesTableのビューから、vendorsTableは「vendor」として参照できる
  • vendorsTableのビューからは、phonesTableは「phones」として参照できる(ただし、このサンプルでは未使用)

 この定義を使って、リスト6の通りデータを取得・表示できます。phonesTableのビューからはvendorsTableを「vendor」として参照できるため、(1)でvendor.name、(2)でvendor.regionとして、vendorsTableの列を参照できます。定義したビューを利用して(3)でデータを取得してテーブルシートに表示します。リスト3(2)ではテーブルに対してfetchを実行していましたが、リレーションシップを利用する場合は先にビューを定義して、そのfetchを実行する点に注意してください。

[リスト6]リレーションシップを設定したphonesTableテーブルからデータを取得する処理(p002-relationship/index.js)
const view = phonesTable.addView('myView', [
(略)
  { value: 'vendor.name', width: 80, caption: '会社' },  // ...(1)
  { value: 'vendor.region', width: 80, caption: '地域' } // ...(2)
]);
view.fetch().then(() => { // ...(3)
  sheet.setDataView(view);
});

データのグループ表示

 取得したデータを、テーブルシートでグループに分類して表示する方法を、図3のサンプルで説明します。カテゴリーごとにグループ化された合計金額と、店舗によるスライス(店舗単位の金額)が表示されます。

図3 データをグループ表示するサンプル(p003-groupby)
図3 データをグループ表示するサンプル(p003-groupby)

 グループ表示するテーブル(accyTable)はリスト7の通りです。category(カテゴリー)name(製品名)price(価格)count(個数)shop(店舗)を含みます。

[リスト7]グループ表示するテーブルの定義(p003-groupby/index.js)
const accyTable = dataManager.addTable('accyTable', {
  data: [
    { category: 'ケース', name: 'iPhone 15 ケース',
      price: 1000, count: 50, shop: '本店' },
(略)
  ]
});

 「グループ化」ボタンクリック時に実行されるグループ表示の処理はリスト8の通りです。sheet.groupByメソッドにグループ表示の内容を指定して実行します。なお「グループ解除」ボタンクリックで「sheet.removeGroupBy();」によりグループ解除されます。

[リスト8]グループ表示を設定する処理(p003-groupby/index.js)
sheet.groupBy([
  {
    caption: 'カテゴリー', field: 'category', // ...(1)
    summaryFields: [ // ...(2)
      {
        caption: '合計額',
        formula: '=SUM([price] * [count])', // ...(2a)
        width: 80,
        style: { formatter: '#,0' },
        slice: { // ...(2b)
          field: 'shop',
          width: 80,
          style: { formatter: '#,0' }
        }
      }
    ]
  }
]);

 (1)に、グループ表示とする対象のデータ列を指定します。(2)のsummaryFieldsは、グループごとに集計するデータ列で、ここでは合計額の列を1つ指定しています。計算式は(2a)で、price列×count列の合計を指定します。(2b)はスライス(グループごとの集計をさらに分割する条件)で、ここではshop(店舗)での分割を指定します。

 同様の指定を画面で対話的に行えるパネル(テーブルシートパネル)を表示させることもできます(図4)。「フィールド」を「グループ」にドラッグアンドドロップして、集計方法(数式、キャプション、スライス)を設定できます。

図4 テーブルシートパネルを表示するサンプル(p004-table-sheet-panel)
図4 テーブルシートパネルを表示するサンプル(p004-table-sheet-panel)

 テーブルシートパネルを表示する実装はリスト9の通りです。GC.Spread.Sheets.TableSheet.TableSheetPanelコンストラクターの第1引数に名前、第2引数にスプレッドシートの変数、第3引数にテーブルシートパネルを表示するHTML要素を指定して実行します。

[リスト9]テーブルシートパネルの実装(p004-table-sheet-panel/index.js)
const panel = new GC.Spread.Sheets.TableSheet.TableSheetPanel(
  'myPanel', sheet, document.getElementById('table-sheet-panel'));

データの階層表示

 データの階層構造をデータグリッドに表示する機能を、図5のサンプルで説明します。表示した階層データはアイコンをクリックすることで折りたたみや展開も可能です。

図5 データの階層構造を表示するサンプル(p005-hierarchy)
図5 データの階層構造を表示するサンプル(p005-hierarchy)

 テーブルシートでは、階層データの定義方法が異なる、表4の階層タイプが利用できます。詳細は公式ドキュメントを参照してください。

表4 テーブルシートで利用できる階層タイプ
No. 階層タイプ 階層データの定義方法
1 Parent 各データが親データのIDを保持
2 ChildrenPath 各データが子データの配列を直接保持
3 Level 各データが階層レベルの数字を保持
4 Custom 階層を判定する処理を自分で実装

 図5のサンプルはParentタイプで実装されています(リスト10)。(1)のdataでは、各要素のparentIdに親データのIDを保持します。階層タイプは(2)で指定しており、typeに「Parent」を、columnには親データのIDに対応する属性名(ここではparentId)を指定します。階層を定義するためのデータID(id)は主キーである必要があるため、(3)でisPrimaryKeyをtrueに設定しています。

[リスト10]データの階層を定義する記述(p005-hierarchy/index.js)
const gadgetsTable = dataManager.addTable('gadgetsTable', {
  data: [ // ...(1)
    { id: 1, name: 'ガジェット', parentId: -1 },
    { id: 2, name: 'スマホ', parentId: 1 },
    { id: 3, name: 'タブレット', parentId: 1 },
    { id: 4, name: 'iPhone', parentId: 2 },
    { id: 5, name: 'Androidスマホ', parentId: 2 },
    { id: 6, name: 'iPad', parentId: 3 },
    { id: 7, name: 'Androidタブレット', parentId: 3 }
  ],
  schema: {
    hierarchy: { type: 'Parent', column: 'parentId' }, // ...(2)
    columns: {
      id: { dataName: 'id', isPrimaryKey: true } // ...(3)
    }
  }
});

 データの階層構造を表示するビューの定義はリスト11です。nameに対してoutlineColumn属性にtrueを設定して、階層表示されるようにします。

[リスト11]データの階層構造を表示するビューの定義(p005-hierarchy/index.js)
const view = gadgetsTable.addView('myView', [
  { value: 'id', width: 60, caption: 'ID' },
  { value: 'name', width: 200, caption: '名前', outlineColumn: true }
]);

バックエンドとのデータ同期機能

 テーブルシートは、バックエンドと通信してデータを同期する機能をサポートします。図6のサンプルでは、データ追加用の行および、テーブル左のボタン(行アクション)を利用して、データの追加、更新、削除ができます。バックエンドのWebサーバーは、Node.jsのWebサーバーアプリExpressを利用して、p006-serverサンプルに実装しています(実装内容はREADME.mdを参照)。サンプル実行時は、サーバー(p006-server)とWebページ(p006-client-autosync)の順で「npm run start」コマンドを実行します。

図6 バックエンドとデータを同期するサンプル(p006-client-autosync)
図6 バックエンドとデータを同期するサンプル(p006-client-autosync)

 バックエンドと通信させるにはリスト12の通り実装します。(1)のremoteで、データを読込(read)更新(update)追加(create)削除(delete)するときにHTTP通信するURLを指定します。HTTPメソッドは読込がGET、削除がDELETE、それ以外はPOSTがデフォルトですが、ここでは更新時の通信にPUTを指定しています。(2)のautoSyncは、データの変更をすぐにサーバーに同期する指定です。なお、HTTP通信における要求と応答の仕様は、公式デモページの「要求と応答」を参照してください。

[リスト12]バックエンドと通信するテーブル定義(p006-client-autosync/index.js)
const phonesTable = dataManager.addTable('phonesTable', {
  remote: { // ...(1)
    read: { url: apiUrl + 'phones' },
    update: { url: apiUrl + 'phones', method: 'PUT' },
    create: { url: apiUrl + 'phones' },
    delete: { url: apiUrl + 'phones' }
  },
  autoSync: true,  // データの変更をすぐにサーバーに同期 ...(2)
(略)
});

 テーブル左側のボタン(行アクション)は、リスト13の通り定義します。(1)でoptionsを取得して(2)でアクションを追加後、(3)で再設定しています。

[リスト13]行アクションの定義(p006-client-autosync/index.js)
const rowActions = GC.Spread.Sheets.TableSheet.BuiltInRowActions;
const options = sheet.rowActionOptions(); // ...(1)
options.push( // ...(2)
    rowActions.removeRow, // 行を削除
    rowActions.saveRow,   // 行の更新を保存
    rowActions.resetRow   // 行の更新を戻す
);
sheet.rowActionOptions(options); // ...(3)

 このサンプルではリスト12(2)のautoSyncにより、行単位でデータを反映させますが、autoSyncの代わりに「batch: true」と設定することで、複数行をまとめて反映させるようにもできます。詳細はp006-client-batchサンプルのREADME.mdを参照してください。

まとめ

 本記事では、メシウスのJavaScriptスプレッドシート部品SpreadJSをデータグリッドとして利用できるテーブルシートについて説明しました。カテゴリーや階層表示、バックエンドとの通信といった、データグリッドに最適化された機能が提供されています。

参考資料

この記事は参考になりましたか?

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

提供:メシウス株式会社

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/19101 2024/04/01 12:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング