kintone の日時フィールドのフォーマットを、Moment.js でカスタマイズする

著者名: KADOYA Ryo (External link)

目次

caution
警告

Moment.js はメンテナンスモードになり、 日付処理できる代替ライブラリへの移行 (External link) が推奨されています。
代替ライブラリのひとつ Luxon (External link) については、 kintone カスタマイズでの導入方法の紹介記事 があります。

はじめに

こんにちは、門屋です。
今回は Cybozu CDN に掲載されている Moment.js を使用して、日付フィールドを「年/月/日」にしたり、日時フィールドを Twitter のように「分前、日前」というような表示にする方法を紹介します。

JavaScript では標準で日時のフォーマットを扱う関数があまりありませんが、Moment.js を使うと柔軟に日付データを整形したり、そのデータを使って計算したりできます。

デモ環境

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

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

Moment.js について

Moment.js は日付データを整形、バリデーション、計算、表示するための JavaScript ライブラリです。
github でソースコードが公開されています。
公式サイト (External link)

Moment.js の基本の使い方

このように、Moment.js を使えば、標準の関数にはない柔軟な日付データを操作できます。
さらに詳しい使い方については、 Moment.js のマニュアル (External link) を参照してください。

 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
// ロケールを設定
moment.locale('ja');

// 日付データを取得
const date = kintone.app.record.get().record['日時'].value;

// 日付をフォーマット
moment(date).format('YYYY/MM/DD HH:mm');
// '2015/07/02 11:01'

// 10日後
moment(date).add(10, 'day').format();
// '2015-07-12T11:01:00+09:00'

// 先月の末日
moment(date).subtract(1, 'month').endOf('month').format();
// '2015-06-30T23:59:59+09:00'

// 月曜の日付を取得する
moment(date).day('Monday').format();
// '2015-06-29T11:01:00+09:00'

// 曜日を取得
moment().format('dddd');
// '水曜日'

kintone で Moment.js を使ってみる

Cybozu CDN にアップロードされている Moment.js を使うと簡単に kintone から Moment.js を利用できます。
Cybozu CDN

2020 年 8 月 1 日現在、最新の Moment.js の URL は以下です。

  • https://js.cybozu.com/momentjs/2.27.0/moment.min.js
  • https://js.cybozu.com/momentjs/2.27.0/moment-with-locales.min.js

上の URL を kintone の「アプリの設定」「JavaScript / CSS でカスタマイズ」画面の、「PC 用の JavaScript ファイル」に設定します。
通常は moment-with-locales.min.js のみ追加します。

kintone カスタマイズでの実用例

では実際に、kintone カスタマイズでの実用例を紹介します。

日付フォーマットを「YYYY/MM/DD」に変更

kintone の日付フィールドのフォーマット、デフォルトでは「YYYY-MM-DD」という表示になっていますが、「YYYY/MM/DD」のような、ほかのフォーマットに変更させることは可能です。
今回は、「標準機能で変更する」「JavaScript カスタマイズで変更する」の 2 つの方法を紹介します。

標準機能で変更する

日付の表示フォーマットを変更するには、実は標準機能だけで変更する方法があります。
手軽にできる方法なので、Moment.js を使った「JavaScript カスタマイズで変更する」方を紹介する前に、まずはそちらを紹介します。
具体的には、計算フィールド/文字列(1 行)フィールドの計算式で DATE_FORMAT 関数を使する、という方法になります。
次のように、文字列(1 行)フィールド「年/月/日」をひとつ追加します。
「自動計算する」の「算式」の欄に DATE_FORMAT(日付, "YYYY/MM/dd", "Asia/Tokyo") を設定すると、文字列(1 行)フィールドの「年/月/日」に、変更されたフォーマットで日付を表示させことができます。

DATE_FORMAT 関数の使い方について、 ヘルプ (External link) に詳細な説明がありますので、より詳しく知りたい方はそちらを参照してください。

完成イメージ

JavaScriptカスタマイズで変更する

標準機能のみでフォーマットを変更する方法を紹介しましたが、その場合、「計算式」が使えるフィールドをひとつ追加し、変更したフォーマットの日付をそちらのフィールドで表示させる必要があります。

元の「日付」フィールドのフォーマットを書き換える、という運用にしたい場合、Moment.js を使った、こちらの「JavaScript カスタマイズで変更する」方法があります。

完成イメージ

サンプルプログラム

レコード詳細画面でカスタマイズを行う場合、JavaScript コードは以下のようになります。

 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
/*
 * Moment.js sample program
 * Copyright (c) 2020 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */

(() => {
  'use strict';
  // ロケールを初期化
  moment.locale('ja');

  // レコード詳細画面表示イベント
  kintone.events.on('app.record.detail.show', (event) => {
    const record = event.record;
    const dateFieldCode = '日付';
    const dateFieldValue = record[dateFieldCode].value;

    if (dateFieldValue) {
      const dateFieldDate = moment(dateFieldValue);
      const element = kintone.app.record.getFieldElement(dateFieldCode);

      // 日付フォーマットを'YYYY/MM/DD'に変更
      element.innerText = dateFieldDate.format('YYYY/MM/DD');
    }
    return event;
  });
})();

他のフォーマットに指定したい場合は、下記「'YYYY/MM/DD'」の部分を変更してください。
Moment.js が対応しているフォーマットは公式ドキュメント Format (External link) を参照してください。

24
25
// 日付フォーマットを'YYYY/MM/DD'に変更
element.innerText = dateFieldDate.format('YYYY/MM/DD');

日時フォーマットを現在からの経過時間(相対表示)に変更

Moment.js を使ったカスタマイズでは、基本的なフォーマット変更だけではなく、日時フィールドのデータを「何分前」「何時間前」というような形で表示させることもできます。

完成イメージ

サンプルプログラム

レコード一覧画面でカスタマイズを行う場合、JavaScript コードは以下のようになります。

 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
/*
 * Moment.js sample program
 * Copyright (c) 2020 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */

(() => {
  'use strict';
  // ロケールを初期化
  moment.locale('ja');

  kintone.events.on('app.record.index.show', (event) => {
    const records = event.records;
    const updateDateFieldCode = '更新日時';

    // レコード一覧画面表示イベント
    const elements = kintone.app.getFieldElements(updateDateFieldCode);
    for (let i = 0; i < records.length; i++) {
      const date = records[i][updateDateFieldCode].value;

      // 「何分/時間/月/年前」を表示する
      elements[i].innerText = moment(date).fromNow();
      elements[i].style.verticalAlign = 'middle';
      elements[i].style.padding = '14px 8px';
    }
  });
})();

Moment.js を使ったカスタマイズ実例を 2 つ紹介しました。
実は cybozu developer network で紹介されている Tips に、次のような活用例もあります。

ご興味のある方はぜひそちらも確認してみてください。

おわりに

日付や時刻のフォーマットを自分で行うのは意外と面倒なものです。
その点で、Moment.js は便利なライブラリです。
また、Moment.js には Moment Timezone というライブラリもあり、これを使うことで JavaScript から異なるタイムゾーンを扱うことができます。
国際化が必要なカスタマイズなどで効果を発揮します。
Moment Timezone (External link)

information

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