ラジオボタンを利用してレコード内集計する

Index

• はじめに
• 実現できること
• サンプルコード
• カスタマイズのポイント
• 注意事項

はじめに

kintone の「計算」フィールドは、フィールドの値の自動計算に利用できてとても便利です。
でも、こんなことで困った経験はありませんか？

• 分析のために、レコード内数値の合計や平均を表示したい。
• ユーザーの入力を簡易化させるために、数値入力ではなくラジオボタン等の選択肢から選ばせたい。

こういった場合も、2020年1月のアップデートで、 IF 関数 を使って実現できるようになりました。

IF 関数でも実現できますが、今回はカスタマイズで、ラジオボタンやドロップダウン等、選択した値の自動計算を実現する方法をご紹介します！

実現できること

ラジオボタン等で選択されている数値の合計または平均を算出し、指定したフィールドに表示します。
計算対象として利用できるのは下記のフィールドです。

• ラジオボタン
• チェックボックス
• 複数選択
• ドロップダウン

さらに、追加の機能です。
レコード内で選択した値の数をそれぞれカウントし、指定したフィールドに表示します。

様々なアプリでの活用が期待できるので、対象フィールドをJavaScriptのコードに直接書くのではなく、メンテナンスしやすいように設定画面で設定できるようにすると便利ですね。
このため、今回はプラグインという形で実現することにしました。

設定画面のイメージ

集計対象フィールドや集計方法を、設定画面で設定することができます。これなら、JavaScript の知識がない人でも手軽にメンテナンスすることができますね！

サンプルコード

サンプルコードは、GitHubに公開されています。

https://github.com/kintone-samples/SAMPLE-select-type-form-totalization

プラグインとして利用してみたい方は GitHub からソースコードをダウンロードし、こちらの手順を参考にパッケージングを行ってください。

カスタマイズのポイント

ここでは、プラグインで実装されているカスタマイズ（totalization.js）のポイントについて解説します！

集計

集計（値の数、合計、平均）の処理は、calcCount、calcSum、calcAverage という function でそれぞれ行っています。

ポイント１：フィールド値の複数選択への対応

集計対象フィールドには複数選択可能なフィールドタイプ（チェックボックス、複数選択）が含まれるため、$.isArray で配列であるか判断して処理を分けています。

ポイント２：テーブル内フィールドへの対応

テーブル内のフィールドはフィールド値の階層が異なるため、通常のフィールドとは別の対応が必要です。
※詳細は、フィールド形式の「テーブル」を参照

テーブル内フィールドを取得するため、テーブルの中の階層に入っているフィールドに対して$.eachで処理を行います。

なお、テーブルのフィールドコードは事前にまとめて取得しています。

イベント処理

集計処理が動くタイミングも重要です。

レコードの編集・保存時はもちろんですが、入力中も集計値は自動更新してほしいですよね。
そんなときは、各画面のフィールド値変更イベントを利用します。

ポイント：フィールド値変更イベントの利用

対象フィールドからトリガーにしたいフィールドイベントをすべて生成し、すべてのイベントに対してevents.onで処理が動くようにしています。
また、モバイルでも動くようにモバイル用イベントも対象としています。

テーブル内フィールドが対象に含まれる場合、テーブルの行追加・行削除時にも再計算が必要となるため、テーブル自体のフィールド値変更イベントにも対応しています。

注意事項

• 本カスタマイズについて、プラグインファイル（zipファイル）の公開予定はありません。
  プラグインとして利用してみたい方は、サンプルコード を確認しパッケージングを行ってください。
• プラグインの詳しい使い方は、GitHub の README をご確認ください。
• 本カスタマイズのデモ環境はご用意しておりません。

本Tipsは、2021年1月版 kintoneで確認したものになります。