カテゴリー内の他の記事

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

フォローする

(著者: KADOYA Ryo

こんにちは。門屋です。
今回は Cybozu CDN に掲載されているMoment.js を使用して、Twitter のように日時フィールドを「分前、日前」というような表示にする方法をご紹介します。JavaScriptでは標準で日時のフォーマットを扱う関数があまりありませんが、Moment.js を使うと柔軟に日時データを整形したり、日時データを使って計算したりすることができます。

Moment.js について

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

公式サイト

kintone で Moment.js を使ってみる

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

Cybozu CDN

2015年7月15日現在、最新のMoment.js のURLは以下です。
https://js.cybozu.com/momentjs/2.10.3/moment.min.js
https://js.cybozu.com/momentjs/2.10.3/moment-with-locales.min.js

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

Moment.js の使い方

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

レコード一覧画面のカスタマイズ

では実際に、レコード一覧画面をカスタマイズしてみます。
カスタマイズのJavaScriptコードは以下のようになります。

動作確認

カスタマイズを実行すると、更新日時フィールドが、「何分前」「何時間前」というように表示されているのが分かります。

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

Moment Timezone

デモ環境

https://dev-demo.cybozu.com/k/36/

※デモ環境についての説明はこちら

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

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
nakayama

カスタマイズのJavaScriptコードを以下のように変更してアップしたところ、フィールドの中央ではなく、左上に文字が偏ってしましました。
直し方がわかる方はいますか。
(function () {
"use strict";
// ロケールを初期化
moment.locale('ja');

kintone.events.on('app.record.index.show', function(e) {
// レコード一覧画面表示イベント
var elements = kintone.app.getFieldElements('日付_0');
for (var i = 0; i < e.records.length; i++) {
var date = e.records[i]['日付_0'].value;
elements[i].innerText = moment().format('MM/DD dddd');

}
});
})();

Avatar
藤原

nakayama様

私もそこ、気になっていましたので、
elements[i].innerText = moment(date).fromNow();
の下に、
elements[i].style.verticalAlign = 'middle';
を足して、直しました。

ご参考になりましたら幸いです。

Avatar
Suguru Inoue

ファイルの書き出し時には適用されませんが適用する方法はあるのでしょうか?

Avatar
cybozu Development team

Suguru Inoueさん

ご質問いただきありがとうございます。cybozu developer network運営事務局です。

ご要望にお応えできず申し訳ないのですが、現状kintoneのカスタマイズを適用できる範囲として、ファイル書き出しは含まれておりません。

自作のCSV書き出しプログラムを作成していただくか、書き出した後Excel側でフォーマットを書き換えていただくことになります。
自作のプログラム作成時には、以下の記事も参考にしていただければと思います。
 
▼集計したデータをCSVでダウンロードするには?
 
▼関連レコードのデータをCSV出力する方法
 
よろしくお願いします。
ログインしてコメントを残してください。
Powered by Zendesk