7
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2016-11-21

業務システムを作る上で欠かせないのが日付処理。
Moment.jsという便利なライブラリがあるので、業務に使えそうな日付処理を中心にkintone(業務システムを使える、作れるということで相性いいのかなー)で表現してみました。kintoneで日付処理を行う場合には、Cybozu CDNにあるMoment.jsを使ってみましょう。

利用するLibrary

  • Cybozu CDN のMoment.jsを利用
  • Moment.jsのバージョン:2.15.2

kintoneの準備

今回は開発目的なのでcybozu developer network で無償の開発者ライセンスを取得。
開発したいけどkintoneの環境を持っていない!という方には便利です。

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

kintoneのアプリ構成

フィールド名 フィールドコード フィールドタイプ
基準日(日時A) DatetimeA 日時
比較対象日(日時B) DatetimeB 日時
説明 Detail 文字列(1行)
結果 Result 文字列(1行)
※説明、結果は「テーブル」形式

入力イメージ

20161120-15-27_No-00.png

登録後の画面

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

img20161121-135350no-00.png

プログラム

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

読み込んだ後の画面です。

img20161121-135935no-00.png

JavaScript

(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の翌月1日", 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の1週間の開始日", moment(dateA).startOf('week').format('YYYY/MM/DD (ddd)')));
        arrRow.push(createRow("日時Aの1週間の終了日", 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;
    });

})();


7
8
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?