📢できること：関連レコードの数値合計を表示！

Kintoneには「関連レコード」という、レコード詳細画面で条件にマッチした他アプリのレコードを一覧で表示できる便利な機能があります。この機能を使うとマスタ系のアプリ（顧客マスタなど）に、同マスタを参照している日報や取引記録アプリのレコードを関連付けてリスト表示できます。

以下の画面は、従業員マスタに休暇申請アプリの記録を関連レコードで表示している例です。

しかし標準機能では、関連レコードの「数値合計」を計算して表示することができません。

テーブル内の数値なら、計算フィールドを使って集計できるのですが、関連レコードでは残念ながらそれができません。テーブルと似たような外見なのに、なぜ集計出来ないの？と思いますよね。

それは関連レコードは「見えてるだけで、中身は別アプリのデータ」だからです。
それでも「何とか集計できませんか？」と相談を受けることが多いカスタマイズ例です。

関連レコードの集計も、JavaScript カスタマイズであれば実現可能です。
この、出来そうでできない関連レコードの「合計値を計算して表示する」方法をご紹介します。

💻 デモ画面

デモ画面では、社員マスタのフォームに休暇申請アプリの関連レコードを設定しています。関連レコードの下に表示している休暇の取得日数の合計表示は、Javascriptカスタマイズで実現しています。
この様に、関連レコードの集計値をパッと見たい時に便利なカスタマイズ事例です。

📝 関連レコード一覧の集計の利用シーン

関連レコード一覧の数値フィールドが集計できると、以下の様に色々な活用方法があります。

製品マスター × 日報アプリ
製品ごとの最新生産数量・作業時間を関連レコードから集計し、製品詳細画面でリアルタイムに確認。生産現場と管理部門の情報共有がスムーズに。

社員マスター × 休暇申請アプリ
社員の年間休暇取得日数を自動で合計表示することで、上司や人事担当者の判断が即座に可能に。

顧客マスター × 見積・受注アプリ
顧客ごとの見積金額や受注金額を関連レコードから集計し、案件詳細で金額合計をひと目で把握。営業部門の活動管理に有効。

仕入先マスター × 発注アプリ
仕入先ごとの発注金額・件数を集計表示。取引量の多い仕入先を簡単に見分けられ、購買交渉や発注先見直しに活用できる。

顧客マスター × 請求アプリ
顧客ごとの未回収金額を自動合計し、営業担当が訪問前に回収状況を把握。請求漏れや回収遅延の防止にもつながる。

在庫マスター × 入出庫履歴アプリ
商品別の出庫合計数や入庫合計数を瞬時に表示。リアルタイムな在庫推移を可視化し、欠品や過剰在庫の判断をスピーディに。

プロジェクトマスター × 作業報告アプリ
プロジェクトごとの作業工数や経費を関連レコードから合算して表示。進行中のプロジェクトのコスト管理や採算判断に役立つ。

🔨 JavaScript カスタマイズの方法

💻 サンプルコード

関連レコードの集計に必要な機能を実装するサンプルコードを用意しました。
初期設定のフィールドコードの定義を、設定したいアプリの内容に変更するだけで動作します。
サンプルコードは、MITライセンスなので、自由に使っていただいて問題ありません。

/* 関連レコードを集計表示する
 * Distributor: https://note.com/appgroup
 * Copyright (c) 2025 Application Utilization Study Group
 * Licensed under the MIT License
 ------------------------------------------------------------*/
// 初期設定：フィールドコードを定義する
const relatedFieldCode = '関連レコード'; // 関連レコード一覧のフィールドコード
const keyFieldCode = '製品番号'; 	 // キーとなるフィールドコード
const totalFieldCode = '売上高'; 	 // 集計対象となる数値型・計算型のフィールドコード
const spaceFieldCode = 'TotaltSpace'; 	 // 集計結果を表示するスペースフィールドの要素ID

(async (event) => {
  'use strict';
  const relatedAppId = kintone.app.getRelatedRecordsTargetAppId(relatedFieldCode);
  if (!relatedAppId) return event;

  const keyFieldValue = event.record[keyFieldCode].value;
  if (!keyFieldValue) return event;

  try {
    const {
      records
    } = await kintone.api(kintone.api.url('/k/v1/records', true), 'GET', {
      app: relatedAppId,
      query: `${keyFieldCode}="${keyFieldValue}" limit 500`
    });

    const total = records.reduce((sum, r) => sum + (parseFloat(r[totalFieldCode].value) || 0), 0);
    const spaceEl = kintone.app.record.getSpaceElement(spaceFieldCode);

    if (spaceEl) {
      spaceEl.textContent = `合計: ${total.toLocaleString()}`;
      spaceEl.style.cssText = 'font-size:16px;font-weight:bold;color:red;margin-left:20px;';
    }
  } catch (err) {
    console.error('APIエラー: ', err);
  }

  return event;
})(kintone.events.on('app.record.detail.show', (event) => event));

⚙ kintoneでの設定手順

