kintone編集画面でフィールドコード基準のジャンプを実装する

はじめに

2月のアップデートでkintoneに追加されたAPI
kintone.app.record.setFieldStyle() を使ってみました。

単なる装飾APIかと思っていたのですが、
応用すると 編集画面でフィールドコード基準のジャンプ機能 を実装できます。

背景：編集画面の課題

詳細画面では

kintone.app.record.getFieldElement(code)

が使えますが、編集画面では使えません。

そのため従来は：

• ラベル文字列から .control-gaia を逆引き
• 同名ラベルで誤爆
• DOM構造変更に弱い

という実装になりがちでした。

---

発想の転換

setFieldStyle() は フィールドコード基準で確実にスタイルを適用できる API です。

つまり、

• 特定のフィールドコードにハイライトを当てる
• DOM上で「そのスタイルが付いた要素」を探す
• .closest('.control-gaia') でフィールドコンテナを取得
• scrollIntoView() でジャンプ

という流れが成立します。

ラベル探索は不要になります。

実装例：ジャンプ機能

① ハイライト適用

await kintone.app.record.setFieldStyle(code, {
  content: {
    backgroundColor: '#fff1c2',
    borderColor: '#ff8f00'
  },
  label: {
    fontWeight: 'bold',
    textDecoration: 'underline'
  }
});

② スタイルからフィールドを逆引き

function findStyledFieldContainer() {
  const BG = 'rgb(255, 241, 194)';
  const BD = 'rgb(255, 143, 0)';

  const candidates = document.querySelectorAll(
    [
      'input.input-text-cybozu',
      'textarea',
      '.select-cybozu',
      '.gaia-argoui-select',
      '.userselect-cybozu'
    ].join(',')
  );

  for (const el of candidates) {
    const cs = getComputedStyle(el);
    if (
      cs.backgroundColor === BG &&
      (
        cs.borderColor === BD ||
        cs.borderTopColor === BD ||
        cs.borderRightColor === BD ||
        cs.borderBottomColor === BD ||
        cs.borderLeftColor === BD
      )
    ) {
      return el.closest('.control-gaia');
    }
  }
  return null;
}

③ スクロール実行

const target = findStyledFieldContainer();

if (target) {
  target.scrollIntoView({
    behavior: 'smooth',
    block: 'center'
  });
}

フィールドタイプ差異への対応

フィールドタイプごとにDOM構造が異なります。

例：

• テキスト → input.input-text-cybozu
• ドロップダウン → .select-cybozu
• ユーザー選択 → .userselect-cybozu

候補セレクタを拡張することで網羅できます。

---

実際の動き

• フィールドコード指定で確実にハイライト
• 同名フィールドでも誤爆しない
• スムーズスクロールでジャンプ

---

メリット

✔ フィールドコード基準で確実に特定
✔ 同名ラベル問題を回避
✔ DOM依存ロジックを削減
✔ 実装が素直になる

---

まとめ

setFieldStyle() は単なる装飾APIではありません。

編集画面におけるフィールド特定の安定化に使えます。

DOM探索を前提とした設計から、
一段抽象度の高い実装へ移行できる可能性があります。