こんにちは、ジョイゾーでkintoneプラグインの開発エンジニアをやっている小林です。
2026年も早くも4月。新年度ですね。
kintoneエンジニアにとっての2026年暫定トップのトピックといえば、なんといっても2月のアップデートではないでしょうか。
ついにと言っていいのかわかりませんが。。
「ラベルフィールド」と「罫線フィールド」への要素ID指定、および表示・非表示APIの対応です。
2026年2月版 主なアップデート
暗黒時代（DOM操作）
これまで、ラベルや罫線を動的に消したり、色を変えたりしたい時、他のフィールドと違いフィールド表示制御API-setFieldShown()を使えませんでした。
（これはラベルや罫線がIDというユニークキーを付与できないという今までのkintoneの仕様に起因する制限）
でも、実現したい私たちが取っていた手段はこんな感じです。
document.getElementsByClassName()で特定のクラス（.control-label-field-gaiaなど）を捕まえる- 同じクラスの要素が複数ある場合、「えーっと、消したいのは上から3番目のラベルだから……」と添字で指定する
- フォームに新しくラベルを追加したり、順番を入れ替えたりした瞬間、カスタマイズが壊れる(T-T)
(function() {
'use strict';
kintone.events.on('app.record.detail.show', (event) => {
// ラベルフィールドは一意に特定できないため、クラス名で要素群を取得
const labels = document.getElementsByClassName('control-label-field-gaia');
// 「フォーム上から3番目のラベル」を特定して操作
// ※フォーム設計でラベルの追加・削除・並び替えが発生すると、意図しない要素を操作するリスクがある
const targetLabel = labels[2];
if (targetLabel) {
// 直接スタイルを書き換えて非表示にする
targetLabel.style.display = 'none';
}
// 罫線も同様。「上から1番目」を特定して操作
const hrFields = document.getElementsByClassName('control-hr-field-gaia');
if (hrFields[0]) {
hrFields[0].style.display = 'none';
}
});
})();
、、、ゴリゴリの力技でした。”何番目”という変わりやすいものを軸に処理構成しているのでとても実用に耐えうるものではないですよねぇ。
要素IDがきた！
2026年2月のアップデートで、フォーム編集時に
他フィールドでいうところのフィールドコードと同様の意味を持つ
「要素ID」が指定できるようになりました。
同じタイミングでフィールド表示制御API-setFieldShown()もこれに対応。
これによりコードはこんなにスッキリします。
(function() {
'use strict';
kintone.events.on('app.record.detail.show', (event) => {
// ラベル/罫線に設定した要素IDを指定して表示制御を実行
// フォーム上の配置順序に依存せず、一意なIDにより確実に要素を特定できる
kintone.app.record.setFieldShown('label_1', false);
kintone.app.record.setFieldShown('border_1', false);
});
})();
ちなみに、対になっているフィールド要素取得API-getFieldElement()ももちろん対応しているので要チェックです。
置き換えの意味とメリット
いつものやつ。次のような利点があります。
- スマートな実装
- kintoneのDOM構成変更の影響を受けない
- ラベル/罫線/スペースの要素ID付与励行に（他カスタマイズとかでもメリットあるよ）
- 学習コストが低い
DOM勉強しなくていいよ！
おわりに
これまで「DOM操作は壊れやすいから……」と諦めていた非推奨DOM画面制御も、徐々に脱却できますね！（おじさんもプラグイン対応頑張ります。。）
