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

目次

はじめに

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 = jQuery(element).find('span')[0]; // 推奨しません
position を使った要素の配置

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

1
2
const element = kintone.mobile.app.getHeaderSpaceElement();
jQuery(element).append('<div>Hello</div>').css({position: 'fixed', top: '80%', left: '50%'}); // 推奨しません
HTML 要素の操作

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

1
2
const element = kintone.app.record.getFieldElement('文字列1行');
jQuery(element).css('color', 'red');

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

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

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

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

URL の利用

URL の参照

kintone の URL は変更になる可能性があります。
たとえば JavaScriptやCSSを使用したカスタマイズ (External link) で URL を参照することにより特定スペースのみでカスタマイズを実行できますが、URL 変更により動作しなくなる可能性があります。

URL の指定

同様に以下のような URL の指定も動かなくなるリスクがあります。

1
window.location.href = '/k/' + kintone.app.getId() + '/';

cybozu developer network でも、 安全に在庫管理を行うテクニック2 - リビジョンを試そう - などで、直接 URL を指定したカスタマイズをしています。

URL パラメーター(クエリ文字列)を利用する

kintone の画面を開くときに URL パラメーターを使えば外部から kintone にデータを渡せますが、動かなくなるリスクがあります。
外部のデータを利用するにはレコード表示などのイベントで REST API を利用してデータを取得してください。

おわりに

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