kintoneでかんたんにMoment.jsを使ってみよう！

業務システムを作る上で欠かせないのが日付処理。
[Moment.js](http://momentjs.com/)という便利なライブラリがあるので、業務に使えそうな日付処理を中心にkintone（業務システムを使える、作れるということで相性いいのかなー）で表現してみました。kintoneで日付処理を行う場合には、[Cybozu CDN](https://cybozudev.zendesk.com/hc/ja/articles/202960194)にあるMoment.jsを使ってみましょう。
# 利用するLibrary
- [Cybozu CDN](https://cybozudev.zendesk.com/hc/ja/articles/202960194) のMoment.jsを利用
- Moment.jsのバージョン：2.15.2

# kintoneの準備
今回は開発目的なので[cybozu developer network で無償の開発者ライセンス](https://cybozudev.zendesk.com/hc/ja/articles/200929540#step3)を取得。
開発したいけどkintoneの環境を持っていない！という方には便利です。

ログインしたら、kintoneアプリを作り、テーブルに表示してみましょう。

## kintoneのアプリ構成
| フィールド名| フィールドコード | フィールドタイプ |
|:-----------|:------------|:------------|
| 基準日（日時A）    |DatetimeA  | 日時        |
| 比較対象日（日時B）|DatetimeB  | 日時        |
| 説明          |Detail     | 文字列（1行）|
| 結果          |Result     | 文字列（1行）|
※説明、結果は「テーブル」形式

## 入力イメージ
![20161120-15-27_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/100494/59b26de8-13f1-1fc0-3ebd-a4ba3c8ff7b7.png)

## 登録後の画面
レコード作成時に入力した日時A、日時Bの値をもとにMoment.jsで処理した値が保存されるというものです。

![img20161121-135350no-00.png](https://qiita-image-store.s3.amazonaws.com/0/100494/5caa8474-4527-3295-1dbe-5f89bd461519.png)


# プログラム
次のプログラムを、UTF-8でJSファイルとして保存して、kintoneにロードしましょう。

 - [JavaScriptファイルの読み込み手順](https://help.cybozu.com/ja/k/user/js_customize.html) 
 - [Cybozu CDN](https://cybozudev.zendesk.com/hc/ja/articles/202960194)にあるMoment.jsのリンクも忘れずに

## 読み込んだ後の画面です。
![img20161121-135935no-00.png](https://qiita-image-store.s3.amazonaws.com/0/100494/267eb2db-41d4-c85d-4ebe-8bc1f5268cfa.png)

## JavaScript

```js:
(function() {
    "use strict";

    // Set local and starting week
    moment.locale('ja', { week: { dow: 0, doy: 4 }});

    // Insert rowdata in need fieldtype ex.'SINGLE_LINE_TEXT'
    function createRow(detail, result) {
        return {
            'value': {
                'Detail': {
                    'type': 'SINGLE_LINE_TEXT',
                    'value': detail
                },
                'Result': {
                    'type': 'SINGLE_LINE_TEXT',
                    'value': result
                }
            }
        };
    }

    var eventDatetime = function(event) {
        var record = event.record;
        var dateA = record['DatetimeA'].value;
        var dateB = record['DatetimeB'].value;
        var arrRow = [];

        // Initialize table data
        record['Table']['value'].length = 0;

        // Basedatetime
        arrRow.push(createRow("基準日（日時A）の処理", "-----"));
        arrRow.push(createRow("日時Aの日付のみ(-)", moment(dateA).format('YYYY-MM-DD')));
        arrRow.push(createRow("日時Aの日付のみ(/)", moment(dateA).format('YYYY/MM/DD')));
        arrRow.push(createRow("日時Aの日付のみ(年月日)", moment(dateA).format('YYYY年M月D日')));
        arrRow.push(createRow("日時Aの日付のみ(年月日+曜日)", moment(dateA).format('YYYY年M月D日 (ddd)')));
        arrRow.push(createRow("日時Aの日時(kintone仕様1)", moment(dateA).format('YYYY-MM-DDTHH:mm:ss±HH:mm')));
        arrRow.push(createRow("日時Aの日時(kintone仕様2)", moment(dateA).format('YYYY-MM-DDTHH:mm:ssZ')));
        arrRow.push(createRow("日時Aの時間のみ（24時間表記）", moment(dateA).format('HH:mm')));
        arrRow.push(createRow("日時Aの時間のみ（12時間表記）", moment(dateA).format('h:mm')));
        arrRow.push(createRow("日時Aの時間のみ（AM/PM表記）", moment(dateA).lang("en").format('ah:mm')));
        arrRow.push(createRow("日時Aの時間のみ（午前/午後表記）", moment(dateA).format('ah:mm')));
        arrRow.push(createRow("日時Aの曜日（全て）", moment(dateA).format('dddd')));
        arrRow.push(createRow("日時Aの曜日（略）", moment(dateA).format('ddd')));
        arrRow.push(createRow("日時Aの年（全て）", moment(dateA).format('YYYY')));
        arrRow.push(createRow("日時Aの年", moment(dateA).format('YY')));
        arrRow.push(createRow("日時Aの月", moment(dateA).format('M')));
        arrRow.push(createRow("日時Aの日", moment(dateA).format('D')));
        arrRow.push(createRow("日時Aの5日前", moment(dateA).add(-5, 'day').format('YYYY/MM/DD')));
        arrRow.push(createRow("日時Aの10日後", moment(dateA).add(10, 'day').format('YYYY/MM/DD')));
        arrRow.push(createRow("日時Aの月の日数", moment(dateA).daysInMonth()));
        arrRow.push(createRow("日時Aがうるう年かどうか", moment(dateA).isLeapYear()));

        arrRow.push(createRow("日時Aの末日", moment(dateA).subtract(1, 'month').endOf('month').format('YYYY/MM/DD')));
        arrRow.push(createRow("日時Aの末日", moment(dateA).subtract(0, 'month').endOf('month').format('YYYY/MM/DD')));
        arrRow.push(createRow("日時Aの翌月１日", moment(dateA).subtract(-1, 'month').startOf('month').format('YYYY/MM/DD')));
        arrRow.push(createRow("日時Aの翌月末日", moment(dateA).subtract(-1, 'month').endOf('month').format('YYYY/MM/DD')));
        arrRow.push(createRow("日時Aの１週間の開始日", moment(dateA).startOf('week').format('YYYY/MM/DD (ddd)')));
        arrRow.push(createRow("日時Aの１週間の終了日", moment(dateA).endOf('week').format('YYYY/MM/DD (ddd)')));
        arrRow.push(createRow("日時Aの月曜日の日付", moment(dateA).day('Monday').format('YYYY/MM/DD')));
        arrRow.push(createRow("日時Aの金曜日の日付", moment(dateA).day('Friday').format('YYYY/MM/DD')));
        arrRow.push(createRow("日時Aは1年の何日目", moment(dateA).format('DDD')));
        arrRow.push(createRow("日時Aは1年の何週目", moment(dateA).format('W')));
        arrRow.push(createRow("日時Aの月の日数", moment(dateA).daysInMonth()));
        arrRow.push(createRow("日時Aの年の日数", "関数なし"));

        arrRow.push(createRow("日時Aのアメリカ表記1", moment(dateA).lang("en").format("M/D/YYYY")));
        arrRow.push(createRow("日時Aのアメリカ表記2", moment(dateA).lang("en").format("MMMM D, YYYY")));
        arrRow.push(createRow("日時Aのアメリカ表記3", moment(dateA).lang("en").format("MMM D, YYYY")));
        arrRow.push(createRow("日時Aのアメリカ表記4", moment(dateA).lang("en").format("MM Do, YYYY")));
        arrRow.push(createRow("日時Aのアメリカ表記5", moment(dateA).lang("en").format("MM/DD/YY")));
        arrRow.push(createRow("日時Aの曜日（英語）", moment(dateA).lang("en").format('dddd')));
        arrRow.push(createRow("日時Aの曜日（英語略）", moment(dateA).lang("en").format('ddd')));
        arrRow.push(createRow("日時Aの曜日（フランス語）", moment(dateA).lang("fr").format('dddd')));
        arrRow.push(createRow("日時Aの曜日（フランス語略）", moment(dateA).lang("fr").format('ddd')));
        arrRow.push(createRow("日時Aの曜日（中国語）", moment(dateA).lang("zh-cn").format('dddd')));
        arrRow.push(createRow("日時Aの曜日（中国語略）", moment(dateA).lang("zh-cn").format('ddd')));

        // Compare datetime
        arrRow.push(createRow("基準日との比較", "-----"));
        arrRow.push(createRow("基準日との比較（日数）", moment(dateB).diff(moment(dateA), 'days')));
        arrRow.push(createRow("基準日との比較（月数）", moment(dateB).diff(moment(dateA), 'months')));
        arrRow.push(createRow("基準日との比較（年数）", moment(dateB).diff(moment(dateA), 'years')));
        var month = moment(dateB).diff(moment(dateA), 'months') % 12;
        arrRow.push(createRow("基準日からの計算（年と月）", moment(dateB).diff(moment(dateA), 'years') + "年 " + month + "ヶ月"));
        arrRow.push(createRow("日時A < 日時B なのか", moment(dateA).isBefore(dateB)));
        arrRow.push(createRow("日時A = 日時B なのか", moment(dateA).isSame(dateB)));
        arrRow.push(createRow("日時A > 日時B なのか", moment(dateA).isAfter(dateB)));
        arrRow.push(createRow("今日は日時Aと日時Bにあるか", moment().isBetween(dateA, dateB)));

        arrRow.push(createRow("ほか", "-----"));
        arrRow.push(createRow("今日", moment().format('YYYY-MM-DD')));
        arrRow.push(createRow("ロケール", moment.locale()));
        arrRow.push(createRow("言語", moment.lang()));
        arrRow.push(createRow("UTC", moment(dateA).format('ZZ')));

        // Appned tabel element
        for (var i = 0; i < arrRow.length; i++) {
            record['Table']['value'].push(arrRow[i]);
        }
    };

    // Eventlist
    var ev = ['app.record.create.show',
        'app.record.edit.show',
        'app.record.edit.index.show',
        'app.record.create.change.DatetimeA',
        'app.record.create.change.DatetimeB',
        'app.record.edit.change.DatetimeA',
        'app.record.edit.change.DatetimeB'
        ];
    kintone.events.on(ev, function(event) {
        eventDatetime(event);
        return event;
    });

})();


```