Kintone ステータス変更時に日時を記録する

📝Kintoneでステータス変更時に日時を自動登録したくカスタマイズしてみました
💻PC版です

## やりたいこと
発送状況（ステータス）を
「発送前」→「発送済」
に変更した際に日時を記録したい
<img width="200" alt="image1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373778/76a822f2-91cd-a623-299b-0dfa7544d5ea.png">



## 手順
1. フィールドの準備（今回は文字列１行）
1. KintoneのAPIトークンを取得
1. moment.jsを取得
1. JavaScriptファイルの作成
1. moment.jsと作成したjsファイルをKintoneアプリに設置
1. Kintoneアプリの更新

## 1. フィールドの準備

発送状況の横に文字列（１行）を追加
フィールド名：発送日
フィールドコード：発送日_自動
<img width="400" alt="image2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373778/bd6fb65e-2947-c022-c5a3-a89c33eb0ca0.png">
<img width="300" alt="image3" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373778/bca90b04-456f-0706-9d06-bded50472716.png">


## 2. KintoneのAPIトークンを取得
APIトークンをクリック
<img width="500" alt="image4" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373778/9a45f96a-dcf2-efda-ad68-35a74631b782.png">
生成するをクリック
<img width="500" alt="image5" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373778/76cfc601-9b06-34b7-54e9-e6295212fac5.png">
「レコード閲覧」と「レコード編集」にチェックを入れて「保存」ボタンを押す。
<img width="300" alt="image6" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373778/67e46fa7-6a27-d0e0-2756-a8ffb0c3bb2a.png">

## 3. moment.jsの取得
[cdnjs](https://cdnjs.com/libraries/moment.js)で最新版を取得
※今回はURLを使う
```
https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js
```
## 4. JavaScriptファイルの作成

update_columns.jsの名前でファイルを作成

```update_columns.js
(function () {
    "use strict";
     
        kintone.events.on(["app.record.detail.show"],function(event){
          
        var record = event.record; 
        //発送状況のステータスを取得
        var nStatus = record.発送状況.value;

        switch(nStatus){
            //発送状況ステータスが「発送済」か確認
            case "発送済":
                //発送日フィールドが空欄の時、日時を記録する
                if (record['発送日']['value'] === ""){
    
                    var url = 'https://[サブドメイン].cybozu.com/k/[アプリ番号]/record.json';
    
                    var headers = {
                        //2で取得したAPIトークンをコピペする
                        'X-Cybozu-API-Token':'xxxxxAPIトークンxxxxx',
                        'Content-Type': 'application/json'
                    };
    
                    var param = {
                        "app" : kintone.app.getId(),
                        "id"  : kintone.app.record.getId(),
                        "record": {
                            //発送日フィールドに年月日を記録
                            "発送日": {
                                "value": moment().format("YYYY-MM-DD")
                            }
                        }
                    };
    
                    kintone.proxy(url, 'PUT', headers, param, function(body, status, headers) {
                        console.log(JSON.parse(body));
                        location.reload();
                    }, function(error) { 
                        console.log(error); 
                    }
                );
            };
            break;
            }
        });
    })();
    
```
※発送日フィールドが空欄でない場合は自動登録されない
## 5. moment.jsと作成したjsファイルをKintoneアプリに設置
JavaScript/CSSでカスタマイズを選択
<img width="500" alt="image6" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373778/ec97e1ea-e4a1-bc0f-2d21-309bde3f5df8.png">

PC用のJavaScript / CSSファイルのJavaScriptファイル
【moment.js】
→ URL指定で追加
→ moment.jsのURLをコピペしてくる
→ 保存
<img width="400" alt="image7" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373778/10060d7d-e22b-2fd0-8450-546415364bb1.png">

【update_columns.js】
→ アップロードして追加
→ ファイルを選択して開く
→ 保存
<img width="400" alt="image7" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373778/c83a5614-68a7-eee1-1391-9ebc601db188.png">


## 6. Kintoneアプリの更新
アプリを更新して、テストレコードで実際に日時が記録されるかテスト

レコードの発送状況フィールドを「発送済」に変更して保存すると、発送日フィールドに日時が記録された！
<img width="300" alt="image7" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373778/fc3dbbc4-b0ec-7fea-b6f6-faf5d0219310.png">



## 参考
こちらの記事のおかげで、日時記録が自動でできるようになりました。
[kintoneでステータス変更時にカラムを更新するjavascript](https://qiita.com/itty-star/items/1b9ce9b95fd73fcd275e)
[Moment.jsのサイト](https://momentjs.com/)
[Kintoneヘルプ：APIトークン生成方法](https://jp.cybozu.help/k/ja/user/app_settings/api_token.html)