はじめに

kintoneの画面には、レコードの追加ボタン／絞り込みボタン／サイドバーなど、多数のUIパーツが存在します。
これらのUIパーツの表示／非表示を制御したいケースは少なくありません。

従来、UIパーツの表示／非表示を制御するにはDOM操作しか手段がありませんでした。
DOM操作に依存したコードは、kintoneのUI刷新で突然動かなくなるという問題がありました。
そこで、2025年8月から順次追加されたshow系JavaScript APIを使えば、DOM操作なしに公式APIで安全にUIパーツを制御できます。

Part1（本記事）では、show系のAPIを使って、表示／非表示を制御する方法を解説します。
Part2では、get◯◯◯DisplayState系APIを使って、今の状態を読み取る方法を解説します。

show系API一覧（2026年4月時点）

show系APIを、PC版とモバイル版それぞれまとめてみました。
各APIの詳細は、cybozu developer networkの公式ドキュメントを参照してください。
kintone JavaScript API

PC版

2026年4月時点、PC版のshow系APIの一覧表です。
対象UIパーツが分からない場合は、画像の赤枠を参照してください。

API	対象UIパーツ	有効な画面
`kintone.app.showAddRecordButton()`	レコードの追加ボタン	一覧／詳細／グラフ画面
`kintone.app.showAppSettingsButton()`	アプリの設定ボタン	一覧／詳細／グラフ画面
`kintone.app.showDescription()`	アプリの説明	一覧／詳細／追加／編集／グラフ画面
`kintone.app.showFilterButton()`	絞り込みボタン	一覧／グラフ画面
`kintone.app.showOptionsButton()`	アプリのオプションボタン	一覧／詳細／グラフ画面
`kintone.app.showReportButton()`	集計ボタン	一覧／グラフ画面
`kintone.app.showReportSelectorItems()`	グラフを選択するパーツの選択肢	一覧／グラフ画面
`kintone.app.showViewAndReportSelector()`	一覧とグラフを選択するパーツ	一覧／グラフ画面
`kintone.app.showViewSelectorItems()`	一覧を選択するパーツの選択肢	一覧／グラフ画面
`kintone.app.record.showActionButton()`	アプリのアクションボタン	詳細画面
`kintone.app.record.showChangeAssigneeButton()`	「現在の作業者を変更」ボタン	詳細画面
`kintone.app.record.showDuplicateRecordButton()`	レコードの再利用ボタン	詳細画面
`kintone.app.record.showEditRecordButton()`	レコードの編集ボタン	詳細画面
`kintone.app.record.showPager()`	前／次のレコードに移動するボタン	詳細画面
`kintone.app.record.showSideBar()`	サイドバー	詳細／編集画面
`kintone.app.record.showStatusActionButton()`	プロセス管理のアクションボタン	詳細画面

▼ PC版の一覧画面

▼ PC版の詳細画面

モバイル版のshow系API一覧

2026年4月時点、モバイル版のshow系APIの一覧表です。
対象UIパーツが分からない場合は、画像の赤枠を参照してください。

API	対象UIパーツ	有効な画面
`kintone.mobile.app.showAddRecordButton()`	レコードの追加ボタン	一覧画面
`kintone.mobile.app.showFilterButton()`	絞り込みボタン	一覧画面
`kintone.mobile.app.showOptionsButton()`	アプリのオプションボタン	詳細画面
`kintone.mobile.app.showReportSelector()`	グラフを選択するパーツ	グラフ画面
`kintone.mobile.app.showReportSelectorItems()`	グラフを選択するパーツの選択肢	グラフ画面
`kintone.mobile.app.showViewSelector()`	一覧を選択するパーツ	一覧画面
`kintone.mobile.app.showViewSelectorItems()`	一覧を選択するパーツの選択肢	一覧画面
`kintone.mobile.app.record.showActionButton()`	アプリのアクションボタン	詳細画面
`kintone.mobile.app.record.showEditRecordButton()`	レコードの編集ボタン	詳細画面
`kintone.mobile.app.record.showPager()`	前／次のレコードに移動するボタン	詳細画面
`kintone.mobile.app.record.showStatusActionButton()`	プロセス管理のアクションボタン	詳細画面

▼ モバイル版の一覧画面

▼ モバイル版の詳細画面

▼ モバイル版のグラフ画面

DOM操作からの卒業

DOM操作による制御の問題点と公式APIが整備された意味

従来、UIパーツの表示／非表示を制御するには、querySelector などのDOM操作で対象の要素を取得して、style.display を切り替える方法が一般的でした。
しかし、この方法には根本的な問題があります。
DOM操作で参照するセレクター（クラス名や要素の階層構造）は、保証されていません。
そのため、kintoneのUIが刷新されると、対象の要素が変更・削除されてカスタマイズが突然動かなくなるリスクがありました。

公式にAPIが提供されたことで、DOM構造に依存せずにUIパーツを制御できるようになりました。
公式APIはkintoneのバージョンアップにわたって動作が保証されるため、UIが更新されてもカスタマイズが動作し続けます。
これにより、これまでDOM操作で実現していた表示制御を、保守しやすい公式の方法に置き換えられます。

