kintoneのカスタマイズでは、レコード追加ボタンを非表示にしたり、サイドバーの開閉を制御することがあります。
こうしたUIパーツの表示制御には、一見動作しているように見えても、リスクを抱える実装パターンが存在します。

この記事では、kintoneのアプリUIパーツの表示制御について、以下の2つを解説します。

• アンチパターンとそのリスク：
  たとえば、DOM操作でボタンやサイドバーを制御するカスタマイズは、kintoneのDOM構造への依存や、表示状態の管理が困難になるといったリスクを抱えています。
• 推奨される実装方法とその利点：
  UIパーツの表示を制御するAPIを使用することで、DOM構造に依存せず安全にUIパーツを制御できます。
  表示状態の取得も容易になり、複数のカスタマイズ間で整合性を保った制御が可能です。

アンチパターンと推奨される実装方法を、サンプルコードを交えて比較しながら紹介します。
既存のカスタマイズのリスク確認や、新たに実装する際の参考にしてください。

kintoneのカスタマイズで、一覧画面のボタンやUIパーツを非表示にしたいことがあります。
たとえば、独自の入力フローを用意して標準の追加ボタンを隠したり、特定の条件に応じて追加ボタンを非表示にするケースです。

ここでは、以下のように一覧画面でレコード追加ボタンを非表示にする方法を比較します。

document.querySelector()でレコード追加ボタンのDOM要素を直接取得し、style.displayを操作して非表示にするパターンがあります。

注意

以下のコードはAPIを使った実装に置き換えることが推奨される書き方です。
新規のカスタマイズでは、後述するshowAddRecordButton()を使用してください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// 非推奨: この書き方は showAddRecordButton() を使った実装への置き換えを推奨します
(() => {
  'use strict';

  kintone.events.on('app.record.index.show', (event) => {
    // kintoneのDOM要素をクラス名で直接取得して非表示にする
    const addButton = document.querySelector('.gaia-argoui-app-menu-add');
    if (addButton) {
      addButton.style.display = 'none';
    }

    return event;
  });
})();

このアプローチには以下のリスクがあります。

kintone.app.showAddRecordButton()を使用することで、レコード追加ボタンの表示・非表示を安全に制御できます。

1
2
3
4
5
6
7
8
9

(() => {
  'use strict';

  kintone.events.on('app.record.index.show', async (event) => {
    await kintone.app.showAddRecordButton('HIDDEN');

    return event;
  });
})();

DOM操作によるボタンの非表示と比較して、以下の点が改善されます。

レコード一覧画面で使える表示・非表示APIは以下のとおりです。

kintoneのカスタマイズで、レコード詳細画面のボタンやUIパーツを非表示にしたいことがあります。
たとえば、詳細画面のサイドバーを閉じて、多くのフィールドを含むレコードの表示領域を確保するケースです。

ここでは、以下のようにレコード詳細画面でサイドバーを閉じる方法を比較します。

document.querySelector()でサイドバーのDOM要素を直接取得し、CSSで非表示にするパターンがあります。

注意

以下のコードはAPIを使った実装に置き換えることが推奨される書き方です。
新規のカスタマイズでは、後述するshowSideBar()を使用してください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// 非推奨: この書き方は showSideBar() を使った実装への置き換えを推奨します
(() => {
  'use strict';

  kintone.events.on('app.record.detail.show', (event) => {
    // サイドバーのDOM要素をクラス名で取得して非表示にする
    const sidebar = document.querySelector('.gaia-argoui-app-show-sidebar');
    if (sidebar) {
      sidebar.style.display = 'none';
    }

    return event;
  });
})();

実行すると、以下のようにサイドバー全体が消え、コメントや変更履歴のタブも表示されなくなります。

このアプローチには以下のリスクがあります。

kintone.app.record.showSideBar()を使用することで、サイドバーの開閉をAPI経由で安全に制御できます。
レイアウトの調整はkintoneが自動的に行うため、メインコンテンツ領域の幅を手動で変更する必要はありません。

1
2
3
4
5
6
7
8
9

(() => {
  'use strict';

  kintone.events.on('app.record.detail.show', async (event) => {
    await kintone.app.record.showSideBar('CLOSED');

    return event;
  });
})();

DOM操作によるサイドバーの制御と比較して、以下の点が改善されます。

showSideBar()を使ってサイドバーを開く場合は、コメントと変更履歴のどちらを表示するかを指定できます。

1
2
3
4
5

// レコードコメントを表示する
await kintone.app.record.showSideBar('COMMENTS');

// 変更履歴を表示する
await kintone.app.record.showSideBar('HISTORY');

レコード詳細画面で使える表示・非表示APIは以下のとおりです。

各APIの非同期処理の扱い、表示状態の取得、モバイル対応について案内します。
事前に把握しておくことで、実装後のトラブルを未然に防げます。

この記事で紹介したAPIはすべて非同期なAPIです。
async/awaitを使用して順序どおりに処理してください。
詳しくは次のページを参照してください。

• はじめようJavaScript：Promiseとasync/await
• はじめようkintone API：kintoneカスタマイズで非同期処理をする

各show系APIには、現在の表示状態を取得する対応APIが用意されています。
他のカスタマイズとの連携や、条件に応じた表示制御で活用できます。
今回紹介したshowAddRecordButton()とshowSideBar()は次のAPIと一緒に活用できます。

ボタンやUIパーツがモバイルに存在する場合、この記事で紹介したAPIは、モバイル版でも利用できます。
モバイル版ではkintone.mobile名前空間のAPIを使用してください。

• レコード一覧画面では、showAddRecordButton()のようなAPIで、DOM操作に頼らずボタンやUIパーツの表示を制御できます。
• レコード詳細画面では、showSideBar()のようなAPIで、DOM操作に頼らずボタンやUIパーツの表示を制御できます。
• getAddRecordButtonDisplayState()やgetSideBarDisplayState()のようなget系APIを使用することで、ボタンやUIパーツの現在の表示状態を取得できます。

show系APIを使用することで、kintoneのアプリUIパーツの表示制御における信頼性が向上します。
新規のカスタマイズでは積極的にこれらのAPIを活用してください。

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