1. JavaScriptファイルを準備する
   • 上記のコードをコピーし、任意のテキストエディタに貼り付けます。
   • 初期設定のフィールドコードをアプリの設定に合わせて修正します。
   • 文字コードUTF-8で、ファイル名を分かりやすい名前（日本語でもOK）で保存します。
2. kintoneアプリの設定を開く
   • 集計結果を表示したいアプリを開き、画面右上の歯車アイコン⚙️から「設定」をクリックします。
   • 設定画面で「JavaScript / CSSでカスタマイズ」を選択します。
3. JavaScriptファイルをアップロードする
   • PCから「ファイルをアップロードする」で、ステップ1で作成したファイルをアップロードします。
   • アップロードが完了したら、「保存」をクリックしてアプリの設定変更を適用します。

これらの設定を正しく行えば、アプリの詳細画面を開いた際に自動で集計結果が表示されるようになります。

💡 ちょっとした注意点も押さえよう

• Javascriptコードをコピーして保存する時は、文字コードを必ず”UTF-8“にしましょう。Windows標準のShift-JISコードのままだと、日本語のフィールドコードが文字化けして正常に動作しません。
  　　
• Kintone API では検索結果の取得件数が 最大500件（デフォルトは100件）まで。大量データを扱うときは、limit 500 のように制限を明示しておくと安心です。
  　　
• 関連レコード一覧の集計は、サンプルコードの様にRESTAPI 経由で関連レコードを検索・合計する必要がありますので、API回数制限（1アプリ1日10,000回など）に注意しましょう。

📓 まとめ：ポイント

Kintone を使いこなすコツは、業務手続の中で「手間のかかる」「少し不便」と思う作業（課題）を見つけて、チョットした便利さを「自分たちの手」で工夫して「達成感」を得ることです。
今回のカスタマイズもその一歩です。ぜひ、あなたが使っているアプリの内容に合わせてアレンジして活用してみてください！

🔨 自分でカスタマイズしてみたい方へ

以下のNote記事で本記事のカスタマイズ事例を紹介しています。
記事内で紹介しているカスタマイズコードは、無料で利用できるので是非挑戦してみて下さい。

「note:アプリ活用研究会（キン活）」は、当サイトのメンバーが執筆しています。

Kintone関連レコードの値を集計する｜アプリ活用研究会（キン活）

Kintoneアプリで関連レコードの値を集計するカスタマイズを試しました。 関連レコードとは、レコード詳細画面に「条件に一致したレコード」を一覧表示できる機能です。 ヘルプページ：関連レコードとは よく似た機能にテーブル（表）という機能が有り、こちらではテーブル内の数値データをテーブル外で計算フィールドを作成して集計ができます。 しかし関連レコードは、標準機能では「集計」する方法が有りません。 ◆やりたいこと 工場で製品マスターと日報アプリを作成して、製品マスターに日報アプリ...

note.com

🧩 プラグインのご紹介

当社が開発した、関連レコード集計プラグインをご紹介します。
試用版（60日間）もダウンロードして利用できます。
Javascriotカスタマイズは、少しハードルが高いです💦　という方はこちらもご検討下さい。

kintoneの関連レコード集計プラグイン

kintoneアプリの関連レコード一覧の数値型・計算型フィールドの値を集計するプラグインです。試用版のお申込み関連レコードの集計が出来れば良いのに、と思ったことありませんか？kintoneの関連レコード一覧は、とても便利な機能ですが、標準機能では、関連レコード内の数値フィールドの集計までは出来ません。似た形式の「テーブル」の明細は集計できるのに「関連レコード一覧」はなぜ集計できないのか？それは、関連レコード一覧は、他アプリのデータを「見せている」だけだからです。でも、もし関連...

dejitora.jp

2025.08.15

🌸 アプリテンプレートの販売

本記事でご紹介しているアプリテンプレートを、下記の料金プランで販売しています。
導入をご希望の方は、各プランの「お申込み／お問い合わせ」ボタンからお問い合わせください。

■ 料金プラン

◆単品販売（買取型）は、導入サポート付きの価格です。
　単品動作タイプは60,000円、２アプリ連携タイプは100,000円、3つ以上連携タイプは150,000円です。
◆簡易サポート契約では、当サイトのアプリテンプレートとプラグインを合計6種類までご利用できます。
◆会員サポート契約では、ご利用範囲「無制限」で運用ヘルプデスク対応までフルサービスでご提供します。

🏫 kintone人材育成研修

この様なカスタマイズを自分で出来る様になりたい方は、当サイトの「Kintome人材育成」上級コースの受講をご検討して下さい。当サイトのTIPSで紹介しているカスタマイズ例のテンプレートを使えば、簡単に実装出来ます！
上級コースの受講者には、特典で当サイトのカスタマイズテンプレート（3種類まで）と３か月のサポート契約を無償でご提供しています。

研修目的を「カスタマイズテンプレートのアプリ導入」とする研修メニューもご提案可能です。

📣カスタマイズ・導入支援いたします！

本記事の様な「kintoneアプリのカスタマイズ」をご希望の企業様へ
kintoneを便利に活用できるカスタマイズと運用支援は、ぜひ当社にご相談ください！

#kintone #Javascript #カスタマイズ #関連レコード集計