第 6 回 テーブルの値を利用する(条件付きでデータを集計)

著者名: 落合 雄一 (External link)

目次

information

初めて kintone をカスタマイズする人が kintone API の基礎知識を学べるよう、チュートリアルの内容を充実させてリニューアルしました。
リニューアル後のチュートリアルは次のページを参照してください。
はじめよう kintone API

はじめに

今回は、kintone の JavaScript API でのデータ取得の中で質問が多いテーブルを使って、カテゴリ別のデータを集計します。

アプリの準備

今回使用する、パン屋の売上管理アプリの設定を見てみましょう。
テーブルの作り方は次のページを参考にしてください。
フォームに表(テーブル)を追加する (External link)

各フィールドとフィールドコードは以下のようになっています。
毎度のことですが、フィールドコードはあとで使います。

フィールド名 フィールドタイプ フィールドコード
日付 日付 日付
- テーブル order_items
- スペース sub_total_area
作成日時 作成日時 作成日時
更新日時 更新日時 更新日時

また、テーブル(order_items)フィールドの中はこのような感じです。

フィールド名 フィールドタイプ フィールドコード
カテゴリ ラジオボタン カテゴリ
商品名 文字列(1行) 商品名
単価(円) 数値 単価
個数 数値 個数

レコードの取得

以下は、6 月 23 日の売上データです。
このデータを利用してみることにしましょう。

テーブルのレコードオブジェクトを取得する、といっても特に難しいことはありません。
他のフィールドタイプと同じように、event オブジェクトの record 要素に対し、テーブルに設定したフィールドコードを指定してください。
つまり、以下のような形です。

1
const tableRecords = event.record.order_items.value;

これによってどのようなデータが取得できるのかについては、 フィールド形式 のページを確認しましょう。
テーブルのレスポンスデータについては、カスタムフィールドのテーブルの欄に記載があります。

テーブルのフィールド形式

フィールドタイプ

SUBTABLE

value の例
 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
"<フィールドコード>": {
    "type": "SUBTABLE",
    "value":[
        {
            "id": "48290",
            "value": {
                "文字列__1行__0": {
                    "type": "SINGLE_LINE_TEXT",
                    "value": "サンプル1"
                },
                "数値_0": {
                    "type": "NUMBER",
                    "value": "1"
                },
                "チェックボックス_0": {
                    "type": "CHECK_BOX",
                    "value":[
                        "選択肢1"
                    ]
                }
            }
        },
        {
            "id": "48291",
            "value": {
                "文字列__1行__0": {
                    "type": "SINGLE_LINE_TEXT",
                    "value": "サンプル2"
                },
                "数値_0": {
                    "type": "NUMBER",
                    "value": "2"
                },
                "チェックボックス_0": {
                    "type": "CHECK_BOX",
                    "value":[
                        "選択肢2"
                    ]
                }
            }
        }
    ]
}

特定の行のデータを取得する

試しに、テーブルの 2 行目のレコードの商品名を取得してみましょう。
ここで注意したいのが、配列の要素は「0」から数えるのでテーブルの 2 件目のデータは配列では 1 番目となる点です。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
(() => {
  'use strict';
  kintone.events.on('app.record.detail.show', (event) => {
    // フィールドコード"order_items"のレコードオブジェクトを取得
    const tableRecords = event.record.order_items.value;

    // 2個目の"商品名"フィールドの値を取得
    const secondItemName = tableRecords[1].value['商品名'].value;

    alert(secondItemName);
  });
})();

無事、2 件目の商品名「食パン」が取得できました!

上記のキャプチャでも分かると思いますが、alert の出力はテーブルのレコードを表示するより先に出ています。
つまり、app.record.detail.show イベントはテーブルのデータ表示より先に実行されているということですね。
ここについては、今後取得したテーブルのデータを利用して高度なことをするときのために覚えておいた方がよいかもしれません。

カテゴリ別の合計を算出する

次に、カテゴリ別の日別売上集計をしてみましょう。
「パン」「その他」のカテゴリ別の売上を調べるため、それぞれのカテゴリ別に売上を集計してスペースフィールドに表示するスクリプトを作ってみましょう。
ここまではじめようシリーズを読んで下さった皆さんには詳しい説明は不要と思いますが、以下はそのサンプルです。

 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
(() => {
  'use strict';
  kintone.events.on('app.record.detail.show', (event) => {
    const subTotals = {};
    const tableRecords = event.record.order_items.value;

    // テーブル内の各レコードをカテゴリごとに集計する
    for (let i = 0; i < tableRecords.length; i++) {
      const category = tableRecords[i].value['カテゴリ'].value;
      if (!subTotals[category]) {
        subTotals[category] = 0;
      }
      const number = tableRecords[i].value['個数'].value;
      const price = tableRecords[i].value['単価'].value;
      subTotals[category] += price * number;
    }

    // 集計結果をスペースフィールドに表示する
    const myTotalSpace = document.createElement('ul');
    for (const category in subTotals) {
      if (Object.prototype.hasOwnProperty.call(subTotals, category)) {
        const categorySpace = document.createElement('li');
        categorySpace.innerText = category + ': ' + subTotals[category] + '円';
        myTotalSpace.appendChild(categorySpace);
      }
    }

    kintone.app.record.getSpaceElement('sub_total_area').appendChild(myTotalSpace);
  });
})();

今回も簡単にできました!

最後に

ここでは取り上げませんでしたが、テーブルのデータの集計には、自動計算機能を利用する方法もあります。
そちらもぜひマスターしておいた方が便利な機能ではありますが、今回のように何かの条件を加えて自由な計算をするには JavaScript を利用するといろいろなことができるかと思います。
目的に応じて必要なものを選べるような kintone マスターをぜひ目指していきましょう!

information

この Tips は、2022 年 7 月版 kintone で動作を確認しています。

デモ環境

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

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