こちらのサンプルコードは、レコードの詳細画面に勤続年数を表示するカスタマイズです。
また、ボタンを押すことで、生年月日から年齢を計算してアラートに表示させることもできます。
カスタマイズの適用方法は、「
適用手順
」部分を参照してください。
デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/62/
ログイン情報は
cybozu developer networkデモ環境
で確認してください。
JavaScriptファイルの追加
固定リンクがコピーされました
-
まずは、カスタマイズに必要なライブラリを追加します。
アプリの設定画面から「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
を確認し、必要に応じて配信されているバージョンを変更してください。
-
次は、後述の
サンプルコード
を追加します。
-
サンプルコード
部分のコードをエディターにコピーします。
ファイル名を「sample.js」、文字コードを「UTF-8」、「BOMなし」で保存します。
ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。
- 指定したライブラリの下に、サンプルコードのファイルを「アップロードして追加」で追加します。
- アプリの設定を保存し、レコード一覧を表示します。
設定画面の完成イメージ
固定リンクがコピーされました
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;
});
})();
|
