はじめに
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で動作を確認しています。