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で動作を確認しています。