【kintone】期間を指定して月別で条件絞り込み表示する方法

0. 目次

0. 目次
1. 概要
2. イメージ図
3. 準備
- 3-1 必要ファイルの読み込み
- 3-2 フィールド
4. 実装
5. 注意点
6. TIPS
6. まとめ

1. 概要

暑いですね、沖縄！ギークス株式会社CRUD Lab.のKUNISADAです。

期間を指定して月別で条件絞り込み表示する方法

アプリの種類によっては、期間（開始〜終了）を指定する場合も多いと思います。レコード数が多くなり、指定する期間が長くなればなるほど、月別で絞り込んで確認することができたらいいのに！という場合もあるかと思います。

今回は、図書貸し出しアプリを想定して、貸し出し開始日と終了日から貸し出し期間を取得し、特定の月別で条件絞り込み表示をしたいと思います。

2. イメージ図

▼ 図書貸し出しアプリ（借りた本と借りる期間を記録する）

例）登録データの一例

本タイトル：「沖縄移住するには」

貸し出し期間：2016-04-23（開始）〜2016-05-05（終了）

▼ イメージ図のフロー説明

貸し出しの本（すべて）の一覧画面
本貸し出し期間（検索用）で次のキーワードを含む検索で「2016年06月」を入力
2016年06月に貸し出された本の一覧を表示

f:id:crud_lab_editor:20160401163755g:plain

3. 準備

3-1 必要ファイルの読み込み

https://js.cybozu.com/momentjs/2.12.0/moment.min.js（参照：Cybozu CDN一覧）を利用。

f:id:crud_lab_editor:20160401165947p:plain

3-2 フィールド

f:id:crud_lab_editor:20160401171139p:plain

フィールド名	フィールドタイプ	フィールドコード	初期値	その他
本タイトル	複数選択	--	--	--
借りた人	ユーザー選択	--	※ここでは「KUNISADA」をテスト設定	--
貸し出し期間（開始）	日付	rental_start	--	--
貸し出し期間（終了）	日付	rental_end	--	--
本貸し出し期間（検索用）	文字列（1行）	rental_months	--	隠したい項目グループに内包

※本貸し出し期間（検索用）フィールドは、隠したい項目グループに入れて、ユーザーに入力させないように設定します。TIPSで後述。

※ 実装に必要なフィールドコードのみ記載しています。

4. 実装

(function () {
    'use strict';

    //期間計算の関数
    function list_all_months(params_start,params_end){

        var start = moment(params_start).startOf('month'),
        end = moment(params_end).startOf('month'),
        contract_ary   = [];

        start.subtract(1, 'months');

        while((start.diff(end) +1) <= 0){ 
            start.add(1, 'months');
            contract_ary.push(start.format('YYYY年MM月'));
        }

        var contract_months_str = contract_ary.join(',');
        return contract_months_str;

    }

    //新規レコード追加画面表示のイベントハンドラー
    kintone.events.on('app.record.create.show', function(event){
        var rec   = event.record;
        //本貸し出し期間（検索用）をdisabled処理で記入できないようにする
        rec['rental_months']['disabled'] = true;
        return event;
    });

    //新規レコード追加のイベントハンドラー
    kintone.events.on('app.record.create.submit', function(event){

        var rec   = event.record;

        /*-月別検索の処理-*/
        var rent_start  = rec['rental_start']['value'],
            rent_end    = rec['rental_end']['value'];

        return new kintone.Promise(function(resolve, reject) {
            //関数使用 
            rec['rental_months'].value = list_all_months(rent_start,rent_end);
            resolve(event);
        }, function(error){
            reject('データの取得に失敗しました。');
            return;
        });

        return event;
    });
})();