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