kintoneで本日時点での年齢を計算する


kintoneを使ってメンバー管理をしたいということになりましたが,なぜかkintoneでは本日時点での年齢を計算できないので,いろいろな記事を参考にjavascriptで実装しました.登録手順を忘れてしまわないように手順をまとめておきます.

前提条件

  • アルゴリズムについては参考情報の考え方を流用しています
  • 「生年月日」フィールド(文字列)に登録された生年月日を取得し,「年齢」フィールド(計算)に結果を表示します
  • フォーム,一覧のいずれでもエラーなく動くようにします
  • 登録時の年齢は「基準日付」をもとに計算します

参考情報

環境整備

一度登録したJavascriptファイルをkintone上で編集できるようにするプラグイン「JSEdit for kintone」.登録後に修正したい場合にはとても便利です.

フォームを作成

kintoneで下記のフォームを作成します.

なお,年齢の「計算式」にはあらかじめ

(基準日付-生年月日)/86400/365

を登録してあります.

年齢計算Javascriptファイルの作成

年齢計算の関数については,参考情報にある関数の内容を入れます.

autocalc_age.js
// 20210331 年齢自動計算
// 以下のページを参考に修正.
// https://www.messiahworks.com/archives/4554

(function() {

  // 生年月日が入っているフィールドコード名
  const BIRTHDAY_FIELD_NAME = '生年月日';
  // 年齢を設定するフィールドコード名
  // (基準日付-生年月日)/86400/365
  const AGE_FIELD_NAME = '年齢';

  "use strict";

  // 現在の年齢計算する関数
  function getYearMonth(arg_yyyy_mm_dd) {
    // 参考ページのロジックをコピー
  }

  // フォームへの表示
  kintone.events.on(['app.record.detail.show'], function (event) {
    var record = event.record; // 保存前の画面上のレコード

    // 生年月日
    var emBirthDay = kintone.app.record.getFieldElement(BIRTHDAY_FIELD_NAME);

    // 年齢
    var emAge = kintone.app.record.getFieldElement(AGE_FIELD_NAME);

    // 年齢を表示するためのラベルを生成
    var emLabel = document.createElement("label");
    var emDiv = document.createElement("span");
    emAge.appendChild(emDiv);
    emDiv.appendChild(emLabel);

    // 年齢文字列を取得
    var valBirthday = getYearMonth(record[BIRTHDAY_FIELD_NAME]['value']);

    // 年齢の設定
    emLabel.appendChild(document.createTextNode("" + valBirthday + "歳)"));

    return event;
  });

  // レコード一覧表示
  kintone.events.on(['app.record.index.show'], function (event) {
    //0件Hit対策
    if (!event.size){
      return;
    }

    // レコード配列をローカル変数に格納
    var records = event.records;

    // 年齢列を取得
    var emAge = kintone.app.getFieldElements(AGE_FIELD_NAME);

    // レコード数の分だけループ
    for (var i = 0; i < records.length; i++) {
      var record = records[i];

      // 値の取得
      var record_data = record[BIRTHDAY_FIELD_NAME]['value'];

      if( record_data !== '' && emAge !== null ){
        // DOM要素の取得し、年齢を追加
          var part = emAge[i];
          part.innerHTML = "<DIV><SPAN>(" + getYearMonth(record_data) + "歳)</SPAN></DIV>";
      }
    }

    return event;
  });

})();

kintoneへの登録

初回は,「Javascript/CSSでカスタマイズ」から今作成したファイルを登録します.
PC用のJavascriptファイルとスマートフォン用のJavaScriptファイルが分かれているので,
それぞれに対して「アップロードして追加」を選択して登録します.

画面左上の「保存」ボタンを押すと,JavaScriptが登録されます.

画面上の表示

一覧では計算した年齢のみ,フォームでは,登録時の(基準日に対する)年齢と計算した年齢を両方表示します.

1.一覧での表示

2.フォームでの表示

登録済みのJavascriptファイルの編集

「プラグイン」画面から,JSEdit for Kintoneの設定を開くと,編集画面が出てきます.
いちいち登録しなくても良いので,非常に便利です.