読者です 読者をやめる 読者になる 読者になる

CRUD Lab. Tech Blog

ギークス株式会社の沖縄開発拠点CRUDLab. (クラッドラボ)のIT技術(テック)ブログ。kintoneやAngularJSによる開発を行っています。

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

0. 目次

1. 概要

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

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

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

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

2. イメージ図

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

例)登録データの一例

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

貸し出し期間:2016-04-23(開始)〜2016-05-05(終了)

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

  1. 貸し出しの本(すべて)の一覧画面
  2. 本貸し出し期間(検索用)で次のキーワードを含む検索で「2016年06月」を入力
  3. 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;
    });
})();

5. 注意点

▼ 検索時の注意点

今回のjsカスタマイズでは「YYYY年MM月」で日付登録する設定ですので、 条件絞り込みの際には「2016年06月」のように月には「0」を入れて検索してください。

6. TIPS

▼ 日付の条件絞り込みの現状

f:id:crud_lab_editor:20160401162752p:plain

このように、日付のフィールドでは「今日」「今月」「先月」「今年」の絞り込みはできますが、開始〜終了の期間の場合は今回のカスタムが便利です!

▼ グループにアクセス制限

また、アプリの設定でフィールドのアクセス権を以下のように制限することで、 f:id:crud_lab_editor:20160401180948p:plain

「KUNISADA」以外のユーザーにグループ自体を非表示にすることができるので、 入力時の混乱を避ける意味でも、用途に合わせて設定してみるといいかもしれません。

f:id:crud_lab_editor:20160401180955p:plain

6. まとめ

開始日と終了日があるようなアプリで、月別絞り込みをしたい場合は、 このようにカスタムすることで、月別の集計データを取ることも可能です。 今回は図書貸し出しアプリを想定しましたが、契約関係のアプリなどで、契約期間の絞り込みをする場合などにも使えるので、やり方次第ではとても便利なカスタマイズです!