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

はじめに

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

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

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

というユーザーごとの要望に答えられないです。（そのためにCSS書くはめになる）



ということで、「スペースフィールド自体の長さになるオリジナルフィールド」 の作り方を調べてみました。

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

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

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

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

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

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

横幅が取得できた！

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

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

検証

上側は「スペースフィールドだけサイズ変更してもやっぱり変わらないよね？」の一応の検証用。

このコードを実行

(() => {
  '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';
  });
})();

一番下だけサイズが変わった！！

---

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

超関係ない余談

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

(() => {
  '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

おわりに

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

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