Tips

kintoneの「フィールド非表示」関数がラベル・罫線に対応!

関数の新機能:「ラベル」と「罫線」が制御対象に

kintoneのカスタマイズに携わるアプリ開発担当者にとって、課題であった「ラベル」や「罫線」の制御が、2026年02月のアップデートにより、ついに標準のAPI関数で制御可能になりました。

これまで、kintoneのJavaScript APIの kintone.app.record.setFieldShown(fieldCode, isShown) は、入力フィールド(文字列や数値など)の表示・非表示を切り替えるためのもので、以下の要素を制御することができませんでした:

  • ラベル(ラベルフィールド)
  • 罫線(罫線フィールド)

これらを非表示にしたい場合は、これまではDOM操作(直接HTML要素を特定して操作する手法)に頼るしかありませんでした。DOM操作はkintoneのアップデートにより動作しなくなるリスク(非推奨)を常に抱えていましたが、今回のアップデートにより、公式のAPI関数で制御できるようになったのです。

これにより、デザイン崩れを恐れることなく、安全かつ簡単に高度な動的フォームを作成することが可能になりました。

関数の新機能で実現できる「スマートなUI」

今回のアップデートにより、kintoneアプリのユーザーインターフェース(UI)が、下記の様なスマートなUIにに進化します。

入力項目をグループ別に表示できる

従来の表示制御では、入力フィールドだけが消えて「ラベル」だけが画面に残ってしまうという、不自然な表示制御しかできませんでした。新機能を使えば、タイトルとなるラベルや、区切り線となる罫線も非表示にできるため、特定の条件(例:特定のステータスやラジオボタンの選択)に応じて、関連する入力グループを丸ごと「無かったこと」にできます。

フィールド数が多いアプリをすっきり整理

「業務が多岐にわたるため、一つのアプリにフィールドが100個以上ある」というケースは珍しくありません。しかし、すべてのユーザーにすべての項目を見せる必要はありません。

  • 営業担当には「受注見込情報」のグループを表示
  • 技術担当には「仕様・開発情報」のグループを表示 用途別にUIを動的に整理することで、入力ミスの軽減と業務効率の向上を同時に実現します。

カスタマイズの機能紹介とデモ画面

本記事で紹介する新機能を利用したカスタマイズは、「入力モード」というラジオボタンの値に応じて、画面に表示する「ラベル」や「入力フィールド」を瞬時に切り替えるものです。

カスタマイズの基本設定ロジック

このカスタマイズの最大の特徴は、「メンテナンス性の高さ」にあります。

  • 設定の集約: フィールドコードを一つずつ関数に書くのではなく、CONFIGという設定エリアに配列としてまとめています。
  • ラベルの制御: Label01 などのラベルフィールドコードを指定することで、セクションごとのタイトルを動的に表示します。
  • 「ALL」モードの搭載: 開発者や管理者向けに、すべてのフィールドを一括で見渡せるモードを標準搭載しています。
/* kintoneアプリのフィールド表示切替(ラベルと罫線を含む)
 * sample Program
 * Copyright (c) 2026 dejitora.jp
 ------------------------------------------------------------*/
  const CONFIG = {
    targetField: '入力モード',
    groups: {
      group1: ['Label01', 'Line01', 'お名前', 'Eメール'],
      group2: ['Label02', 'Line02', '詳細情報'],
      group3: ['Label03', '利用記録']
    },
    mapping: {
      '基本情報': 'group1',
      '詳細情報': 'group2',
      '利用記録': 'group3',
      'ALL': 'all' // すべて表示
    }
  };

デモ画面

デモ画面では、レコード新規登録・編集画面では、ラジオボタンで表示を切り替えて、レコード詳細画面ではラジオボタンを非表示にして、ヘッダーに切替用のボタンで表示切り替えの操作ができるようにしています。

スポンサーリンク

タブ表示との親和性

これまで、kintoneで「タブ表示」を実装するには、非推奨なDOM操作を駆使する必要がありました。しかし、今回の手法を使えば、以下のことが、公式のAPI関数だけを使ったカスタマイズで実現できます。

  1. 動作はタブ表示風: ヘッダーに並んだボタンをクリックして表示を切り替えることができます。
  2. 中身は標準関数: 実際の処理は 公式API関数(setFieldShown) を呼んでいるだけ。
  3. 安定動作: DOM構造を操作していないので、kintoneのアップデートに影響されず動作が安定します。

今回のカスタマイズで実装するボタンをCSSでタブ風に装飾すれば、タブ表示のUIになります。
まさに「タブ表示風のUI」が、安全な公式APIの組み合わせだけで実現できる様になったのです。


具体的な活用シーン

この「ラベル・罫線を含めた一括制御」を活用できる具体的なシナリオを提案します。

① 顧客管理(個人顧客 vs 法人顧客)

ラジオボタンで「区分」を選んだ際、個人なら「生年月日・家族構成」、法人なら「会社名・決算月・資本金」に関連するラベルと入力欄を表示します。不要なラベル(「法人用情報」など)を完全に消せるため、画面が非常にクリーンになります。

② 工事・プロジェクト管理(工程別の表示切替)

