はじめに

こんにちは！
サッカー選手から転身して、kintoneカスタマイズを楽しんでいるよしきです！

今回は、kintoneで1ヶ月分の交通費精算の申請を簡単に入力するためのJavaScriptカスタマイズを紹介します！

こんな人に読んでほしい！

テーブルを使ったアプリを構築している人
kintoneカスタマイズ初心者
交通費精算をサクッと行いたい人

kintoneとは

業務のシステム化や効率化を実現するアプリを「シュシュッと」つくれるノーコードツールです！

kintoneの詳しい情報はこちら

困りごと

交通費精算申請アプリを利用し、交通機関を利用した日付ごとに明細をテーブルで管理しています。

ほぼ毎日通勤している僕は、1ヶ月分の明細(行)をポチポチ追加し「日付」をすべて入力するのがめちゃめちゃ面倒に感じています。31日分の行を追加するのは苦痛…

実現したいこと

「利用年月」を入力したら自動で1ヶ月の日数分の行がセットされ、利用した日付の行のみ内容を手動入力していきたい。

そのために必要な機能が以下の2つ！

「利用年月(日付)」の1日固定機能
「利用年月」の月の日数分の「交通費一覧(テーブル)」の行を追加する機能

課題

標準機能だと、このような実装はできません…

また、プラグインを利用してもこのような機能を実現できるプラグインはなさそう…

そこで今回はJavascriptカスタマイズを行い実現させます！！

解説

標準機能の実装

1.「利用年月（日付）」を配置し、初期値を現在日付にする設定を行う。

2.「交通費一覧（テーブル）」を配置しその中に「日付（日付）」を配置。

カスタマイズの実装

処理の流れはこんな感じです。

①「利用年月」の1日固定機能

「利用年月」の値を取得
Luxonを利用しその月の初日を取得する

②「利用年月」の月の日数分の「交通費一覧(テーブル)」の行を追加する機能

「利用年月」の値を取得
Luxonを利用しその月の初日と末日を取得
初日から末日までループし1ヶ月分の行を作成する
テーブルへセットする

サンプルコード

(() => {
    'use strict';

    // レコード追加画面表示時
    kintone.events.on('app.record.create.show', (event) => {
        // 1日固定機能
        setFirstDayOfMonth(event);
        return event;
    });

    // レコード追加/編集画面 値変更時
    kintone.events.on([
        'app.record.create.change.利用年月',
        'app.record.edit.change.利用年月',
    ], (event) => {
        // 1日固定機能
        setFirstDayOfMonth(event);
        // 1ヶ月分の行追加機能
        setTheDateForOneMonth(event);
        return event;
    });
})();

/**
 * 「利用年月」の月の1日をセットする
 * @param event kintoneイベント
 */
const setFirstDayOfMonth = (event) => {
    const dayOfMonth = event.record["利用年月"].value;
    if (dayOfMonth !== "") {
        event.record["利用年月"].value = luxon.DateTime.fromFormat(
            dayOfMonth,
            "yyyy-MM-dd"
        )
            .startOf("month")
            .toFormat("yyyy-MM-dd");
    }
}

/**
 * 1ヶ月間の日付をテーブルへセットする
 * @param event kintoneイベント
 */
const setTheDateForOneMonth = (event) => {
    const record = event.record;

    if (record["利用年月"].value === "") return;

    const usageYearMonth = luxon.DateTime.fromFormat(
        record["利用年月"].value,
        "yyyy-MM-dd"
    );

    const startOfMonth = usageYearMonth.startOf("month");
    const endOfMonth = usageYearMonth.endOf("month");

    // 結果を格納する配列
    const allDates = [];

    // 月初から月末までの日付をループで取得
    for (
        let current = startOfMonth;
        current <= endOfMonth;
        current = current.plus({ days: 1 })
    ) {
        const row = JSON.parse(
            JSON.stringify(defaultValueRowTableRefund)
        );
        row.value["日付"].value = current.toFormat("yyyy-MM-dd");
        allDates.push(row);
    }
    record["交通費一覧"].value = allDates;
}

// 交通費一覧テーブルの行の初期値
const defaultValueRowTableRefund = {
    id: null,
    value: {
        日付: {
            type: "DATE",
            value: ""
        },
        手段: {
            type: "DROP_DOWN",
            value: ""
        },
        内容: {
            type: "SINGLE_LINE_TEXT",
            value: ""
        },
        金額: {
            type: "NUMBER",
            value: "0"
        }
    }
};

まとめ

いかがだったでしょうか！？

これにより交通費精算アプリの入力効率が大幅に向上するのではないでしょうか！

JavaScriptのカスタマイズを行うことにより標準機能の制約を超えて自分たちの使い方に合わせることができるのは本当に嬉しいですね。

これを参考に、自分たちの業務課題を解決していきましょう。
また、どんどんカスタマイズに挑戦して、自分だけのkintoneアプリを作り上げてみてください！