0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

kintoneのgetFieldElementはレコード追加・編集画面ではnullを返す — 仕様の整理と設計の回避策

0
Posted at

kintoneプラグインで「入力画面のフィールドの横に注記を出す」「候補を絞り込んだセレクトに差し替える」といったUIカスタマイズを作ろうとして、kintone.app.record.getFieldElement()null しか返さないことに悩んだ経験はないでしょうか。これはバグでも新UIの回帰でもなく、仕様です。実機検証と公式コミュニティの情報で確定した内容と、それを前提にした設計の回避策をまとめます。

仕様: getFieldElement が使えるのは詳細・印刷画面だけ

kintone.app.record.getFieldElement(fieldCode) がフィールドのDOM要素を返すのは、レコード詳細画面・印刷画面のみです。レコード追加(create)・編集(edit)画面ではサポート外で、常に null を返します(cybozu developer コミュニティでも回答が出ています。topic/9965 など)。

実機での診断例です。create画面で:

kintone.events.on('app.record.create.show', (event) => {
  console.log(Object.keys(event.record));                       // フィールドは存在する
  console.log(kintone.app.record.getFieldElement('subcategory')); // → null
  return event;
});

フィールドコードは正しく、JSエラーも出ません。黙って null が返るだけなので、「画面によって使える/使えないAPIがある」ことを知らないと原因究明に時間を溶かします。

画面別に使えるDOM取得系APIの整理

API 詳細画面 追加・編集画面
kintone.app.record.getFieldElement() ×(null)
kintone.app.record.getSpaceElement()(スペースフィールド)
kintone.app.record.getHeaderMenuSpaceElement()
kintone.app.getHeaderSpaceElement()(一覧) —(一覧用)

つまり入力画面でプラグインが公式に確保できるDOMは、スペースフィールドとヘッダー領域だけです。

何が作れて、何が作れないか

この制約を前提にすると、入力画面のUIカスタマイズは次のように分類できます。

作れるもの:

  • event.record 経由のデータ操作(値の検証・クリア・disabled 化・submit時の event.error)——DOM不要
  • setFieldShown などの命令的な表示制御——DOM不要
  • スペースフィールドやヘッダー領域への注記・ボタンの設置

作れない(または脆い)もの:

  • 特定フィールドの隣への注記や装飾(フィールドDOMが取れないため)
  • フィールドの入力UI自体の差し替え(絞り込んだセレクトへの置換など)

document.querySelector でkintoneの内部DOM構造を直接叩けば一応は可能ですが、kintoneの画面はReactで構築されており内部構造の互換性は保証されません。アップデートで黙って壊れる前提のコードになるため、業務プラグインでは避けるべきです。

設計の回避策

私たちが実際に採っている設計です。

  1. データ整合はDOMに頼らない: 検証・自動クリア・必須化は event.recordevent.error で完結させる。ここは追加・編集画面でも完全に動きます。
  2. 注記・案内はスペースフィールド or ヘッダーへ: 「このフィールドは◯◯です」の類は、フィールド隣ではなくヘッダー領域(getHeaderMenuSpaceElement)に出す設計に寄せる。
  3. フィールドUIの差し替えが本質要件なら、その機能は作らない判断も: 私たちは「入力値に応じてルックアップ候補を動的に絞り込む」プラグインを検討しましたが、この制約(+ルックアップの取得フローに公開APIがない制約)により本番品質にできないと判断し、提供自体を見送りました。「作れないものを知る」のも設計です。

まとめ

  • getFieldElement追加・編集画面では仕様として null(詳細・印刷画面専用)
  • 入力画面で公式に取れるDOMはスペースフィールドとヘッダー領域のみ
  • データ整合は event.record/event.error で、UIはスペース/ヘッダーで、が安全な設計
  • 内部DOMへの querySelector は「アップデートで壊れる前提」になるため業務用途では非推奨

筆者はkintoneプラグイン配布サービス Plumeru を開発しています。この記事は自社プラグイン開発時の実機検証(2026年)に基づきます。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?