「調査中」「施工中」「完了」といったフェーズに合わせ、その段階で必要なラベルとチェックリスト(罫線で区切られたセクション)のみを表示します。現場の担当者は「今、何を見るべきか」に集中できます。

③ 経費精算・各種申請(勘定科目別のフォーム)

「旅費交通費」なら経路や交通機関のラベル、「交際費」なら参加人数や場所のラベルを表示します。申請内容に応じた最適な入力ガイド(ラベル)を表示することで、入力不備を未然に防ぎます。

④ 多言語対応の動的表示

「言語設定」というフィールドを用意し、日本語が選択されれば「日本語のラベル」を、英語なら「英語のラベル」を表示します。一つのアプリで多言語に対応したUIを構築できます。

⑤ 複雑なアンケート・ヒアリングシート

回答者の「はい/いいえ」に応じて、次の質問セクション(ラベル+質問群)をドリルダウン形式で表示します。回答者にストレスを与えない「魔法のフォーム」が作成可能です。


💬 まとめ

今回のラベル・罫線への対応は、アプリのデザイン設計思想を根本から変える力を持っています。

「必要なときに、必要な情報だけを、直感的な操作で見せる」

画面デザインの切り替えを実現するために、もはや複雑なDOM操作、リスクの高い裏技は不要です。
今回ご紹介した事例のように、設定値を整理し、公式API関数を正しく組み合わせるだけで、ユーザーにとって使い勝手の良いUIを提供できるアプリが作れます。

🔨 自分でカスタマイズしてみたい方へ

以下のNote記事で本記事のカスタマイズ事例を紹介しています。
記事内で紹介しているカスタマイズコードは、無料で利用できるので是非挑戦してみて下さい。

フィールド非表示関数がラベル・罫線に対応!|アプリ活用研究会(キン活)
関数の新機能紹介 2026年2月8日のkintoneアップデートで待望の新機能が登場しました! フォーム上のラベルと罫線に要素IDをつけて操作できる機能です。 2026年2月8日 kintone API アップデート情報2026年2月8日に実施するメンテナンスにおける、kintone APIのアップデート内容は次のとおりです。 kintoncybozu.dev これまで、kintoneの入力フィールドの表示・非表示を切り替える関数 kintone.app.record.set...
スポンサーリンク

🌸 アプリテンプレートの販売

本記事でご紹介しているアプリテンプレートを、下記の料金プランで販売しています。
導入をご希望の方は、各プランの「お申込み/お問い合わせ」ボタンからお問い合わせください。

料金プラン

◆単品販売(買取型)は、導入サポート付きの価格です。
 単品動作タイプは60,000円、2アプリ連携タイプは100,000円、3つ以上連携タイプは150,000円です。
◆簡易サポート契約では、当サイトのアプリテンプレートとプラグインを合計6種類までご利用できます。
◆会員サポート契約では、ご利用範囲「無制限」で運用ヘルプデスク対応までフルサービスでご提供します。

項目 単品販売 簡易サポート 会員サポート
料金体系 60,000円 (税抜) 120,000円 (税抜) 360,000円 (税抜)
契約期間 なし 毎年更新 6か月更新
導入サポート
メールサポート ×
チャットサポート ×
バージョンアップ対応 ×
運用ヘルプデスク対応 × ×
商品のご利用範囲 本商品のみ 6種類までご利用可能
ユーザー数10名まで
無制限
ユーザー数30名まで
お問い合わせ/お申し込み 購入する お申込み

🏫 kintone人材育成研修

この様なカスタマイズを自分で出来る様になりたい方は、当サイトの「Kintome人材育成」上級コースの受講をご検討して下さい。当サイトのTIPSで紹介しているカスタマイズ例のテンプレートを使えば、簡単に実装出来ます!
上級コースの受講者には、特典で当サイトのカスタマイズテンプレート(3種類まで)と3か月のサポート契約を無償でご提供しています。

研修目的を「カスタマイズテンプレートのアプリ導入」とする研修メニューもご提案可能です。

📣カスタマイズ・導入支援いたします!

本記事の様な「kintoneアプリのカスタマイズ」をご希望の企業様へ
kintoneを便利に活用できるカスタマイズと運用支援は、ぜひ当社にご相談ください!

#kintone #Javascript #カスタマイズ #フィールドの非表示 #ラベルの非表示 #タブ表示

スポンサーリンク
シェアする

事例紹介

ACHIEVEMENTS
製造業の受注データ管理をエクセルから移行
エクセルマクロの作業日報をKintoneに移行

Tips

TIPS
kintone
kintoneの「フィールド非表示」関数がラベル・罫線に対応!
kintone業務活用
ルックアップ風の動的絞り込み検索で入力時間を削減!
kintone業務活用
レコード一覧表の一部を「見せない」改善事例
補助金の活用についてもご相談ください

中小企業のデジタル化に利用できる補助金や助成金があります。
補助金や助成金は申請できる企業や用途に要件があったり、事業計画書を作成する必要があったりします。
必要な手続きをサポートさせていただきますので、お気軽にご相談ください。

お気軽にご相談ください。

オンライン可
無料相談
デジタル化
診断チャート
簡易診断

デジタル化による
コスト削減効果を算出