kintoneでフォームのフィールドコード一覧を表示させる（サブテーブル含む）

##はじめに
kintoneで、フォームに設定済みの全フィールドコードを確認したいケースがよくあるのですが、標準ではそういう一覧表示機能がありません。

JavaScriptを使えば簡単に表示できたので、載せておきます。

##シンプルな方法
最初に書いてたよりも簡単な方法がありました！
イベントハンドラなんか使わなくて良かったですねー。

kintoneの「レコード追加」or「レコード詳細」or「レコード編集」
いずれかの画面を表示した状態で、（レコード一覧の画面は不可）
ブラウザのDeveloper Console開いてこれをコピペ！

```js
Object.keys(kintone.app.record.get().record).join('\n')
```

これだとkintoneにJSをアップロードする必要がないので、
JSカスタマイズが使えないベーシックプランでも行けるんじゃないだろうか？
手元にベーシックプランの環境がないので試せないのだけどw
そもそもベーシックプラン使う人はフィールドコード一覧など必要ないかww

ちなみに、超シンプルにこう書くだけでも表示はできるんですが、
オブジェクトの形で他の情報も出るので、全行をコピペとか辛いんです。

```js
kintone.app.record.get().record
```

なので、一手間かけて複数行文字列に`join`してやるのがオススメ。

##【上級編】サブテーブル内のフィールドコードも全部表示
上記のように`join('\n')`して文字列化しちゃうと、
フォームに「サブテーブル」が存在した場合、サブテーブル内の情報が取れれないことに気づきました。

サブテーブルのオブジェクト構造はやたら複雑になってるので、
文字列化したい場合はけっこう複雑になります。これで取れました！
（コードの意味の解説は割愛。なるべく理解してから使ってね！）

```js
Object.entries(kintone.app.record.get().record)
.map(([fieldCode, field]) => {
  if (field.type === 'SUBTABLE') {
    return `${fieldCode}(SUBTABLE)\n${
      Object.keys(field.value[0].value)
      .map(innerFieldCode => `${fieldCode}.value[0].value.${innerFieldCode}`).join('\n')
    }`
  }
  return fieldCode
}).join('\n')
```
これもDeveloper Consoleにコピペで行けます！
「レコード詳細」画面では、サブテーブル内のレコードが0件の可能性があるので
「レコード追加」「レコード詳細」のどちらかで実行するのがオススメ。

例えばアプリストアの「旅費精算申請」にはサブテーブルが2つありますが、
上記コマンドを実行すると、こんな感じで出力されます。

```shell-session
"申請者
上長
No
旅費合計
経費合計
精算金額
備考
出発
帰着
地域
日当
行き先
目的
旅費(SUBTABLE)
旅費.value[0].value.旅費日付
旅費.value[0].value.手段
旅費.value[0].value.旅費摘要
旅費.value[0].value.旅費金額
旅費.value[0].value.旅費領収書
経費(SUBTABLE)
経費.value[0].value.経費日付
経費.value[0].value.科目
経費.value[0].value.支払先
経費.value[0].value.経費摘要
経費.value[0].value.経費金額
経費.value[0].value.経費領収書"
```

サブテーブル内のフィールドコードに辿り着くためのオブジェクト参照ルートを
全部表示してるのが気が利いてますね(笑)
（2行以上存在する場合も、indexは0番だけ表示します）

例えば、これで出力された`経費.value[0].value.経費日付`をコピーして
`kintone.app.record.get().record.`に続けて貼り付けることで、
こんな風に一発でそのフィールドの詳細情報にたどり着けます！

<img width="432" alt="スクリーンショット 2018-01-18 14.43.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/24333/2f3270af-996e-44c3-edab-31a19cef5319.png">
##【上級編】サブテーブルだけのフィールドコードを表示

需要があるか分かりませんが、サブテーブルだけを取るにはこちらのコマンド。

```js
Object.entries(kintone.app.record.get().record)
.filter(([fieldCode, field]) => field.type === 'SUBTABLE')
.map(([fieldCode, field]) => `
[subtable]
${fieldCode}
[inner fields]
${
  Object.keys(field.value[0].value)
  .map(code => `${fieldCode}.value[0].value.${code}`).join('\n')
}`).join('\n')
```

「旅費日付」アプリで実行すると、こうなります。

```shell-session
"
[subtable]
旅費
[inner fields]
旅費.value[0].value.旅費日付
旅費.value[0].value.手段
旅費.value[0].value.旅費摘要
旅費.value[0].value.旅費金額
旅費.value[0].value.旅費領収書

[subtable]
経費
[inner fields]
経費.value[0].value.経費日付
経費.value[0].value.科目
経費.value[0].value.支払先
経費.value[0].value.経費摘要
経費.value[0].value.経費金額
経費.value[0].value.経費領収書"
```

先頭が改行なのはご愛嬌w
テンプレート記法、インデントを無視できればいいんだけどなー。。

##最初に書いてた方法

```js
(function(){
  'use strict';

  kintone.events.on('app.record.index.show', function(event) {
    console.log(Object.keys(event.records[0]).join('\n'));
  });
})();
```

このスクリプトを `fieldcodes.js` みたいな名前で保存してアプリに設定し、一覧画面にアクセスすると、Chrome Developer ToolsなどのConsoleに全フィールドコードが表示されます。

試してないですが、一件もレコードが存在しないとエラーになると思います。何かしらデータ登録された状態でお使いください。

##参考リンク
[フィールド形式 – cybozu developer network](https://developer.cybozu.io/hc/ja/articles/202166330-%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E5%BD%A2%E5%BC%8F)
[JavaScriptやCSSでアプリをカスタマイズする | kintone ユーザーヘルプ](https://help.cybozu.com/ja/k/user/js_customize.html)