# レコード一覧画面の複数集計表示について

**URL:** <https://community.cybozu.dev/t/topic/6844>\
**Category:** kintone 開発相談\
**Created:** [2020 年 11 月 16 日午前 2:00 UTC](https://community.cybozu.dev/t/topic/6844 "2020-11-16T02:00:26Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account2889](https://avatars.discourse-cdn.com/v4/letter/l/8dc957/32.png) [@Legacy\_Account2889](https://community.cybozu.dev/u/Legacy_Account2889)\
**Post date:** [2020 年 11 月 16 日午前 2:00 UTC](https://community.cybozu.dev/t/topic/6844/1 "2020-11-16T02:00:26Z")

</div>

Javascript初心者です。よろしくお願い致します。

レコード一覧画面に「売上合計金額・レコード件数・売上平均金額」を表示させたいです。

[https://developer.cybozu.io/hc/ja/community/posts/360001961103-kintone-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E4%B8%80%E8%A6%A7%E7%94%BB%E9%9D%A2-%E9%9B%86%E8%A8%88%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6](https://community.cybozu.dev/hc/ja/community/posts/360001961103-kintone-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E4%B8%80%E8%A6%A7%E7%94%BB%E9%9D%A2-%E9%9B%86%E8%A8%88%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6)&nbsp;

過去の投稿で「売上合計金額」は表示できますが、並列で「レコード件数や平均売り金額」が表示できません。

JSを複数登録すると同一場所に重なってしい、一瞬見えるのですが消えてしまいます。

Javascriptの記述で複数表示する方法をご教授して頂けると助かります。

```
(function() {
  "use strict";
  var getRecords = function(app, tmpRecords){
   var limit = 500;
   var tmpRecords = tmpRecords || [];
    return kintone.api(kintone.api.url('/k/v1/records', true), 'GET', {
      app: app,
      query: kintone.app.getQueryCondition() +'limit ' + limit +' offset ' + tmpRecords.length
    }).then(function(response){
      tmpRecords = tmpRecords.concat(response.records);
      return response.records.length === limit ? getRecords(app, tmpRecords) : tmpRecords;
    });
  }
  kintone.events.on('app.record.index.show', function(event){
    getRecords(kintone.app.getId()).then(function(records){
      kintone.app.getHeaderSpaceElement().innerHTML = '売上金額合計(円):' + records.reduce(function(previousValue, record){
        return previousValue + Number(record.売上金額.value);
      }, 0).toLocaleString();
    });
  });
})();

```

&nbsp;

あと、平均（avg)や件数(count)を求める記述を教えて頂けるとありがたいです。

&nbsp;

宜しくお願い致します。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1130](https://avatars.discourse-cdn.com/v4/letter/l/f04885/32.png) [@Legacy\_Account1130](https://community.cybozu.dev/u/Legacy_Account1130)\
**Post date:** [2020 年 11 月 16 日午前 6:04 UTC](https://community.cybozu.dev/t/topic/6844/2 "2020-11-16T06:04:26Z")

</div>

＞過去の投稿で「売上合計金額」は表示できますが、並列で「レコード件数や平均売り金額」が表示できません。

JSを複数登録すると同一場所に重なってしい、一瞬見えるのですが消えてしまいます。

&nbsp;

恐らく、kintone.app.getHeaderMenuSpaceElement().innerHTMLで上書きしているのが原因だと思います。

innerHTMLは追加していくappendChildなどと違い、中身のHTMLを上書きします。

&nbsp;

これでどうでしょうか？

```
kintone.events.on('app.record.index.show', function(event){
getRecords(kintone.app.getId()).then(function(records){
var count = records.length;
var total = records.reduce(function(previousValue, record) {
return previousValue + Number(record.売上金額.value);
}, 0);
var avg = total / count;
var html = "売上金額合計(円):" + total.toLocaleString() + "円" +
" レコード件数:" + count + "件" +
" 売上金額(平均)" + avg + "円";
    kintone.app.getHeaderMenuSpaceElement().innerHTML = html;
});

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2889](https://avatars.discourse-cdn.com/v4/letter/l/8dc957/32.png) [@Legacy\_Account2889](https://community.cybozu.dev/u/Legacy_Account2889)\
**Post date:** [2020 年 11 月 16 日午前 6:30 UTC](https://community.cybozu.dev/t/topic/6844/3 "2020-11-16T06:30:14Z")

</div>

Ryokkeさん

早速のご返信ありがとうございます。

書き換えたコードでうまく表示されませんでした。

```
(function() {
  "use strict";
    var getRecords = function(app, tmpRecords){
    var limit = 500;
    var tmpRecords = tmpRecords || [];
    return kintone.api(kintone.api.url('/k/v1/records', true), 'GET', {
      app: app,
      query: kintone.app.getQueryCondition() +'limit ' + limit +' offset ' + tmpRecords.length
    }).then(function(response){
      tmpRecords = tmpRecords.concat(response.records);
      return response.records.length === limit ? getRecords(app, tmpRecords) : tmpRecords;
    });
  }
  kintone.events.on('app.record.index.show', function(event){
    getRecords(kintone.app.getId()).then(function(records){
      var count = records.length;
        var total = records.reduce(function(previousValue, record) {
            return previousValue + Number(record.売上金額.value);
        }, 0);
        var avg = total / count;
        var html = "売上金額合計(円):" + total.toLocaleString() +
                   " レコード件数:" + count +
                   " 売上金額(平均)" + avg;
      kintone.app.getHeaderSpaceElement().innerHTML = html;
      }, 0).toLocaleString();
    });
  });

```

不備な記述はありますでしょうか？

お手数をお掛け致しますが、宜しくお願い致します。

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1130](https://avatars.discourse-cdn.com/v4/letter/l/f04885/32.png) [@Legacy\_Account1130](https://community.cybozu.dev/u/Legacy_Account1130)\
**Post date:** [2020 年 11 月 16 日午前 6:41 UTC](https://community.cybozu.dev/t/topic/6844/4 "2020-11-16T06:41:04Z")

</div>

何かエラー等は出ていますでしょうか？

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1130](https://avatars.discourse-cdn.com/v4/letter/l/f04885/32.png) [@Legacy\_Account1130](https://community.cybozu.dev/u/Legacy_Account1130)\
**Post date:** [2020 年 11 月 16 日午前 6:46 UTC](https://community.cybozu.dev/t/topic/6844/5 "2020-11-16T06:46:28Z")

</div>

kintone.app.getHeaderSpaceElement().innerHTML&nbsp;=&nbsp;html;

の次の行の },&nbsp;0).toLocaleString(); ←は消してください。

&nbsp;

それと最後の })(); ←が抜けています！

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1130](https://avatars.discourse-cdn.com/v4/letter/l/f04885/32.png) [@Legacy\_Account1130](https://community.cybozu.dev/u/Legacy_Account1130)\
**Post date:** [2020 年 11 月 16 日午前 6:47 UTC](https://community.cybozu.dev/t/topic/6844/6 "2020-11-16T06:47:53Z")

</div>

全部書くとこんな感じですね。

```
(function() {
"use strict";
var getRecords = function(app, tmpRecords) {
var limit = 500;
var tmpRecords = tmpRecords || [];
return kintone.api(kintone.api.url('/k/v1/records', true), 'GET', {
app: app,
query: kintone.app.getQueryCondition() +'limit ' + limit +' offset ' + tmpRecords.length
}).then(function(response){
tmpRecords = tmpRecords.concat(response.records);
return response.records.length === limit ? getRecords(app, tmpRecords) : tmpRecords;
});
}
kintone.events.on('app.record.index.show', function(event){
getRecords(kintone.app.getId()).then(function(records) {
var count = records.length;
var total = records.reduce(function(previousValue, record) {
return previousValue + Number(record.売上金額.value);
}, 0);
var avg = total / count;
var html = "売上金額合計(円):" + total.toLocaleString() +
" レコード件数:" + count +
" 売上金額(平均):" +Math.round(avg).toLocaleString();
kintone.app.getHeaderSpaceElement().innerHTML = html;
});
});
})();

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2889](https://avatars.discourse-cdn.com/v4/letter/l/8dc957/32.png) [@Legacy\_Account2889](https://community.cybozu.dev/u/Legacy_Account2889)\
**Post date:** [2020 年 11 月 16 日午前 6:50 UTC](https://community.cybozu.dev/t/topic/6844/7 "2020-11-16T06:50:31Z")

</div>

Cnsoleには特に何もエラーはありません。

WTS\_Extension [RUNTIME.ONMESSAGE][OP-4]: {“ERR”:503,“OP”:4,“STANDALONE”:0,“VER”:1}が表示されています。

エラーでしょうか？

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1130](https://avatars.discourse-cdn.com/v4/letter/l/f04885/32.png) [@Legacy\_Account1130](https://community.cybozu.dev/u/Legacy_Account1130)\
**Post date:** [2020 年 11 月 16 日午前 6:56 UTC](https://community.cybozu.dev/t/topic/6844/8 "2020-11-16T06:56:34Z")

</div>

上のコードをコピペして、エラーは改善されましたでしょうか？

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2889](https://avatars.discourse-cdn.com/v4/letter/l/8dc957/32.png) [@Legacy\_Account2889](https://community.cybozu.dev/u/Legacy_Account2889)\
**Post date:** [2020 年 11 月 16 日午前 6:59 UTC](https://community.cybozu.dev/t/topic/6844/9 "2020-11-16T06:59:25Z")

</div>

Ryokke様

ご指導ありがとうございました。

表示されました。

最後に教えて頂きたいことで、平均値の小数点を切りたいのですが、ご教授お願い致します。

本当にありがとうございました。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1130](https://avatars.discourse-cdn.com/v4/letter/l/f04885/32.png) [@Legacy\_Account1130](https://community.cybozu.dev/u/Legacy_Account1130)\
**Post date:** [2020 年 11 月 16 日午前 7:09 UTC](https://community.cybozu.dev/t/topic/6844/10 "2020-11-16T07:09:29Z")

</div>

```
" 売上金額(平均):" + avg  
↓↓↓  
" 売上金額(平均):"+Math.round(avg).toLocaleString();

// 上記のようにすれば、問題ないと思います(^^)

// Math.round(数値)で、四捨五入ができます。
// toLocaleString()は桁区切りにします。

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2889](https://avatars.discourse-cdn.com/v4/letter/l/8dc957/32.png) [@Legacy\_Account2889](https://community.cybozu.dev/u/Legacy_Account2889)\
**Post date:** [2020 年 11 月 16 日午前 7:22 UTC](https://community.cybozu.dev/t/topic/6844/11 "2020-11-16T07:22:00Z")

</div>

Ryokke様

本当にありがとうございました。無事表示されました。

今回は基フィールドが「売上金額」でしたが、基になるフィールドが二つになる場合は

下記のように記述すればいいのでしょうか？

```
vartotal = records.reduce(function(previousValue, record) {
returnpreviousValue +Number(record.売上金額.value);
},0);

vartotal 1= records.reduce(function(previousValue, record) {
returnpreviousValue +Number(record.予測金額.value);
},0);

追記で申し訳ありませんが、ご教授願えれば助かります。

```

宜しくお願い致します。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1130](https://avatars.discourse-cdn.com/v4/letter/l/f04885/32.png) [@Legacy\_Account1130](https://community.cybozu.dev/u/Legacy_Account1130)\
**Post date:** [2020 年 11 月 16 日午前 7:32 UTC](https://community.cybozu.dev/t/topic/6844/12 "2020-11-16T07:32:25Z")

</div>

売上金額と予測金額の合計を別々で取られたいのであれば

それで大丈夫だと思います(^^)

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2889](https://avatars.discourse-cdn.com/v4/letter/l/8dc957/32.png) [@Legacy\_Account2889](https://community.cybozu.dev/u/Legacy_Account2889)\
**Post date:** [2020 年 11 月 16 日午前 7:34 UTC](https://community.cybozu.dev/t/topic/6844/13 "2020-11-16T07:34:21Z")

</div>

Ryokke様

ありがとうございました。

今後ともご教授の程、宜しくお願い致します。

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2889](https://avatars.discourse-cdn.com/v4/letter/l/8dc957/32.png) [@Legacy\_Account2889](https://community.cybozu.dev/u/Legacy_Account2889)\
**Post date:** [2020 年 11 月 16 日午前 8:59 UTC](https://community.cybozu.dev/t/topic/6844/14 "2020-11-16T08:59:16Z")

</div>

お世話になります。

一覧の表示はできましたが、表示項目に空白が無く見づらいです。

空白を挿入する記述を教えてください。検索で /t とか記述しましたができませんでした。

恐れ入りますが宜しくお願い致します。

```
(function() {
    "use strict";
      var getRecords = function(app, tmpRecords){
      var limit = 500;
      var tmpRecords = tmpRecords || [];
      return kintone.api(kintone.api.url('/k/v1/records', true), 'GET', {
        app: app,
        query: kintone.app.getQueryCondition() +'limit ' + limit +' offset ' + tmpRecords.length
      }).then(function(response){
        tmpRecords = tmpRecords.concat(response.records);
        return response.records.length === limit ? getRecords(app, tmpRecords) : tmpRecords;
      });
    }
    kintone.events.on('app.record.index.show', function(event){
      getRecords(kintone.app.getId()).then(function(records){
        var count = records.length;
          var total = records.reduce(function(previousValue, record) {
              return previousValue + Number(record.売上金額.value);
          }, 0);
          var total1 = records.reduce(function(previousValue, record) {
            return previousValue + Number(record.予測金額.value);
        }, 0);
          var html = "レコード件数:" + count + "件" + ←←ここです。
                     "売上金額合計:" + total.toLocaleString() + "円" + 
                      "未使用先予測金額:" + total1.toLocaleString() + "円";
        kintone.app.getHeaderSpaceElement().innerHTML = html;
      });
    });
  })();

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1130](https://avatars.discourse-cdn.com/v4/letter/l/f04885/32.png) [@Legacy\_Account1130](https://community.cybozu.dev/u/Legacy_Account1130)\
**Post date:** [2020 年 11 月 16 日午前 11:38 UTC](https://community.cybozu.dev/t/topic/6844/15 "2020-11-16T11:38:46Z")

</div>

それでしたら、jsを以下のように変えましょう！

```
(function() {
"use strict";
var getRecords = function(app, tmpRecords) {
var limit = 500;
var tmpRecords = tmpRecords || [];
return kintone.api(kintone.api.url('/k/v1/records', true), 'GET', {
app: app,
query: kintone.app.getQueryCondition() +'limit ' + limit +' offset ' + tmpRecords.length
}).then(function(response){
tmpRecords = tmpRecords.concat(response.records);
return response.records.length === limit ? getRecords(app, tmpRecords) : tmpRecords;
});
}
kintone.events.on('app.record.index.show', function(event){
getRecords(kintone.app.getId()).then(function(records) {
var count = records.length;
var total = records.reduce(function(previousValue, record) {
return previousValue + Number(record.売上金額.value);
}, 0);
var avg = total / count;
var html = '<div class="header-box">'+
'<span>売上金額合計: ' + total.toLocaleString() + '円</span>' +
'<span>レコード件数: ' + count + '件</span>' +
'<span>売上金額平均: ' + Math.round(avg).toLocaleString() + '円</span>' +
'</div>';
kintone.app.getHeaderSpaceElement().innerHTML = html;
});
});
})();

```

&nbsp;

そしてstyle.cssなどのファイル名で以下のcssを追加して下さい。

paddingの10pxの部分を大きくすれば、間隔も大きくなります。

太文字が嫌な場合はfont-weightの行を削除してください(^^)

```
@charset "UTF-8";
div.header-box {
display: inline-block;
}
div.header-box span {
display: inline-block;
font-size: 18px; /* 文字サイズ */
font-weight: 600; /* 文字の太さ */
padding: 0 10px; /* 横の間隔 */
}

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2889](https://avatars.discourse-cdn.com/v4/letter/l/8dc957/32.png) [@Legacy\_Account2889](https://community.cybozu.dev/u/Legacy_Account2889)\
**Post date:** [2020 年 11 月 17 日午前 1:01 UTC](https://community.cybozu.dev/t/topic/6844/16 "2020-11-17T01:01:36Z")

</div>

Ryokke様

ご教授ありがとうございました。

見事に表示できました。楽しくハッピーです！

まだまだ未熟で理解できておりませんが、ありがとうございました。

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2025 年 5 月 28 日午前 1:12 UTC](https://community.cybozu.dev/t/topic/6844/17 "2025-05-28T01:12:29Z")

</div>

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。