経過年数を表示する

目次

概要

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

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

完成形

デモ環境

デモ環境で実際に動作を確認できます。
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/2.3.0/luxon.min.js
    • jQuery
      https://js.cybozu.com/jquery/2.2.4/jquery.min.js
      ライブラリの詳細に関しては、 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
71
/*
 * Luxon sample program
 * Copyright (c) 2022 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 = function(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);
      const $emLabel = $('<label>');
      const $emDiv = $('<span>');

      $(joiningDayElement).append($emDiv);
      $(joiningDayElement).css({
        width: $(joiningDayElement).innerWidth() + 50 + 'px',
      });

      $emDiv.append($emLabel);
      $emLabel.html('<br>');
      $emLabel.append(
        joiningDayDuration.years + '年' + joiningDayDuration.months + 'ヶ月'
      );

      $emDiv.css({
        color: 'blue',
      });
    }

    // 年齢を計算する
    const birthDayValue = record[birthDayFieldCode].value;
    if (birthDayValue) {
      const birthDayDuration = calculateDuration(birthDayValue);
      const bitrhDayButtonElement = kintone.app.record.getSpaceElement(spaceFieldCode);
      const $emButton = $('<button>', {
        id: 'age_button',
        text: '年齢計算',
      }).on('click', () => {
        alert(birthDayDuration.years + '歳です。');
      });
      $(bitrhDayButtonElement).append($emButton);
    }

    return event;
  });
})();

使用した API