【#kintone100日チャレンジ】Day 11: 条件付きフィールド表示切替プラグインを作ってみた

面倒解決エンジニアの森田ユウゴです。
台湾からお届けする「#kintone100日チャレンジ」の11日目。

👉 #kintone100日チャレンジの概要はこちら

1～10日はQiitaを使って報告を記録してきました。
このチャレンジを通じて、色々なサービスにもチャレンジしてみるべき…。ということで今日から10日ほど、noteで投稿をしてみます。

また、本日は終日外出の予定があり朝早めのコミットです。

本日は、【kintoneの入力画面を作成・管理する担当者、実際の入力担当者】向けの「【Simple Field Switcher（条件付きフィールド表示切替プラグイン）】」を開発しました！

「Simple Field Switcher」について

🎯 なぜ開発したか？（現場の課題とベネフィット）

• 現場の「不」: kintoneアプリを作り込むほど入力項目は増えていき、「このパターンの時はどの項目を入力すればいいの？」と現場が混乱しがちです。サイボウズの公式Tips（回答条件によってグループフィールドの表示/非表示を切り替える）が存在するほど、「不要な項目は非表示にして入力画面をシンプルにしたい」というのは、kintone運用における超定番の悩みです。見えなくていい項目が見えていることで、誤入力や入力の心理的ハードルが上がってしまいます。

• 導入後の世界（ベネフィット）: ラジオボタンやドロップダウンの選択結果に応じて、必要なフィールドだけがフワッと表示されます！入力画面がスッキリ整理されることで、ユーザーは「今入力すべきこと」に集中でき、入力ミスや「どこに入力すればいいの？」という問い合わせの時間を大幅に削減できます。

✨ これで出来ること（機能概要）

まずはこちらをご覧ください。

• 【条件に応じたフィールドの動的表示/非表示】: トリガーとなる項目（ドロップダウン、ラジオボタン、チェックボックス、複数選択）の値に応じて、対象となるフィールドの表示・非表示をリアルタイムに切り替えます。

• 【非表示時の自動値クリア機能】: 対象項目が「非表示」になったタイミングで、入力されていた値を自動的に空（クリア）にする設定が可能です。これにより、見えない項目に不要なデータが残ってしまう事故を防ぎます。

• 【複数ルールの直感的な設定UI】: プラグイン設定画面では、「トリガー項目」「発火する値」「対象項目」「一致時に表示するか非表示にするか」を直感的に複数設定できます。1つのトリガーで複数の項目を同時に制御することも可能です。

課題

現時点では下記のような課題が残っています。

• 【AIとのバイブスコーディングによるUI構築の限界】
  設定画面（config.js）の複雑なテーブルUI（複数条件の動的追加やrowspanを駆使したレイアウト）をAIにVanilla JSで書かせましたが、細かいUI周り（罫線周りの増減の詰めが甘い、左右のマージンの計算がおかしいなど）のデザインの詰めが少しうまくいっていません。AIに効率的かつ正確にCSSやDOMの微調整を指示するためのプロンプトの工夫が今後の課題です。

• 【モバイル対応（スマートフォン版）の未実装】
  現在はPC版（desktop.js）のみの対応となっています。入力業務は現場のスマートフォンから行われることも多いため、モバイル版への対応を今後検討・実装する必要があります。

さいごに

明日もお楽しみに！

下記のブログもご覧ください！
👉 【#kintone100日連続チャレンジ】AIにkintoneカスタマイズを100%任せたらどこまでいけるか？現役フリーランスの「100 Days of kintone Hacks」始動！
👉 ココナラで「kintone有資格者が導入や運用の相談にのります」サービスを開始します！

2026/4/15追記…下記の通り、ソースコードとプロンプトについては公開を停止します。