Handsontable を使って kintone を Excel ライクに入力しよう その 1 - 基本編
はじめに
kintone はブラウザーからレコードの一覧の表示や編集ができますが、Excel のような画面で閲覧・編集がしたいという要望を度々聞きます。
今回は
Cybozu CDN で公開されている、
Handsontable
を使って Excel ライクな入力を実現してみました。
やり方を以下にまとめますので、興味のある方はぜひ試してみてください。
Handsontable とは
ホームページ: Handsontable
Handsontable は、Excel のようなスプレッドシートライクな入力を可能にしてくれる JavaScript ライブラリです。
サンプルページ
で試すとわかりますが、Excel のようにデータ入力ができるだけでなく、セルの書式の指定やチャートが作れたりと、機能が多いのも魅力です。
kintone カスタマイズでの導入方法
実際に、Handsontable(無償版)を kintone のカスタマイズに利用してみましょう。
デモ環境
デモ環境
で実際に動作を確認できます。
ログイン情報は
cybozu developer network デモ環境 で確認してください。
サンプルアプリの準備
まずはアプリの準備をします。
フィールドの設定
サンプルアプリのフィールドは以下です。
フィールド名とフィールドコードは同一にしました。
フィールド名(フィールドコード) | フィールドタイプ |
---|---|
レコード番号 | レコード番号 |
会社名 | 文字列(1 行) |
先方担当者名 | 文字列(1 行) |
見込み時期 | 日付 |
確度 | ラジオボタン |
製品名 | ドロップダウン |
単価 | 数値 |
ユーザー数 | 数値 |
小計 | 計算 |
一覧の設定
アプリの一覧は、カスタマイズビューを用います。
スプレッドシート表示のための要素を HTML で記述します。
|
|
カスタマイズビューについての詳細は、 第 7 回 カスタマイズビューを利用してみよう を参照ください。
JavaScript / CSS の設定
今回は Cybozu CDN に登録されているものを利用します。
Cybozu CDN には JavaScript だけでなく CSS ファイルも提供されている上、キャッシュも有効になっているので高速化を図れるという利点があります。
今回は version 6.2.2 を利用します。
アプリの JavaScript/CSS 設定画面には、下記 URL を指定します。
- JavaScript URL
https://js.cybozu.com/handsontable/6.2.2/handsontable.full.min.js - CSS URL
https://js.cybozu.com/handsontable/6.2.2/handsontable.full.min.css
カスタマイズで利用している Handsontable は、v7.0.0 以降は MIT ライセンスではなく有償です。
このカスタマイズでは、
MIT
ライセンスの v6.2.2 を利用しています(
ライセンス表記
)。
v7.0.0 以降を利用する際は
Handsontable の HP
で有償ライセンスを購入し、ライセンス条件にしたがって利用してください。
詳細は、
Cybozu CDN ライセンス対応ガイド
を参照してください。
データの入力
確認のために、サンプルデータを先に数件入力しておきましょう。
JavaScript プログラミング
実際に JavaScript でプログラミングしていきます。
Handsontable の仕様や使い方は
Handsontableの公式ドキュメント(v6.2.2)
を参照ください。
Handsontable の使い方
次のように指定するだけでスプレッドシートの表示が可能です。
Handsontable の data
オプションに kintone のレコードデータを指定すればバインドできそうです。
|
|
スプレッドシートにレコードを一覧表示する
まずは単純に kintone のレコードをスプレッドシートに表示してみます。
Handsontable の data
オプションには、kintone のレコードデータを指定し、columns
には フィールド名.value
と指定することで、kintone のレコードデータをそのまま反映できます。
必要に応じて、colHeaders
オプションに配列を指定することで、ヘッダー行も指定できます。
viewId はカスタマイズビュー設定時の viewId を入力してください。
|
|
これで kintone に登録したデータを Excel のように表示できるようになるはずです。
スプレッドシートに表示したレコードを更新する
表示はできたので、その表示されたデータを更新できるようにします。
データの更新時、afterChange
オプションに指定したメソッドが呼び出されるので、そのメソッドを利用して kintone のアップデート処理を行います。
また、columns
オプションを指定するときは、編集されたくないデータを readOnly
に指定できます。
|
|
afterChange
メソッドの引数 Change
は次の配列が格納されます。
上記の例では、"変更があったセルの行数"を参照しどのレコード番号のデータを変更するかを指定しています。
|
|
ちなみに、データのバインディングは自動で行われますので、スプレッドシート上で変更したデータは、kintone の event.records
変数にすでに反映されています。
便利ですね。
おわりに
今回は、Handsontable を用いて、Excel ライクな見た目で、レコードの表示と編集が行えるように kintone をカスタマイズしました。
次回は、
Handsontable を使って kintone を Excel ライクに入力しよう その 2 - 基本編 でレコードの追加やプルダウンによる選択などを試してみます。
この Tips は、2022 年 7 月版 kintone で動作を確認しています。