Handsontable を使って kintone を Excel ライクに入力しよう その 1 と その 2 では、ライブラリ Handsontable を利用して Excel ライクにデータの入力ができるようカスタマイズしてきました。

ただし、上記記事で紹介した Handsontable は無償版（v6.2.2）ということで、少し古いバージョンとなっています。

古いバージョンの場合、たとえば kintone のテーブルを複雑な表として表示できません。
この記事では最新の Handsontable（執筆時点で有償版 v12.1.3）では何ができるか、ということを紹介したいと思います。

今回はテーブルの内容（列：訪問日、訪問内容）を入れ子で表現してみます。
行に親子関係をもたせることができ、見やすくなります。

まずはアプリの準備をします。

サンプルアプリのフィールドは以下です。
フィールド名とフィールドコードは同一にしました。

アプリの一覧は、カスタマイズビューを用います。
スプレッドシート表示のための要素を HTML で記述します。

1

<div id="sheet"></div>

カスタマイズビューについての詳細は下記を参照ください。

• Tips 第7回 カスタマイズビューを利用してみよう

今回はお試しということで最新の Hansontable（v12.2.0）の評価版を利用します。
Handsontable の公式サイトのダウンロードページ より、各種方法で JavaScript/CSS ファイルをダウンロードできます。
ページ内の「Download ZIP」からファイルをダウンロードして、手動で kintone にアップロードしましょう。
ZIP ファイルを展開して、JavaScript/CSS ファイルを kintone のアプリにアップロードしましょう。
アプリに JavaScript/CSS ファイルをアップロードする手順はヘルプ JavaScript や CSS でアプリをカスタマイズする を参考してください。

• JavaScript ファイル
  • 展開した ZIP ファイル：/handsontable/dist/handsontable.full.min.js
• CSS ファイル
  • 展開した ZIP ファイル：/handsontable/dist/handsontable.full.min.css

確認のために、サンプルデータを先に数件入力しておきましょう。

前述でアップロードしたファイルに加え、下記もアップロードします。
13 行目の viewId はご自身のアプリの一覧の viewId をいれてください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

/*
 * Edit kintone record like Excel by handsontable sample program
 * Copyright (c) 2022 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */
(() => {
  'use strict';

  // 一覧ビュー表示用のイベントハンドラ
  kintone.events.on(['app.record.index.show'], (event) => {
    if (event.viewId !== 5520500) return event;

    const container = document.getElementById('sheet');
    container.style.marginTop = '10px';
    container.style.marginLeft = '10px';

    // handsontable初期化
    new Handsontable(container, {
      data: event.records.map(row => {
        return {
          レコード番号: row.レコード番号.value,
          会社名: row.会社名.value,
          先方担当者名: row.先方担当者名.value,
          見込み時期: row.見込み時期.value,
          確度: row.確度.value,
          製品名: row.製品名.value,
          訪問日: null,
          訪問内容: null,
          __children: row.テーブル.value.map(trow => {
            return {
              訪問日: trow.value.訪問日.value,
              訪問内容: trow.value.訪問内容.value,
            };
          })

        };
      }),
      // 表示したいカラム
      colHeaders: ['レコード番号', '会社名', '先方担当者名', '見込み時期', '確度', '製品名', '訪問日', '訪問内容'],
      // 入れ子表現をONにする
      nestedRows: true,

      // その他設定
      licenseKey: 'non-commercial-and-evaluation',
      filters: true,
      height: 'auto',
      contextMenu: [],
    });
    return event;
  });
})();

今回の例では一覧画面の event オブジェクトから取得できる event.records を使って、レコードを表示します。

Handsontable の data オブジェクトに event.records.map でオブジェクトの配列を作成し渡しています（21 行目）。
このとき、colHeaders（41 行目）で指定した配列のキー名と一致させておく必要がありますので注意してください。
map などの利用方法は forEach, map, filter などをつかって kintone の records 配列をもっと上手に扱う を参考にしてみてください。

完成イメージのように、テーブルの内容を入れ子で表示するには、__children へ入れ子にしたいテーブルの内容を配列で渡します（31 行目）。

nestedRows も true にする必要があります（43 行目）。

また、今回は評価版なので、 licenseKey は評価用のキーを指定します（46 行目）。

19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

// handsontable初期化
new Handsontable(container, {
  data: event.records.map(row => {
    return {
      レコード番号: row.レコード番号.value,
      会社名: row.会社名.value,
      先方担当者名: row.先方担当者名.value,
      見込み時期: row.見込み時期.value,
      確度: row.確度.value,
      製品名: row.製品名.value,
      訪問日: null,
      訪問内容: null,
      __children: row.テーブル.value.map(trow => {
        return {
          訪問日: trow.value.訪問日.value,
          訪問内容: trow.value.訪問内容.value,
        };
      })

    };
  }),
  // 表示したいカラム
  colHeaders: ['レコード番号', '会社名', '先方担当者名', '見込み時期', '確度', '製品名', '訪問日', '訪問内容'],
  // 入れ子表現をONにする
  nestedRows: true,

  // その他設定
  licenseKey: 'non-commercial-and-evaluation',
  filters: true,
  height: 'auto',
  contextMenu: [],
});

有料プランにすると、最新の Handsontable の機能を利用できます。
料金は開発者ごとに発生し、使用するエンドユーザーへの課金は発生しないライセンスとなっています。
また、スタンダードプランでは月に 2 回のサポートを受けられるため開発で困ったことをきくこともできます。

プランと詳細については 価格ページ を確認してください。

無償版の v6.2.2 から現在のバージョンは v12 までになっていますので、やれることはかなり増えています。
無償版との利用できる機能の違いをいくつか紹介します。

Column menu

列にメニューをもたせることができる機能です。
画像にあるように、左右に列を追加したり列を削除したり、さまざまなコンテキストメニューを用意できます。

Nested headers

列のヘッダーを入れ子で表現できます。

Column filter

filter をカスタムでき、複雑なフィルターリングや自由な UI でのフィルターリングが可能です。

Row sorting

ソートの制御がより自由にできます。
次の例では一番左の列のみオフにする、という制御をしています。

Row parent-child

今回のサンプルで紹介した機能です。
行に親子関係をもたせることができ、見やすくなります。

CSV export

表示されているものをそのまま CSV にエクスポートするということが可能です。

React/Vue/Angular との統合

React/Vue/Angular 向けに、統合的に開発できるようパッケージが公開されています。

• 社内用ツールとして作り込む。
  ライセンスは開発者単位になるため、Handsontable を使ったカスタマイズが適用されたアプリの利用者にはライセンス料がかかりません。
  社内向けに Handsontable を利用して、kintone をより使いやすくカスタマイズするのに向いています。
• 販売用に kintone プラグインを開発する。
  社内用ツールとして知見がたまったらプラグインとしても販売を検討していいかと思います。
  同じくエンドユーザー課金ではないのでプラグインを作成してしまえば自由に公開できます。

実際に最新バージョンで利用できる機能を利用しつつ、kintone へ入れ込むとこのようになります。

• 表示されているデータをダウンロードできるよう、CSV のダウンロードボタンを設置
• テーブルの内容（列：訪問日、訪問内容）を親子構造で表現
• フィルター機能を追加し、列ごとに検索をかけやすく（画像下）

今回紹介した Handsontable の機能 を用いることで、kintone のデータの表現方法や編集方法がぐんと広がるかと思います。
社内やプラグイン開発にむけてより快適な Excel ライクな入力を提供したいと思ったときにぜひ検討してみてください。