kintone アプリで、日付を入力して、別フィールドに値を自動入力させてみた

# ０．はじめに

kintone アプリで、

日付を入力したら自動で別フィールドに値を入力する様にしたいな、

と思い、やってみました。

# １．JavaScript ファイルをアップロードする
1. まず、アプリの設定画面を開き、「設定」タブの「JavaScript / CSSでカスタマイズ」リンクをクリックします。
<br><br>
    * ![0001.png](https://qiita-image-store.s3.amazonaws.com/0/161939/f1db54f8-76ad-f76c-1945-e15376c3d11b.png)
　
1. 「JavaScript / CSSでカスタマイズ」画面が開くので、「PC用のJavaScriptファイル」の「アップロードして追加」ボタンを押下し、以下の JavaScript ファイルをアップロードします。
<br>
    * ![0002.png](https://qiita-image-store.s3.amazonaws.com/0/161939/d945cac3-1a42-468e-31a0-37f9ad2c946a.png)

    ```javascript:diffYYYYMM.js
/*
 * 指定年月からの経過年月算出プログラム
 */
(function () {
    // レコード追加、編集前、変更で処理を実行する
    var events = ['app.record.create.show','app.record.edit.show','app.record.index.edit.show',
                   'app.record.edit.change.計上月','app.record.create.change.計上月','app.record.index.edit.change.計上月'];
    kintone.events.on(events, function(event) {
        var record = event.record;
        // 基準月
        var baseYYYY = 2005;
        var baseMM = 7;
        console.log("baseYYYY: " + baseYYYY);
        console.log("baseMM: " + baseMM);
        // 計上月
        var tgtYYYYMMDD = record['計上月']['value'];
        console.log("tgtYYYYMMDD: " + tgtYYYYMMDD);
        var tgtYYYY = Number(tgtYYYYMMDD.substr(0,4));
        var tgtMM = Number(tgtYYYYMMDD.substr(5,2));
        console.log("tgtYYYY: " + tgtYYYY);
        console.log("tgtMM: " + tgtMM);
        // 月差分
        var difMM = tgtMM - baseMM
        if (difMM < 0) {
            difMM += 12;
            tgtYYYY -= 1;
        }
        // 年差分
        var difYYYY = tgtYYYY - baseYYYY;
        console.log("difMM: " + difMM);
        console.log("difYYYY: " + difYYYY);
        // 年
        if (difYYYY > 0) {
            record['期']['value'] = difYYYY + 1
        } else {
            record['期']['value'] = 0
        }
        // 月
        record['月']['value'] = tgtMM
        
        return event;
    });
})();
    ```

# ２．アプリのフォームにフィールドを設定する
1. 「フォーム」タブを選択します。
<br><br>
    * ![0003.png](https://qiita-image-store.s3.amazonaws.com/0/161939/bce23b9f-8f1b-8676-aa39-6f7c9fab4a5f.png)
<br><br>
1. 所定のフィールドを追加します。
<br><br>
    * ![0004.png](https://qiita-image-store.s3.amazonaws.com/0/161939/c1c1508c-a785-0ba6-0824-86d9e7ae0d65.png)
<br><br>
    * ![0005.png](https://qiita-image-store.s3.amazonaws.com/0/161939/da4d4d2f-9217-2ae2-1eca-36a5a7311c2f.png)
　
1. 入力する日付フィールドを設定します。
　
ここでは、「計上月」という名称を使っています。
フィールドコードの値を「計上月」と設定して下さい。
　
JavaScript ファイルの以下の部分と関係しているので、「計上月」という名称を変更したい場合は、そちらも合わせて変更しておいて下さい。

    ```javascript
// レコード追加、編集前、変更で処理を実行する
var events = ['app.record.create.show','app.record.edit.show','app.record.index.edit.show',
               'app.record.edit.change.計上月','app.record.create.change.計上月','app.record.index.edit.change.計上月'];
    ```

    ```javascript
    // 計上月
    var tgtYYYYMMDD = record['計上月']['value'];
    ```
<br>
1. 自動出力する数値フィールドを設定します。
　
ここでは、「期」「月」という名称を使っています。
フィールドコードの値を「期」「月」と設定して下さい。
　
JavaScript ファイルの以下の部分と関係しているので、「期」「月」という名称を変更したい場合は、そちらも合わせて変更しておいて下さい。不要な場合は、削除して下さい。
<br>
    * 「期」

    ```javascript
    // 年
    if (difYYYY > 0) {
        record['期']['value'] = difYYYY + 1
    } else {
        record['期']['value'] = 0
    }
    ```
　
    * 「月」

    ```javascript
    // 月
    record['月']['value'] = tgtMM
    ```

# ９９．ハマりポイント

* とりあえず、初めてだったので以下のサイトを参考にしながら、一行ずつコーディングしていきました。イベントを拾って値の取得・設定が出来れば、あとは JavaScript の問題なのでそれほど時間も掛からずに出来たかと。
    * [第0回 kintone カスタマイズをはじめる前に知っておきたい6つのこと – cybozu developer network](https://developer.cybozu.io/hc/ja/articles/211029283)
    * [経過年数を表示する – cybozu developer network](https://developer.cybozu.io/hc/ja/articles/202640900)

# ＸＸ．まとめ

kintone を使っていると、

意外にこういう細かい機能が欲しくなります。

参考になれば♪