kintone の日時フィールドのフォーマットを、Moment.js でカスタマイズする
警告
Moment.js はメンテナンスモードになり、
日付処理できる代替ライブラリへの移行
が推奨されています。
代替ライブラリのひとつ
Luxon
については、
kintone カスタマイズでの導入方法の紹介記事 があります。
はじめに
こんにちは、門屋です。
今回は Cybozu CDN に掲載されている Moment.js を使用して、日付フィールドを「年/月/日」にしたり、日時フィールドを Twitter のように「分前、日前」というような表示にする方法を紹介します。
JavaScript では標準で日時のフォーマットを扱う関数があまりありませんが、Moment.js を使うと柔軟に日付データを整形したり、そのデータを使って計算したりできます。
デモ環境
デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/36/
ログイン情報は cybozu developer network デモ環境 で確認してください。
Moment.js について
Moment.js は日付データを整形、バリデーション、計算、表示するための JavaScript ライブラリです。
github でソースコードが公開されています。
公式サイト
Moment.js の基本の使い方
このように、Moment.js を使えば、標準の関数にはない柔軟な日付データを操作できます。
さらに詳しい使い方については、
Moment.js のマニュアル
を参照してください。
|
|
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 関数の使い方について、 ヘルプ に詳細な説明がありますので、より詳しく知りたい方はそちらを参照してください。
完成イメージ
JavaScriptカスタマイズで変更する
標準機能のみでフォーマットを変更する方法を紹介しましたが、その場合、「計算式」が使えるフィールドをひとつ追加し、変更したフォーマットの日付をそちらのフィールドで表示させる必要があります。
元の「日付」フィールドのフォーマットを書き換える、という運用にしたい場合、Moment.js を使った、こちらの「JavaScript カスタマイズで変更する」方法があります。
完成イメージ
サンプルプログラム
レコード詳細画面でカスタマイズを行う場合、JavaScript コードは以下のようになります。
|
|
他のフォーマットに指定したい場合は、下記「'YYYY/MM/DD'」の部分を変更してください。
Moment.js が対応しているフォーマットは公式ドキュメント
Format
を参照してください。
|
|
日時フォーマットを現在からの経過時間(相対表示)に変更
Moment.js を使ったカスタマイズでは、基本的なフォーマット変更だけではなく、日時フィールドのデータを「何分前」「何時間前」というような形で表示させることもできます。
完成イメージ
サンプルプログラム
レコード一覧画面でカスタマイズを行う場合、JavaScript コードは以下のようになります。
|
|
Moment.js を使ったカスタマイズ実例を 2 つ紹介しました。
実は cybozu developer network で紹介されている Tips に、次のような活用例もあります。
- 入社年月日フィールドから入社してからの経過年月を計算する。
経過年数を表示する Tips - 期限フィールドの値を使って、「期限が過ぎているか」などを計算する。
ログインユーザーが担当しているレコードに背景色をつける Tips
ご興味のある方はぜひそちらも確認してみてください。
おわりに
日付や時刻のフォーマットを自分で行うのは意外と面倒なものです。
その点で、Moment.js は便利なライブラリです。
また、Moment.js には Moment Timezone というライブラリもあり、これを使うことで JavaScript から異なるタイムゾーンを扱うことができます。
国際化が必要なカスタマイズなどで効果を発揮します。
Moment Timezone
この Tips は、2022 年 10 月版 kintone で動作を確認しています。