Handsontableを使ってkintoneをExcelライクに入力しよう その3 - 上級編

（著者：kintone エバンジェリスト 村濱 一樹）

Index

• はじめに
• 完成イメージ
• 設定手順
• サンプルコード
• サンプルコードの解説
• 有償版の Handsontable について
• kintoneカスタマイズでの使い所
• kintoneに組み込んだ例
• 最後に

はじめに

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

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

古いバージョンの場合、たとえば kintone のテーブルを複雑な表として表示できません。

この記事では最新の Handsontable（有償版 執筆時点でv12.1.3）では何ができるか、ということを紹介したいと思います。

完成イメージ

今回はテーブルの内容（列：訪問日、訪問内容）を入れ子で表現してみます。

行に親子関係をもたせることができ、見やすくなります。

設定手順

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

フィールドの設定

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

フィールド名（フィールドコード）	フィールドタイプ	備考
レコード番号	レコード番号
会社名	文字列(1行)
先方担当者名	文字列(1行)
見込み時期	日付
確度	ラジオボタン
製品名	ドロップダウン
テーブル	テーブル	下記「訪問日」「訪問内容」を内包する
訪問日	文字列(1行)	「テーブル」内フィールドとして設定する
訪問内容	文字列(1行)	「テーブル」内フィールドとして設定する

一覧の設定

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

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

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

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

JavaScript/CSS の設定

今回はお試しということで最新の 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

データの入力

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

サンプルコード

前述でアップロードしたファイルに加え、下記もアップロードします。

※7行目の viewId はご自身のアプリの一覧の viewId をいれてください。

サンプルコードの解説

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

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

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

nestedRowsもtrueにする必要があります(37行目)。

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

有償版の Handsontable について

料金体系

有料プランにすると、最新の 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 むけに統合的に開発ができるようパッケージが公開されています。

kintoneカスタマイズでの使い所

• 社内用ツールとして作り込む
  
  ライセンスは開発者単位になるため、Handsontable を使ったカスタマイズが適用されたアプリの利用者にはライセンス料がかかりません。

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

kintone に組み込んだ例

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

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

最後に

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