Kintoneとは、社内の業務管理を効率化する非常に便利なノーコードツールです。

しかし、標準機能のみでは満たせないものもあり、その一つが年齢計算機能です。
Kintoneでは、標準で現在の日付までの年齢を計算する機能が提供されていないですが、Javascriptでカスタマイズすることによって、簡単にこの機能を追加することができます。

この記事では、Kintoneで年齢計算を自動化するためのJavascriptのカスタマイズ方法をご紹介します。

前提と必要なフィールド

今回は例として、生年月日から年齢を計算し、年齢フィールドに自動で表示されるような機能を実装しようと思います。

  1. 生年月日（日付フィールド）
  2. age（スペースフィールド）

アプリを作成するにあたって上記のフィールドを作成してください。

Javascriptコードの作成

結論、以下のソースコードを添付すると生年月日の横に年齢が表示されます。

(() => {
  'use strict';

  /**
   * 生年月日から年齢を計算する関数
   * @param {string} birthdateString - 'YYYY-MM-DD'形式の生年月日文字列
   * @returns {number} 計算された年齢
   */
  function getAgeFromBirthdate(birthdateString) {
    const parts = birthdateString.split('-');
    const year = parseInt(parts[0], 10);
    const month = parseInt(parts[1], 10);
    const day = parseInt(parts[2], 10);

    const today = new Date();
    const birthdate = new Date(year, month - 1, day);
    const currentYearBirthday = new Date(
      today.getFullYear(),
      birthdate.getMonth(),
      birthdate.getDate()
    );

    let age = today.getFullYear() - birthdate.getFullYear();

    // 今年の誕生日を迎えていない場合、年齢から1を引く
    if (today < currentYearBirthday) {
      age--;
    }

    return age;
  }

  // レコードの詳細ページ表示イベントで年齢を計算して表示する
  kintone.events.on('app.record.detail.show', (event) => {
    const record = event.record;

    // 生年月日のフィールド要素を取得
    const birthdayElement = kintone.app.record.getFieldElement('生年月日');

    if (birthdayElement) {
      const birthdateString = birthdayElement.textContent.trim();
      const age = getAgeFromBirthdate(birthdateString);

      // 新しいdiv要素を作成して年齢を表示する
      const ageDiv = document.createElement('div');
      ageDiv.textContent = `(満${age}歳)`;
      ageDiv.style.marginTop = '34px';

      // スペース要素に年齢表示用のdivを追加する
      const spaceAge = kintone.app.record.getSpaceElement('age');
      if (spaceAge) {
        spaceAge.appendChild(ageDiv);
      }
    }

    return event;
  });
})();

完成品としては、以下のようになります。

Javascriptコードの説明

年齢計算関数

getAgeFromBirthdate関数は、生年月日の文字列を受け取り年齢を計算します。

/**
 * 生年月日から年齢を計算する関数
 * @param {string} birthdateString - 'YYYY-MM-DD'形式の生年月日文字列
 * @returns {number} 計算された年齢
 */
function getAgeFromBirthdate(birthdateString) {
    const parts = birthdateString.split('-');
    const year = parseInt(parts[0], 10);
    const month = parseInt(parts[1], 10);
    const day = parseInt(parts[2], 10);
    const today = new Date();
    const birthdate = new Date(year, month - 1, day);
    const currentYearBirthday = new Date(
        today.getFullYear(),
        birthdate.getMonth(),
        birthdate.getDate()
    );
    let age = today.getFullYear() - birthdate.getFullYear();
    if (today < currentYearBirthday) {
        age--;
    }
    return age;
}

レコード詳細表示イベントの設定

app.record.detail.showイベントを監視し、レコード詳細ページが表示されたときに関数を実行します。

// レコードの詳細ページ表示イベントで年齢を計算して表示する
kintone.events.on('app.record.detail.show', (event) => {
    const record = event.record;

生年月日の取得と年齢計算

getAgeFromBirthdate関数を使用して年齢を計算します。

    // 生年月日のフィールド要素を取得
    const birthdayElement = kintone.app.record.getFieldElement('生年月日');

    if (birthdayElement) {
        const birthdateString = birthdayElement.textContent.trim();
        const age = getAgeFromBirthdate(birthdateString);

年齢表示用の新しい要素を作成

年齢を表示するための新しいdiv要素を作成して、指定されたスペースフィールドを挿入します。

        // 新しいdiv要素を作成して年齢を表示する
        const ageDiv = document.createElement('div');
        ageDiv.textContent = `(満${age}歳)`;
        ageDiv.style.marginTop = '34px';

        // スペース要素に年齢表示用のdivを追加する
        const spaceAge = kintone.app.record.getSpaceElement('age');
        if (spaceAge) {
            spaceAge.appendChild(ageDiv);
        }
    }

    return event;
});

まとめ

Kintoneは、業務管理を効率化する非常に便利なノーコードツールですが、標準機能だけでは満たせないニーズも存在します。この記事では、その一例として年齢計算機能を追加する方法を紹介しました。

JavaScriptを活用することで、標準機能では実現できないカスタマイズを行い、業務の効率化と精度向上を図ることが可能です。ぜひ、この記事を参考にして、Kintoneでの業務管理をさらに充実させてください。

このサイトではほかにも、Kintoneの様々なカスタマイズ方法に関する記事も投稿しておりますので、ぜひチェックしてくださいね！

https://arcuss-service.com/knowledge/how-to-disable-field.html