Tips

画面UIの状態で動的制御!新関数による次世代カスタマイズ

◆はじめに:画面の見た目を“自在に変えられる”新機能

2025年11月のkintoneアップデートで、アプリ画面のボタンなどの「UIパーツの表示状態を取得・切り替えできる新しい関数(API)」が登場しました。

2025年11月9日 kintone API アップデート情報
2025年11月9日に実施するメンテナンスにおける、kintone APIのアップデート内容は次のとおりです。kintone JavaScript API 新規追加 大きく分けて、次の3種類のkintone JavaScript APIが新規追加されます。 画面のURLの組み立て ショートカットキーの有効/無効の変更 アプリのUIの表示状態を取得 画面のURLの組み立て kintone.buildPageUrl()画面のURLを組み立てます。11月定期メンテナンスではアプリの...

アプリのUIの表示状態を取得する新関数は、全部で11種類もありますので、今回は、レコード詳細表示画面に表示される4種類のボタン(レコード新規作成、編集、複製、アプリの設定)の表示/非表示の状態取得の関数を利用するメリットと実用事例等について紹介します。

これまでは「新規ボタンを表示する」「編集ボタンを隠す」などの操作は、コード内で状態を指定するしかなく、“今そのボタンが見えているかどうか”を調べることはできませんでした。

しかしこの新関数により、現在のUIの状態をリアルタイムで確認して動的に制御できるようになりました。

デモ画面

実際の利用例を、以下のデモ画面でお見せします。
レコード詳細画面の4種類のボタン(レコード新規作成、編集、複製、アプリの設定)の状態を新関数で取得して、その結果を画面ヘッダー部分に表示しています。
さらに「表示切替」ボタンのクリックで、ボタンの表示/非表示の状態を反転切替しています。

  • レコードの新規作成と複製のボタン(表示→非表示)
  • レコードの編集ボタンとアプリの設定ボタン(非表示→表示)

dialogメッセージの表示には、kintone.showConfirmDialog(config)関数を用いています。

スポンサーリンク

◆新関数の目的:状態を“把握してから動かす”

この新APIの目的は一言で言えば、
「今のkintone画面がどうなっているか」を把握できるようにすることです。

たとえば、

  • 「編集ボタンが今表示されている?」
  • 「新規ボタンは非表示の状態?」
  • 「設定ボタンがユーザーに見えている?」

といった「画面の今の状態」を取得できるようになります。
そして、「画面の今の状態」に応じて「表示/非表示」を切り替えたり、処理を分岐させることが可能です。


◆新関数のメリット:賢く、安全にUIをコントロール

① 状態に応じた柔軟な制御

「編集ボタンが非表示なら、複製ボタンも自動で非表示」にするなど、
他のボタンとの連動制御が簡単にできます。
UIの統一感を保つことができ、誤操作も防げます。

② 操作権限と連動した表示制御

ユーザーのアクセス権限の設定で「新規登録」や「編集」のボタンが非表示の状態になっている場合、
ボタンの状態を取得して「あなたには編集権限がありません」と通知メッセージを表示するなどの工夫が可能になります。

③ 競合を防げる

複数のカスタマイズやプラグインが同じボタンを操作しても、
今の状態を確認してから処理できるため、
“画面UIの更新処理が競合して期待した結果にならない”などのトラブルを防げます。


◆実用例:こんな使い方ができます!

🧩例1:権限に合わせてボタンを自動で非表示に

編集権限のないユーザーには「編集」「複製」ボタンを自動で非表示にして、
UIの一貫性と誤操作防止を両立。

🧩例2:入力チェック中は保存ボタンを無効にする

未入力や不正なデータがあるときは「保存」ボタンを自動で無効化できます。
入力が正しいときだけ再び表有効化(クリック可能状態)にすれば、ミスを防げます。

🧩例3:ボタンの状態に応じてメッセージを表示

「新規作成ボタンが非表示の場合は“登録停止中です”と表示」など、
ボタンの状態に合わせたメッセージを動的に表示できます。

🧩例4:標準ボタンとカスタムボタンを連動

たとえば、標準の「編集ボタン」が非表示なら、
フォーム内に自作した「カスタム編集ボタン」も自動で無効化して、
使えない状態に統一できます。

🧩例5:画面遷移時の“状態リセット”

別画面に移動して戻ってきたときに、
ボタン表示を自動的にデフォルト状態に戻す。
「前の画面で非表示にしたまま戻ってきた」という不具合を防止できます。

スポンサーリンク

◆まとめ:よりスマートで使いやすいアプリへ

今回の新関数によって、
「状態を知ってから動かす」という、より賢いkintoneカスタマイズが可能になりました。

これまでのように画面UI操作の引数(表示/非表示など)を予め決めて実行するのではなく、
“今の画面の状態に合わせて最適な操作を行う”――
まさに、ユーザーに優しい動的UIの実現です。

これからは、kintoneの画面を「見た目で使いやすく」「状況で変化する」ように設計する時代です。


💡補足:新関数を用いた応用のヒント

  • アプリの画面で、操作ユーザーによる操作権限の違いを可視化
  • 入力担当者用の画面では不要なボタンを隠してシンプルに
  • 教育用アプリで「説明を順番に表示する」ガイド的UIを構築

難しいコードを書かなくても、
「ボタンを出す・隠す」を理解できれば業務改善がぐっと進みます。


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

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

note ご指定のページが見つかりません
スポンサーリンク

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

この記事で紹介したカスタマイズ機能のアプリテンプレートをサポート契約先限定でご提供しています。

アプリテンプレートを利用すれば、デモ画面の様に動くアプリを簡単に導入できます。
設定方法や操作方法もサポート対象です。

サポート契約の料金体系

簡易サポート会員サポート
料金税抜(1,000円×ユーザー数)/月税抜(5,000円×ユーザー数)/月
サービス内容プラグインとテンプレートの利用kintone運用の伴走支援
プラグインと
テンプレートのご利用
5種類まで無制限

🏫 kintone人材育成研修

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

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

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

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

#kintone #Javascript #カスタマイズ

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

事例紹介

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

Tips

TIPS
kintone
モバイルアプリ判定で誤操作防止!PC画面からのアクセス制限
kintone業務活用
kintoneのレコード一覧表をキレイに印刷したい!
画面UIの状態で動的制御!新関数による次世代カスタマイズ
補助金の活用についてもご相談ください

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

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

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

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