近日「アンチパターンから学ぶ UI制御」が公開予定です！公開後にリンクを追記します✨

ユースケース（状況に応じて動的に切り替える）

申請アプリやアンケートアプリで、特定の時間帯のみレコードの追加を許可したい場合を考えてみましょう。

PC版の場合

レコードの追加ボタンを非表示にするだけでは、ショートカットキー（cキー）でレコードを追加できてしまいます。
そこで、kintone.setKeyboardShortcuts()と組み合わせて、ボタンとショートカットキーを同時に制御し、意図しない入力を防げます。

次のサンプルコードは、PC版で受付時間（9〜17時）であればレコードの追加を可能にし、それ以外は不可にする例です。
サンプルコードのためエラーハンドリングは省略しています。

(() => {
  'use strict';

  const events = [
    'app.record.index.show',
    'app.record.detail.show',
    'app.record.edit.show',
    'app.report.show',
  ];

  kintone.events.on(events, async (event) => {
    const hour = new Date().getHours();
    const isOpen = hour >= 9 && hour < 17;
    const getPageType = await kintone.getPageType();

    if (getPageType.page !== 'APP_REPORT') {
      await kintone.setKeyboardShortcuts({ CREATE_RECORD: isOpen });
    }
    if (getPageType.page !== 'APP_EDIT') {
      await kintone.app.showAddRecordButton(isOpen ? 'VISIBLE' : 'HIDDEN');
    }

    return event;
  });
})();

レコードの追加ができる画面（一覧／詳細／詳細／グラフ画面）のイベントをすべて指定
new Date().getHours() で現在時刻の「時」を整数（0〜23）で取得
hour >= 9 && hour < 17 で9時以上17時未満を判定し、isOpen（真偽値）に代入
kintone.getPageType() で現在の画面タイプを取得し、グラフ画面（APP_REPORT）や編集画面（APP_EDIT）かどうかを判定
グラフ画面でなければ、kintone.setKeyboardShortcuts({ CREATE_RECORD: isOpen }) を実行し、c キーの有効／無効を切り替え
編集画面でなければ、kintone.app.showAddRecordButton() に VISIBLE または HIDDEN を渡してレコード追加ボタンの表示を切り替え
isOpen は true/false の真偽値のため、そのままオブジェクトの値として利用可能

ちなみに、ショートカットキーはグラフ画面では使用できません。
また、レコードの追加ボタンは編集画面には存在しないため、使用できません。
もしif文を入れない場合、意図しない動作になります。

モバイル版の場合

次に、モバイル版で同様の制御をする場合はどうすればよいでしょうか。
ショートカットキーはモバイル版には存在しないため、kintone.setKeyboardShortcuts() は呼び出す必要がありません。
しかし、詳細画面のオプションボタンを押すとレコードの追加が可能なため、kintone.mobile.app.showOptionsButton() を使って制御する必要があります。

次のサンプルコードは、モバイル版で受付時間（9〜17時）であればレコードの追加を可能にし、それ以外は不可にする例です。
サンプルコードのためエラーハンドリングは省略しています。

(() => {
  'use strict';

  const events = ['mobile.app.record.index.show', 'mobile.app.record.detail.show'];

  kintone.events.on(events, async (event) => {
    const hour = new Date().getHours();
    const isOpen = hour >= 9 && hour < 17;
    const getPageType = await kintone.getPageType();

    if (getPageType.page === 'APP_DETAIL_MOBILE') {
      await kintone.mobile.app.showOptionsButton(isOpen ? 'VISIBLE' : 'HIDDEN');
    }
    await kintone.mobile.app.showAddRecordButton(isOpen ? 'VISIBLE' : 'HIDDEN');

    return event;
  });
})();

レコードの追加ができる画面（一覧／詳細画面）のイベントをすべて指定
new Date().getHours() で現在時刻の「時」を整数（0〜23）で取得
hour >= 9 && hour < 17 で9時以上17時未満を判定し、isOpen（真偽値）に代入
kintone.getPageType() で現在の画面タイプを取得し、詳細画面（APP_DETAIL_MOBILE）かどうかを判定
もし詳細画面であれば、kintone.mobile.app.showOptionsButton() を実行し、オプションボタンの表示を切り替え
kintone.mobile.app.showAddRecordButton() に VISIBLE または HIDDEN を渡してレコード追加ボタンの表示を切り替え
isOpen は true/false の真偽値のため、そのままオブジェクトの値として利用可能

このように、状況に応じて動的に切り替えることで、ユーザーの操作を適切に制限できます。
ボタンを制御する際は、どの画面で何が操作できるかをcybozu developer networkで確認することをお忘れなく！
kintone APIドキュメント

おわりに

show系APIを使うことで、DOM操作に頼らずにkintoneの標準UIパーツを安全に制御できます。
また、公式APIを使うことで、kintoneのUIが更新された際もカスタマイズが動作し続けます。

パート2では、get◯◯◯DisplayState系APIを使ってUIパーツの現在の表示状態を読み取る方法を解説します。
show系APIと組み合わせることで、現在の状態を確認してから表示を切り替えるといった、より柔軟な制御が可能になります。

次回もぜひお楽しみに！

この記事は、2026年4月版kintoneで動作を確認しています。

参考リンク