kintoneのスペースフィールドの幅に合わせてフィールドを埋め込むポイント

# はじめに

kintone上にオリジナルのフィールドを埋め込む際、よく`スペースフィールド`を使うと思います。
そして埋め込むフィールドの幅は`style`の`width`で設定すると思います。

でも、それだとコード内でwidthが決め打ちになるので、

**もう少し横幅広くしたい！！**

というユーザーごとの要望に答えられないです。（そのためにCSS書くはめになる）
<br/><br/>
ということで、**「スペースフィールド自体の長さになるオリジナルフィールド」** の作り方を調べてみました。

# スペースフィールドの横幅を取得する方法

> フォームレイアウト取得のAPIを叩かないと無理かな？


って最初考えましたが、さすがに毎回取得するのはパフォーマンス良くないしダサいなーってことでいろいろ考えてました。

> `kintone.app.record.getSpaceElement('spaceid')`で取得した要素のwidth見ればいいのでは？

とも思いましたが、これで取得できる要素自体には`width`は設定されてませんでした。

<br/><br/>

ところが`Element.style.width`をタイプミスして、
`Element.width` と書こうとして、
自動補完で`Element.offsetWidth`になって実行したら、、、

<br/><br/>

**横幅が取得できた！**

![スクリーンショット 2021-11-09 19.42.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/174a7749-a75a-1a64-ad8e-3a317a6e2afb.png)

まさに偶然の産物ってやつ。ということでこれを使えばいけそう。

> ▶ HTMLElement.offsetWidth
> https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth
> 要素のレイアウト幅を整数として返します。
> 要素の CSS width のピクセル単位の測定値です。 ::before や ::after などの擬似要素の幅は含まれません。

# 検証

![スクリーンショット 2021-11-09 19.29.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/e51fb5f3-899a-de32-e49c-ecfbf279def4.png)
上側は「スペースフィールドだけサイズ変更してもやっぱり変わらないよね？」の一応の検証用。

このコードを実行

```JavaScript
(() => {
  'use strict';

  kintone.events.on('app.record.create.show', (event) => {
    const kinSpace0 = kintone.app.record.getSpaceElement('space0');
    const kinSpace1 = kintone.app.record.getSpaceElement('space1');
    const kinSpace2 = kintone.app.record.getSpaceElement('space2');
    const kinSpace3 = kintone.app.record.getSpaceElement('space3');

    const text0 = document.createElement('input');
    const text1 = document.createElement('input');
    const text2 = document.createElement('input');
    const text3 = document.createElement('input');

    kinSpace0.appendChild(text0);
    kinSpace1.appendChild(text1);
    kinSpace2.appendChild(text2);
    kinSpace3.appendChild(text3);

    text3.style.width = kinSpace3.offsetWidth + 'px';
  });
})();
```

一番下だけサイズが変わった！！
![スクリーンショット 2021-11-09 19.29.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/f1afd117-3db9-525e-2562-7419469ea027.png)

---
スペースフィールドを伸ばせば伸びる！
→ スペースフィールド自体の幅にちゃんと対応！！

![スクリーンショット 2021-11-09 19.29.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/7ecba082-a5a3-6362-51f2-7fd74c3e1dc5.png)
![スクリーンショット 2021-11-09 19.29.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/e690fb11-7d6b-7234-57f5-af6ccc37a586.png)

# 超関係ない余談

最初スマートに書こうとして↓で書いてたけど、**「何やってるかわからん・・」** と気づいてやめましたw
「コード量が少ない」と「可読性が高い」は比例しないと学びました。

```JavaScript

(() => {
  'use strict';

  kintone.events.on('app.record.create.show', (event) => {
    const kinSpaces = new Array(4).fill('').map((_, index) => {
      return kintone.app.record.getSpaceElement(`space${index}`);
    });

    const kucBtns = new Array(4).fill('').map(() => {
      return document.createElement('input');
    });

    kinSpaces.forEach((val, index) => {
      val.appendChild(kucBtns[index]);
    });

    kucBtns[3].style.width = `${kinSpaces[3].offsetWidth}px`;
  });
})();
```

まぁでもスペースフィールドが100個とかあったらこっちで書きますねw

# おわりに

スペースフィールド使う場合いつもサイズどうしようかなーって困ることがあったので、
こういう方法で可変できるのか！と学びでした。

それでは！≧(+･` ཀ･´)≦