カテゴリー内の他の記事

Luxon を使って kintone の日付や日時フィールドのフォーマットをカスタマイズする

Index

はじめに

Cybozu CDN に日付処理を行うライブラリ Luxon が追加されました。
Luxon は、同じく日付を処理できる Moment.js の後継的なライブラリにあたります。

この記事では、kintone カスタマイズにおける Luxon の導入方法や、よくある日付処理を Luxon で扱う方法を紹介します。

Luxon とは

Luxon は日付データのフォーマット、バリデーション、計算、表示を行うための JavaScript ライブラリです。
ソースコードは GitHub にあり、公式ドキュメントも公開されています。

Moment.js との違い

メリット1:Luxon 単体でタイムゾーンを扱える

Moment.js でタイムゾーンに関する操作を扱う場合、Moment Timezone というライブラリの追加が必要でした。
参考:Moment Timezone を使って簡単時差管理

Luxon は単体でタイムゾーンに対する操作ができます。

メリット2:Luxon で生成するオブジェクトはイミュータブルなオブジェクト

イミュータブルなオブジェクトとは、作成した後に状態が変わらないオブジェクトのことです。
Moment.js のオブジェクトは、ミュータブルなため(イミュータブルではないため)、日付の加算などの操作を行うと、操作を行った元のオブジェクトも変更されます。

Moment.js で元のオブジェクトに影響させたくない場合、オブジェクトを複製し、複製したオブジェクトに対して操作する必要がありました。

Luxon はイミュータブルなオブジェクトのため、日付の加算などを行っても、元のオブジェクトが変更されることはありません。 

注意点:ブラウザによっては利用できない機能がある

Luxon は主要ブラウザのメジャーバージョンの2世代前までを公式にサポートしています。
ブラウザの種類やバージョンによっては、一部の機能を利用できません。詳細は Official support を参照してください。

また、ES6+ をサポートしていない Internet Explorer 11 で利用する場合、Polyfill の適用が必要です。
詳しくはこちらを参照してください。

kintone カスタマイズでの導入方法

次の URL を kintone の「JavaScript / CSSでカスタマイズ」画面で指定し、その後にカスタマイズファイルを指定します。

  • https://js.cybozu.com/luxon/1.24.1/luxon.min.js

上記 URL は、2020年6月11日時点での Cybozu CDN で配信されている最新バージョンの URL です。
Luxon を導入する際は、Cybozu CDN のページで配信されているバージョンを確認し、必要に応じて変更してください。

Internet Explorer 11 で利用する場合、Polyfill を適用してください。詳しくはこちらを参照してください。

customize.png

Luxon の使い方

基本編

CDN を読み込むと、グローバルオブジェクトとして luxon が追加されています。
これを使って、Luxon オブジェクトを生成してみましょう。

色々な書式の文字列を取得してみましょう。その他の書式については、Luxon - Formatting をご参考ください。

x 日後や月初などの日付を操作してみましょう。その他の操作については、Luxon - Math をご参考ください。

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

cybozu developer network で紹介されている Tips で行っている日付計算を、Luxon を使って実装してみましょう。

年齢や経過年数を計算する

経過年数を表示する Tips では、生年月日フィールドから年齢の計算や、入社年月日フィールドから入社してからの経過年月を計算しています。
これらの計算を Luxon を使って行ってみましょう。

カスタマイズを適用するアプリには、以下のフィールドがあるものとします。

フィールド名 フィールドの種類 フィールドコード
生年月日 日付  BirthDay 
入社年月日 日付 JoiningDay

サンプルコードでは、アプリのレコードの詳細画面を開いたときに、年齢や入社してからの経過年月を開発者ツールのコンソールに表示します。

期限を過ぎているかを計算する

ログインユーザーが担当しているレコードに背景色をつける Tips では、期限フィールドの値を使って、「期限が過ぎているか」や「期限の x 日前を過ぎているか」を計算しています。
これらの計算を Luxon を使って行ってみましょう。

カスタマイズを適用するアプリには、以下のフィールドがあるものとします。

フィールド名 フィールドの種類 フィールドコード
期限 日付  LimitDay

サンプルコードでは、アプリのレコード一覧画面を開いたとき、それぞれのレコードが期限を過ぎていた場合や期限の5日前を過ぎていた場合に、開発者ツールのコンソールに表示します。

おわりに

Luxon や Moment.js といった日付処理ライブラリを使うと、JavaScript の Date 型では面倒な日付処理を楽に扱うことができます。
cybozu developer network には、Moment.js を使って日付処理をする Tips もあります。kintone カスタマイズで日付処理をしたいときには、ぜひこちらもご参考ください。
また Moment.js から Luxon に移行する際には、公式の Moment.js との違いをご参考ください。 

 

このTipsは、2020年5月版 kintone で確認したものになります。

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

サインインしてコメントを残してください。