Handsontableを使ってkintoneをExcelライクに入力しよう その2 - 基本編

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

Index

• はじめに
• デモ環境
• サンプルアプリの設定
• コードの改修の解説
• 注意点
• 最後に

はじめに

前回、HandsontableをつかってExcelのように入力ができるようなTipsを公開しましたが、今回は前回の閲覧・編集に加えて、レコードの追加・削除にも対応したいと思います。

前回記事のコードをベースに修正していきますので前回記事も参照ください。
コードはこちらに公開しています。

GitHub mura-/kintone_handsontable.js

基本的に上記をコピーして必要な部分を書き換えれば動くとは思いますが、必要に応じてコードを参照しながら下記をお読みください。

※viewIdはカスタマイズビュー設定時のviewIdを入力してください。

デモ環境

デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/39/

ログイン情報はcybozu developer network デモ環境で確認してください。

サンプルアプリの設定

前回と同様のアプリ設定を用います。

前回記事の「kintone カスタマイズでの導入方法 - サンプルアプリの準備」の項目を参考にしてください。

カスタマイズで利用している Handsontable は、v7.0.0 以降 MIT ライセンスではなくなりました。
このカスタマイズでは、MIT ライセンスである v6.2.2 を利用しています（ライセンス表記）。
v7.0.0 以降を利用する際は Handsontable の HP で有償ライセンスを購入し、ライセンス条件に従ってご利用ください。
詳細は、Cybozu CDN ライセンス対応ガイド をご参照ください。

コードの改修の解説

レコードの追加に対応する

前回のsaveRecordsメソッドを拡張し、追加・更新両方に対応するようにします。

今回は、追加・更新のためにbulkRequestを利用しました。

bulkRequestは本来複数アプリへのレコード一括処理をするためにありますが、もちろん同じアプリにも使えます。これを使うことで１回のAPIの呼び出しだけでkintoneのレコード更新が済みますし、なにより追加・更新処理どちらかでエラーが有った場合はロールバックされるので安全です。

引数には、kintoneのレコードデータ(records)と、Handsontable上でセルが編集された際に取得できる配列（changeDatas）を指定することとします。

レコードの削除に対応する

handsontableの設定

削除は、コンテキストメニュー（右クリックメニュー）から実行できるようにしたいと思います。 まず、handsontableのコンテキストメニューオプションを設定します。デフォルトで機能はたくさんあるのですが、今回は行削除(remove_row)だけに対応します。

削除メソッドの作成

次に、削除用メソッド(deleteRecords)を作成します。 引数には、kintoneのレコードデータ(records)と、削除する行(index)・削除できる行数(amount)を指定できるようにします。 削除するべきレコード番号を抽出して、削除APIを呼び出します。

削除メソッドの呼び出し

レコード削除を実行すると、Handsontable の beforeRemoveRow イベントが発火します。

beforeRemoveRow イベントの中で、deleteRecords メソッドを呼び出して、削除処理を行います。

データを同期する

データの乖離が起きないよう、追加・更新・削除のタイミングでデータを再同期します。

データ取得メソッドの作成

今回は特に検索条件を指定しませんが、下記のように並び替えだけはレコード番号昇順にしてください。降順だとレコードを追加した行が一番先頭に表示されてしまいます。 また、limitも500と指定することで500件まで表示することができます。

追加・更新・削除時に同期する

下記のように、追加・更新・削除時のcallbackメソッドに同期するメソッドを指定します。 HandsontableはloadDataメソッドがあり、引数に取得したkintoneレコードデータを指定することで再同期することができます。 また、同期することにより、フォーム設定画面で指定したデフォルト値が表示されたり、計算フィールドのレコードが計算されて表示されるなどのメリットもあります。

データを定期的に同期する

追加・更新・削除時でなくとも、長く画面を開いていればデータが乖離する場合があります。
今回はデータを定期的に同期する処理もいれてみました。

注意点

• 今回のコードは表示できるデータ件数は500件まで、更新は100件までとなっています。コードをカスタマイズすることで、絞り込みやデータの条件を増やすことができます。
  • 表示できるデータ件数に制限があるため、今回のサンプルは一覧の設定の「ページネーションを表示する」に対応していません。
• APIの呼び出し回数は１アプリ１日あたり上限10,000回です。今回は同期処理をいれていますが、必要に応じて同期間隔を遅くしてください。開きっぱなしに注意してください。

最後に

これでExcelライクな操作方法で一通りのことができるようになりました。一括でデータを追加、更新したい場合や、削除したい場合に便利ですね。もっと便利に使えるように、Handsontableを利用したkintone スプレッドシートプラグインを開発して公開しています。

<<Handsontableを使ってkintoneをExcelライクに入力しよう その1 - 基本編

このTipsは、2022年7月版 kintone で確認したものになります。