kintone API

日付や時刻の操作

戻る

経過年数を表示する

目次

概要

固定リンクがコピーされました

こちらのサンプルコードは、レコードの詳細画面に勤続年数を表示するカスタマイズです。
また、ボタンを押すことで、生年月日から年齢を計算してアラートに表示させることもできます。

カスタマイズの適用方法は、「 適用手順 」部分を参照してください。

完成形

固定リンクがコピーされました

デモ環境

固定リンクがコピーされました

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

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

下準備

固定リンクがコピーされました

適用手順

固定リンクがコピーされました

JavaScriptファイルの追加

固定リンクがコピーされました

  1. まずは、カスタマイズに必要なライブラリを追加します。
    アプリの設定画面から「JavaScript / CSSによるカスタマイズ」を開き、「PC用のJavaScriptファイル」に、「URL指定」で次のライブラリを順番に指定します。

    • Luxon
      https://js.cybozu.com/luxon/3.7.2/luxon.min.js

    上記URLは、2025年10月16日時点でのCybozu CDNで配信されている最新バージョンのURLです。
    Luxonを導入する際は、 Cybozu CDN を確認し、必要に応じて配信されているバージョンを変更してください。

  2. 次は、後述の サンプルコード を追加します。

    1. サンプルコード 部分のコードをエディターにコピーします。
      ファイル名を「sample.js」、文字コードを「UTF-8」、「BOMなし」で保存します。
      ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。
    2. 指定したライブラリの下に、サンプルコードのファイルを「アップロードして追加」で追加します。
    3. アプリの設定を保存し、レコード一覧を表示します。

設定画面の完成イメージ

固定リンクがコピーされました

サンプルコード

固定リンクがコピーされました

 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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

/*
 * Luxon sample program
 * Copyright (c) 2025 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */

(() => {
  'use strict';
  kintone.events.on('app.record.detail.show', (event) => {
    const record = event.record;

    const birthDayFieldCode = 'BirthDay';
    const spaceFieldCode = 'BirthDay';
    const joiningDayFieldCode = 'JoiningDate';

    /**
     * 経過年月日を計算する
     * @param {string} dateStr 日付文字列
     * @returns {object} 計算結果のオブジェクト
     */
    const calculateDuration = (dateStr) => {
      const currentDate = luxon.DateTime.local().startOf('day');
      const date = luxon.DateTime.fromISO(dateStr).startOf('day');
      // 経過期間を計算する
      const duration = currentDate.diff(date, ['years', 'months', 'days']);
      return duration.toObject();
    };

    // 入社からの経過年月日を表示する
    const joiningDayValue = record[joiningDayFieldCode].value;
    if (joiningDayValue) {
      const joiningDayDuration = calculateDuration(joiningDayValue);
      const joiningDayElement = kintone.app.record.getFieldElement(joiningDayFieldCode);
      if (joiningDayElement) {
        const emDiv = document.createElement('span');
        const emLabel = document.createElement('label');

        emLabel.textContent = `${joiningDayDuration.years}年${joiningDayDuration.months}ヶ月`;
        emDiv.appendChild(document.createElement('br'));
        emDiv.appendChild(emLabel);

        const currentWidth = joiningDayElement.offsetWidth;
        joiningDayElement.style.width = (currentWidth + 50) + 'px';

        emDiv.style.color = 'blue';
        joiningDayElement.appendChild(emDiv);
      }
    }

    // 年齢を計算する
    const birthDayValue = record[birthDayFieldCode].value;
    if (birthDayValue) {
      const birthDayDuration = calculateDuration(birthDayValue);
      const birthDayButtonElement = kintone.app.record.getSpaceElement(spaceFieldCode);
      if (birthDayButtonElement) {
        const button = document.createElement('button');
        button.id = 'age_button';
        button.textContent = '年齢計算';
        button.addEventListener('click', () => {
          alert(birthDayDuration.years + '歳です。');
        });
        birthDayButtonElement.appendChild(button);
      }
    }

    return event;
  });
})();

使用したAPI

固定リンクがコピーされました

information

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