そのカスタマイズ大丈夫？アップデートの影響を受けにくいカスタマイズTips

固定リンクがコピーされました

更新日：2025年11月27日

はじめに

固定リンクがコピーされました

kintoneでは、定期的に機能改善やアップデートが行われます。
このとき、 kintone APIドキュメントに記載していない方法でkintoneカスタマイズを行うと、kintoneの機能追加の影響を受けて、動作しなくなるリスクがあります。
たとえば、直接HTML要素の参照や編集をする「DOM操作」と呼ばれる実装方法などがあります。

そこで本記事では、kintoneのアップデートで動かなくなるリスクがあるカスタマイズの例を紹介します。
例を通じて、アップデートの影響を受けにくいカスタマイズについて考えていきましょう。

具体例

固定リンクがコピーされました

ここからは、具体例を交えて説明します。
回避策がある場合はその内容についても説明します。

DOM操作

固定リンクがコピーされました

HTML要素の参照

kintoneの画面上に要素（ボタンなど）を表示したい場合は、次のような方法で取得したスペース要素にボタンなどの要素を追加してください。

1
2
3
4
5
6


const newDiv = document.createElement('div');
const newContent = document.createTextNode('Hello');
newDiv.appendChild(newContent);

const element = kintone.app.record.getHeaderMenuSpaceElement();
element.appendChild(newDiv);

ID名やClass名の指定は動かなくなるリスクがあります。
たとえば以下のようなコードです。
クラス名のrecordlist-cell-gaiaは変更される可能性があるためです。

1
2
3
4
5
6


const newDiv = document.createElement('div');
const newContent = document.createTextNode('Hello');
newDiv.appendChild(newContent);

const currentDiv = document.getElementsByClassName('recordlist-cell-gaia')[0]; // 推奨しません
currentDiv.appendChild(newDiv);

もちろんjQueryを使ってjQuery（'.recordlist-cell-gaia'）のように指定するのも同様です。
つまり、APIで取得できる場所以外に要素を追加することは、動かなくなるリスクがあります。

以下のようにHTMLタグを参照するのも同様です。

1
2


const element = kintone.app.record.getFieldElement('文字列1行');
const span = element.querySelector('span'); // 推奨しません

positionを使った要素の配置

スペース要素やメニュー上側の空白要素を取得して、そこにHTML要素を追加するのはAPIドキュメントに準じた方法です。
しかし、positionプロパティを利用して任意の位置にHTML要素を追加する方法は、動かなくなるリスクがあります。
親要素などのスタイルは、変更になる可能性があるためです。
たとえば以下のようなコードが該当します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


const element = kintone.mobile.app.getHeaderSpaceElement();

// 推奨しません
const div = document.createElement('div');
div.textContent = 'Hello';
div.style.position = 'fixed';
div.style.top = '80%';
div.style.left = '50%';

element.appendChild(div);

HTML要素の操作

getFieldElement()で取得した要素はスタイル変更のみがAPIドキュメントに準じた方法です。
詳細はフィールド要素を取得するを確認してください。

1
2


const element = kintone.app.record.getFieldElement('文字列1行');
element.style.color = 'red';

スタイル変更以外は動かなくなるリスクがあります。
たとえば以下のようなイベント取得です。

1
2


const element = kintone.app.record.getFieldElement('文字列1行');
element.addEventListener('click', console.log); // 推奨しません

マウスやキーボード入力のイベントを利用したい場合は、以下の手順をおすすめします。

スペース要素を取得する。
スペース要素にテキストボックスなどを追加する。
テキストボックスのイベントを利用する。
必要なタイミングで入力値を利用する。
例）レコード保存実行前イベントで入力値をkintoneに反映する。

URLの利用

固定リンクがコピーされました

kintone画面のURLの取得

kintoneのURLは将来的に変更される可能性があり、JavaScriptコード内に直接URLを記述している場合、カスタマイズに影響する恐れがあります。
そのため、kintoneのURLを取得する場合は、 kintone.buildPageUrl() を利用してください。

1
2
3


// アプリの一覧画面のURLを取得する
const url = await kintone.buildPageUrl('APP_INDEX', {appId: kintone.app.getId()});
window.location.href = url;

パスやクエリ文字列を利用して直接URLを指定する方法は、kintoneのURLの変更があると、動かなくなるリスクがあります。
たとえば以下のようなコードです。

1

window.location.href = '/k/' + kintone.app.getId() + '/'; // 推奨しません

外部データの受け渡し

外部システムや他のアプリからデータを取得したい場合は、URLパラメーター（クエリ文字列）の使用を避け、kintone REST APIを利用してください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


// 詳細画面を表示するイベントでREST APIを利用してデータを取得する例
kintone.events.on('app.record.detail.show', async (event) => {
  // 外部のデータを取得する処理
  const resp = await kintone.api(kintone.api.url('/k/v1/record', true), 'GET', {
    app: 123, // データを保存しているアプリID
    id: 123, // 取得したいレコードID
  });
  // 取得したデータを使用する処理（略）
  console.log(resp);
  return event;
});

URLパラメーター（クエリ文字列）を利用して外部のデータを取得する方法は、kintoneのURLの変更や仕様変更があると、動かなくなるリスクがあります。
たとえば以下のような、画面遷移元のアプリでURLパラメーターを付与し、画面遷移先のアプリでそのパラメーターを取得する例です。

画面遷移元：URLパラメーターでデータを渡す例

1
2


// 推奨しません
window.location.href = '/k/123/?customParam=value123';

画面遷移先：URLパラメーターを取得する例

1
2
3
4
5
6
7
8
9


// 推奨しません
kintone.events.on('app.record.detail.show', (event) => {
  const record = event.record;
  const urlParams = new URLSearchParams(window.location.search);
  const externalData = urlParams.get('customParam');
  // 取得した外部データをレコードのフィールドにセットする
  record['文字列__1行_'].value = externalData;
  return event;
});

おわりに

固定リンクがコピーされました

今回取り上げた、リスクのあるカスタマイズ方法は一例です。
kintoneのアップデートで影響を受ける可能性のある実装方法のイメージがつかめる内容になっていれば幸いです。

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

kintone API

開発ノウハウ