ExcelやCSVからkintoneアプリを作成した際のフィールドコード

あけましておめでとうございます。
うえるです。

前回の投稿からしばらく時間が空いてしまいましたが、
第3弾です！！

今回は備忘録的な投稿になります。
Excelからkintoneアプリを作った際、実際困ったことを解決できたので、
メモ代わりに投稿します。

#背景
kintoneアプリ作成方法の1つに「Excelを読み込んで作成」って機能ありますよね？
この機能を使った際に困った事が起きてしまいました＞＜
もうタイトル通りです。

#アプリ作成
①アプリ作成画面から「Excelを読み込んで作成」
![image.png](https://qiita-image-store.s3.amazonaws.com/0/212899/be261ce8-a9aa-4ffe-5727-46a9fedf8087.png)

②「作成を開始する」
![image.png](https://qiita-image-store.s3.amazonaws.com/0/212899/356188cd-6dc2-f762-c9e9-ae7f960a8ce7.png)

③すべてにチェックを入れ「アップロードへ進む」
![image.png](https://qiita-image-store.s3.amazonaws.com/0/212899/c114ed25-4a90-07e6-caa6-f2388b63156a.png)

④フィールドタイプを変更したりします。
　※投稿用に簡単なExcelファイルを用意しました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/212899/3d0d092f-8922-0544-3ebc-8db7cf232002.png)



⑤作成だ！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/212899/1c050a82-47ff-94e5-034d-efc33f3dd85d.png)
完成した！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/212899/71412a03-6fe0-9a0b-d17f-9133fef87754.png)
ここまでは何事も無く作成できましたが...


#問題発生!
作成したフィールドコードを見てみると、
![image.png](https://qiita-image-store.s3.amazonaws.com/0/212899/748dd045-46f8-8ab6-9cc1-aac2c7977fa8.png)
これはいけない...
後々JavaScriptなどでカスタマイズする際に苦労しそうですね(´；ω；｀)
例で作成したアプリのフィールドは5つでしたが、
これが数十、数百とフィールドがあった場合一つ一つ手で治すのはちょっと厳しいですよね？

#JavaScriptで自動フィールドコード登録
アプリIDなどの変数宣言

```JavaScript
const APP_ID = kintone.app.getId();
const LABEL_BUTTON = "Button";
if(document.getElementById(LABEL_BUTTON)) return;
const myButton = document.createElement("button");
myButton.id = LABEL_BUTTON;
myButton.innerHTML = "フィールドコード設定";
let body = {};
let obj = {};
```

ボタンをクリックしたときの動作
フィールドコードで使用できない文字は無理やり「_」にリプレイスさせてます。

```JavaScript
myButton.onclick = function() {
    return new kintone.Promise(function(resolve, reject){
       return kintone.api(kintone.api.url("/k/v1/form", true), "GET", {app: APP_ID}, function(resp){
           console.log(resp);
           let pro = resp.properties;
           let Len = pro.length;
           for (let i=0; i<Len; i++){
               let C = pro[i].code;
               pro[i].code = pro[i].label;
               pro[i].code = pro[i].code.replace( /[\/]/g, '_' );
               pro[i].code = pro[i].code.replace( /[(]/g, '_' );
               pro[i].code = pro[i].code.replace( /[)]/g, '_' );
               pro[i].code = pro[i].code.replace( /[／]/g, '_' );
               pro[i].code = pro[i].code.replace( /[（]/g, '_' );
               pro[i].code = pro[i].code.replace( /[）]/g, '_' );
               pro[i].code = pro[i].code.replace( /[　]/g, '_' );
               obj[C] = {"code":pro[i].code,"type":pro[i].type};
               console.log(obj);
            }
           let bodyUpdate = {
            "app": APP_ID,
            "properties": 
                    obj
            };
            console.log(bodyUpdate);
            resolve(bodyUpdate);
       }, function(error) {
           console.log(error);
       });
    }).then(function(resp){
        return kintone.api(kintone.api.url('/k/v1/preview/app/form/fields',true), 'PUT', resp, function(resp){
           console.log(resp,"OK");
        }, function(error) {
            console.log(error,"NG");
        });
    });
};

```

#結果
![Field.gif](https://qiita-image-store.s3.amazonaws.com/0/212899/b66b76e7-7b8a-a056-b826-a1a0ec756d17.gif)