kintoneのレコード画面をタブ化する（縦長画面防止）

# 本記事の目的
kintoneは入力項目が多くなるとどうしても縦長の画面になりがちです。
これを防ぐため、JavaScriptによりタブでグループ毎に出し分けできるようにします。

# アプリの準備
サンプルアプリである「従業員名簿（人事労務パック）」を作成します。
作成されたアプリに対し「アプリの設定」-「フォーム」から、設定変更を加えます。

#####「スペース」フィールドを一番上に追加
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1526064/83a80faa-d63a-136e-31cb-2a2aa5b87a9e.jpeg">

#####[基本情報],[業務情報],[給与]の3項目をグループ化
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1526064/dc593849-0729-23d6-eb65-bab92755b946.jpeg">

# JavaScript記述
まずタブのボタン設定をします。

```javascript
var ButtonAll = document.createElement('button');
ButtonAll.id = 'eeButton';
ButtonAll.style.height = '30px';
ButtonAll.style.width = '120px';
ButtonAll.innerHTML = ' 全表示 ';
ButtonAll.style.borderRadius = '10px 10px 0px 0px';

var ButtonA = document.createElement('button');
ButtonA.id = 'ButtonA';
ButtonA.style.height = '30px';
ButtonA.style.width = '120px';
ButtonA.innerHTML = ' 基本情報 ';
ButtonA.style.borderRadius = '10px 10px 0px 0px';

var ButtonB = document.createElement('button');
ButtonB.id = 'ButtonB';
ButtonB.style.height = '30px';
ButtonB.style.width = '120px';
ButtonB.innerHTML = ' 業務情報 ';
ButtonB.style.borderRadius = '10px 10px 0px 0px';

var ButtonC = document.createElement('button');
ButtonC.id = 'ButtonC';
ButtonC.style.height = '30px';
ButtonC.style.width = '120px';
ButtonC.innerHTML = ' 給与 ';
ButtonC.style.borderRadius = '10px 10px 0px 0px';

var devSpace = document.createElement('dev');
devSpace.innerHTML = '　　　　　　　　　　　　　';//タブ位置の調整

kintone.events.on(['app.record.create.show','app.record.edit.show','app.record.detail.show'], function (e) {
  if (document.getElementById ('button') != null) {
    return;
  }
  kintone.app.record.getSpaceElement('TAB_ID').appendChild(devSpace);
  kintone.app.record.getSpaceElement('TAB_ID').appendChild(ButtonAll);
  kintone.app.record.getSpaceElement('TAB_ID').appendChild(ButtonA);
  kintone.app.record.getSpaceElement('TAB_ID').appendChild(ButtonB);
  kintone.app.record.getSpaceElement('TAB_ID').appendChild(ButtonC);
});
```
各タブの設定をし、用意したスペースフィールドにそれらを当て込んでいます。

結果、タブが表示されました。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1526064/bc07a203-c637-313f-7f51-c7bc7e8c3d59.jpeg">


次は、これらのタブに機能を持たせていきます。

```javascript
  ButtonAll.onclick = function() {
    tagView("All");
    return false;
  }
  ButtonA.onclick = function() {
    tagView("a");
    return false;
  }
  ButtonB.onclick = function() {
    tagView("b");
    return false;
  }
  ButtonC.onclick = function() {
    tagView("c");
    return false;
  }

  function tagView(setInfo){
    ButtonA.style.background = '#c0c0c0';
    ButtonB.style.background = '#c0c0c0';
    ButtonC.style.background = '#c0c0c0';
    ButtonAll.style.background = '#c0c0c0';
    kintone.app.record.setFieldShown('基本情報',false);
    kintone.app.record.setFieldShown('業務情報',false);
    kintone.app.record.setFieldShown('給与',false);

    switch (setInfo) {
      case "a": ButtonA.style.background = '#ff9e3d';
        kintone.app.record.setFieldShown('基本情報',true);
        break;
      case "b": ButtonB.style.background = '#ff9e3d';
        kintone.app.record.setFieldShown('業務情報',true);
        break;
      case "c": ButtonC.style.background = '#ff9e3d';
        kintone.app.record.setFieldShown('給与',true);
        break;
      default :
        ButtonAll.style.background = '#ff9e3d';
        kintone.app.record.setFieldShown('基本情報',true);
        kintone.app.record.setFieldShown('業務情報',true);
        kintone.app.record.setFieldShown('給与',true);
        break;
    }
    return;
  }
```
押されたタブに応じて、対応グループの「setFieldShown」をTRUEとし、それ以外をFALSEとしています。
また、初期状態では全表示となるよう、先述のJavaScriptに追加記述します。

```javascript
kintone.events.on(['app.record.create.show','app.record.edit.show','app.record.detail.show'], function (e) {
  if (document.getElementById ('button') != null) {
    return;
  }
  kintone.app.record.getSpaceElement('TAB_ID').appendChild(devSpace);
  kintone.app.record.getSpaceElement('TAB_ID').appendChild(ButtonAll);
  kintone.app.record.getSpaceElement('TAB_ID').appendChild(ButtonA);
  kintone.app.record.getSpaceElement('TAB_ID').appendChild(ButtonB);
  kintone.app.record.getSpaceElement('TAB_ID').appendChild(ButtonC);
  tagView("All");//追加
});
```

# 結果
タブが表示され、押下したグループのみ表示されるようになりました。

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1526064/2a9c0946-7ccb-9848-1f3c-f2551c359f0c.jpeg">

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1526064/e7a6de54-37ac-68c4-36e7-8e14c29b4032.jpeg">

# 参考
<a href="http://kintone.lexues.co.jp/blog/137/">WORK DESIGN GEAR：タブ制御で入力画面をすっきりさせてみた</a>