kintoneのフィールドコードやフィールド名を書き換えるカスタマイズ

今回はkintone REST API Clientを使ってフィールドコードやフィールド名を書き換えるアプリを作ります。
前置きが長くなってしまったので、早く作りたいよという方は[アプリの準備](#アプリの準備)にジャンプしてください。

# 前置き

皆さんは、kintoneアプリストアのサンプルアプリを使ったことがありますか？
サンプルデータも含まれていたりして、何かとkintoneのいろはを勉強するのにも便利ですよね！

しかし私はそんなサンプルアプリで1点、どうしても受け入れられない点がありました。

それは・・・

フィールド名とフィールドコードが違う！！！問題。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/5519c184-32c7-d02b-2a7a-32ed1d0af559.png)


こちらのフィールドコード表示ブックマークレットを使用すると・・・

https://potara.net/2020/12/02/1384/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/552bc9b1-1df9-0aec-5547-e335b4b79861.png)

カオスです。
ただこのフィールドコードをなんとかしたい。それだけのためにフィールドコードを何とかするアプリを作りました。


しかし実は、プロジェクト・アスノートさんがステキなアプリテンプレートを配布しているので、
フィールドコードをとにかく変えたいとかほかの便利機能を使いたいな～という方は↓こちらへ

https://pj.asunote.jp/ktools_download/


自分で作ってみたいという方は続きをどうぞ読んで試してみてね。

# 完成図

ボタンを3種類設置します。
アプリIDフィールドに対象のアプリIDを入力し、
フィールド取得ボタンをクリックしてフィールド取得、
フィールドコードをフィールド名で上書きして、更新ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/fd4e05da-c3bb-f580-20b7-e6821af30ae9.png)


# アプリの準備

フィールドは以下のように設置します。

| フィールド種類 | フィールドコード | 備考 |
|:-:|:-:|:-:|
| 文字列(1行)  | アプリID  |   |
| スペース  |  spBtn | 各種ボタンを置くところ  |
|テーブル   | テーブル  |   |
|文字列(1行)   |フィールドキー  |テーブル内フィールド   |
|文字列(1行)   |フィールド種類   |テーブル内フィールド   |
|文字列(1行)   |フィールド名   |テーブル内フィールド   |
|文字列(1行)   |フィールドコード   |テーブル内フィールド   |

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/c71217ec-ef42-e750-45ee-23f26375ac89.png)

# JavaScript

kintone REST API Client のCDNを`JavaScript / CSSでカスタマイズ`に登録しておきます。

https://github.com/kintone/js-sdk/tree/master/packages/rest-api-client

`https://unpkg.com/@kintone/rest-api-client@latest/umd/KintoneRestAPIClient.min.js`

## ボタン設置

```js
// スペースフィールドにボタン設置
const sp = kintone.app.record.getSpaceElement("spBtn");

// フィールド取得ボタン
const btn_fields = document.createElement("button");
btn_fields.textContent = "フィールド取得";
sp.appendChild(btn_fields);

// 上書きボタン
const btn_label2code = document.createElement("button");
btn_label2code.textContent = "フィールドコードをフィールド名で上書きする";
sp.appendChild(btn_label2code);

// 更新ボタン
const btn_update = document.createElement("button");
btn_update.textContent = "フィールド更新";
sp.appendChild(btn_update);
```

## フィールド取得ボタンクリック

```js
// フィールド取得ボタンクリック
btn_fields.addEventListener("click", async () => {
  const appId = kintone.app.record.get().record.アプリID.value;
  const client = new KintoneRestAPIClient();
  const fields = await client.app.getFormFields({
    app: appId,
  });
  const obj = kintone.app.record.get();
  let tblValue = [];

  Object.keys(fields.properties).forEach((f) => {
    tblValue.push({
      id: null,
      value: {
        フィールドキー: {
          type: "SINGLE_LINE_TEXT",
          value: fields.properties[f].code,
        },
        フィールド種類: {
          type: "SINGLE_LINE_TEXT",
          value: fields.properties[f].type,
        },
        フィールド名: {
          type: "SINGLE_LINE_TEXT",
          value: fields.properties[f].label,
        },
        フィールドコード: {
          type: "SINGLE_LINE_TEXT",
          value: fields.properties[f].code,
        },
      },
    });
  });
  obj.record.テーブル.value = tblValue;
  kintone.app.record.set(obj);
});
```

## フィールドコードをフィールド名で上書きするボタンクリック

```js
// フィールドコードをフィールド名で上書きする
btn_label2code.addEventListener("click", async () => {
  const obj = kintone.app.record.get();
  obj.record.テーブル.value.forEach((r) => {
    r.value.フィールドコード.value = r.value.フィールド名.value;
  });
  kintone.app.record.set(obj);
});
```

## フィールド更新ボタンクリック

```js
// フィールド更新
btn_update.addEventListener("click", async () => {
  const appId = kintone.app.record.get().record.アプリID.value;
  const obj = kintone.app.record.get();
  const client = new KintoneRestAPIClient();
  const fields = await client.app.getFormFields({
    app: appId,
  });

  obj.record.テーブル.value.forEach((r) => {
    fields.properties[r.value.フィールドキー.value].label =
      r.value.フィールド名.value;
    fields.properties[r.value.フィールドキー.value].code =
      r.value.フィールドコード.value;
  });

  // フィールド更新
  const ret = await client.app.updateFormFields({
    app: appId,
    properties: fields.properties,
  });

  // テスト環境→運用
  await client.app.deployApp({
    apps: [{ app: appId, revision: ret.revision }],
  });
});
```

# まとめ
これでサンプルアプリのフィールドに悩まされることも少なくなる！？かも知れません。
フィールドコードに使えない文字もあるのでそこは運用で回避してくださいね。
サブテーブル内のフィールドコードには対応していないのですが、やってみたい方はぜひ挑戦してみてください。