Tips

新関数「setFieldStyle」で実現する動的UIの効果

関数の新機能の紹介:何ができるようになったのか?

 kintoneで入力中の画面(新規レコード画面、編集画面)上のフィールドに色を付けたり、文字を太くしたりする「スタイルの変更」は、これまで多くのアプリ開発者を悩ませてきたトピックでした。

2026年02月08日のアップデートで新しく追加された JavaScript API kintone.app.record.setFieldStyle は、その悩みを一気に解決します。

フィールドのスタイルの設定
現在開いているレコードのフィールドにスタイルを設定します。

これまで、kintoneの入力中画面のフィールドにスタイルを適用するには、大きく分けて2つの方法しかありませんでした。

  • DOM操作(非推奨): .getElementsByClassName()jQuery で要素を直接指定し、CSSを書き換える方法。アップデートでクラス名が変わると動作しなくなるリスクがありました。
  • プラグインの利用: スタイル変更機能を持つプラグインを導入する方法。
    こちらも内部でDOM操作が前提であり、細かい条件分岐(ロジック)を組むにも限界がありました。

新関数の機能

今回登場したsetFieldStyle は、kintone公式が提供する「スタイル操作API」です。

  • 安全な操作: DOMの構造を意識せず、フィールドコードを指定するだけでスタイルを変更できます。
  • 動的な制御: JavaScriptのロジックに基づき、リアルタイム(入力中)にスタイルを切り替えられます。
  • クリーンなコード: CSSファイルを用意しなくても、JSファイル単体でデザイン制御が完結します。

デモ画面

デモ画面では、レコード編集画面のラジオボタン操作で、入力フィールドのスタイル(文字色や背景色)を切り替えています。「規定値」を選べば、kintone標準のデザインに戻すこともできます。

ユーザー属性やフィールド条件で「注意を促すUI」を構築

 新関数の真骨頂は、「ユーザーの属性やフィールド値に応じて、即座に視覚的フィードバックを与えられる」点にあります。

例えば、以下のようなシナリオが簡単に実現できます。

  • 権限による強調: 特定の役職(ログインユーザー)が閲覧したときだけ、確認して欲しいフィールドを赤く光らせる。
  • 数値による警告: 在庫数が発注点を下回った瞬間、背景色を警告色(オレンジ)に変える。
  • ステータス連動: ラジオボタンの選択肢に応じて、入力すべき箇所の境界線を太くし、ユーザーの視線を誘導する。

これにより、単なるデータの器だったkintoneアプリが、ユーザーを正しく導く「ナビゲーションシステム」へと進化します。


具体的な活用シーン

この関数を現場でどう活かすか、5つのアイデアを紹介します。

① 【在庫管理】欠品リスクの可視化

商品の「現在庫数」が「安全在庫数」を下回った場合、在庫数フィールドの背景をピンク色にし、さらに文字を太字(bold)にします。

  • メリット: 発注ミスを劇的に減らし、数値の読み飛ばしを防止します。

② 【経費精算】申請金額に応じたアラート

合計金額が10万円を超える場合、承認ルートに関わるフィールドの境界線を太く、目立つ色に変更します。

  • メリット: 高額案件であることを申請者と承認者の双方に強く意識させます。

③ 【顧客管理】重要顧客のVIP待遇表示

顧客ランクが「Sランク」の場合、顧客名の文字色をゴールドにし、背景に色を付けます。

  • メリット: 電話対応や訪問時に、担当者が一目で「重要顧客である」と認識でき、対応の質向上に寄与します。

④ 【タスク管理】期限切れタスクの強調

今日の日付と「完了予定日」を比較し、期限が過ぎている未完了タスクに対して、日付フィールドに「取り消し線(line-through)」と赤い背景色を適用します。

  • メリット: 優先順位が低いタスクとの差別化を明確にします。

⑤ 【入力補助】非アクティブ項目のグレーアウト

ラジオボタンで「その他」以外が選択されている間、自由記述欄の背景色をグレーにし、入力を促さないデザインにします。

  • メリット: どこを入力すべきかが直感的に伝わり、UX(ユーザー体験)が向上します。

💬 まとめ

kintoneの新関数 setFieldStyle は、単なるデザイン変更ツールではありません。ユーザーに「気づき」を与え、システムの操作性を高めるための「コミュニケーションツール」になります。

これまで「kintoneの画面はどれも同じで見づらい」と感じていたユーザーにとって、このアップデートは大きな福音となるでしょう。

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

以下の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業務活用
新関数「setFieldStyle」で実現する動的UIの効果
kintone
kintoneの「フィールド非表示」関数がラベル・罫線に対応!
kintone業務活用
ルックアップ風の動的絞り込み検索で入力時間を削減!
補助金の活用についてもご相談ください

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

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

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

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