【追記】
この記事は2021年時点の古い情報です。
2022年9月にサイボウズ社がアップデート検証用環境の提供終了を発表しましたのでご注意ください。
詳細は以下の記事をご覧ください。

こんにちは！！

皆さんはkintoneでJavaScriptカスタマイズを行う際に、DOM操作を行うことはありますか？

こちらのページに記載があるように、kintoneのJavaScriptカスタマイズにおいて、
kintoneのHTMLそのものに変更を加えたり、クラスを流用したりするような操作を行っているプログラムは、
アップデート後に動作しなくなるリスクがあるため、非推奨となっております。

上記リンク先に説明がある通り、影響がないDOM操作については全く問題ありませんが、
このような非推奨とされているカスタマイズはついうっかりやりがちですので、
カスタマイズをする際には、非推奨とされているものに該当しないか注意する必要がありますね。

しかしながら、ユーザーからの要望を反映させようとすると、
どうしても非推奨とされているカスタマイズをしなければならなくなること、ありませんか？

私も社内SEの経験があるので、このような状況に陥ってしまう方々のお気持ちがよく分かりますし、
正直に申し上げますと、実際に非推奨とされているカスタマイズを行ったことがあります。

では、このような場合に気をつけないといけなくなるのが、毎月実施されるkintoneのアップデートですよね。

cybozu.com管理者には毎月アップデートのお知らせメールが届き、
アップデート前に検証用環境でテストを行うことができますが、
あくまで自身の環境ではないため、JavaScriptカスタマイズを試すにはアプリの作成から始める必要があり、
時間がかかってしまいますよね。

今回の記事で紹介するのは、私が独自に開発した、
kintoneそのもののクラスを用いて、kintoneそのもののHTML要素を参照するDOM操作が、
アップデート後も問題なく一瞬で検証用環境でのテストを完了させることができるプログラムです！

是非最後までお読みいただき、参考にしてくださいね＾＾

自身のkintone環境にクラス管理用アプリを作成

まず、自身のkintoneに「kintoneクラス管理」アプリを下図のように作成します。
※アプリ名は自由に決めてOK

ここに、自身がJavaScriptカスタマイズで参照・流用したkintoneそのもののクラスを登録していく形になります。

「タグ」にはクラスが使われているHTMLタグ（div、input、table、th、tr、td、button、span等）を入力します。

「セレクター」は文字列（1行）の自動計算機能で「クラス」と「タグ」を繋げてCSSセレクターを生成しています。
※「クラス」と「タグ」を設けず「セレクター」を手入力させる形にしてもOK

「デバイス」と「表示区分」には当該クラスがどこで利用されるかを指定します。
※通常の一覧とカレンダー/カスタマイズビューを区別する場合は表示区分を追加してください

フィールドが設定できたら、レコード閲覧権限を有したAPIトークンを作成して、準備完了です。

プログラム開発

次に、プログラムを作成しますので、JavaScriptファイルを1つ新規作成してください。

プログラムでは、検証用環境から自身の環境の先程作成したアプリのレコードを取得する処理を最初に書きます。

ドメインが異なる環境へのリクエストですので、「kintone.proxy」メソッドを用いてREST APIをコールします。

// 作成したアプリのアプリID
const APP_ID = XXX;

// "PC"と"一覧表示"は実行パターンに合わせて都度変更
const QUERY = encodeURIComponent('デバイス in ("PC") and 表示区分 in ("一覧表示")');

// RHには作成したアプリのAPIトークンを含めたリクエストヘッダーを格納
const RESP = JSON.parse((await kintone.proxy('https://(サブドメイン名).cybozu.com/k/v1/records.json?app=' +
	APP_ID + '&fields[0]=' + encodeURIComponent('セレクター') + '&query=' + QUERY, 'GET', RH, {}))[0]);

※上記コードでは500件を超えるレコードの取得は考慮しておりません

レコードが取得できたら、取得したCSSセレクターが検証用環境に存在するかどうかを判定し、
存在しないもののみ配列に残るようフィルタリングします。

const RECORDS = RESP.records.filter(record =>
	document.querySelectorAll(record['セレクター'].value).length == 0);

最後に、フィルタリング結果が0件の場合はコンソールに「OK」と出力し、
それ以外の場合は「Error」と出力してから、存在しなかったCSSセレクターを列挙します。

列挙する際には、recudeを用いて、改行区切りで出力するようにします。

console.log(RECORDS.length == 0 ? 'OK' :
	RECORDS.reduce((accumulator, currentValue) =>
		accumulator + '\n' + currentValue['セレクター'].value, 'Error'));

検証用環境でプログラムを実行

プログラムが完成したら、検証用環境の任意のアプリ上でプログラムを実行します。

検証するクラスにより、実行するアプリに当該フィールド形式が存在しないためにエラーになる可能性があるので、
実行するアプリはよく選びましょう。

レコード取得時クエリを「’デバイス in (“PC“) and 表示区分 in (“一覧表示“)’」と設定した場合、
PCにて任意のアプリの一覧画面を表示させ、開発者ツールを起動し、コンソールを開きます。

注意点として、使用するブラウザはGoogle ChromeまたはMicrosoft Edge（Chromium版）でお願いします。
※モバイル版のテストで拡張機能を使用するため

また、Internet Explorerでは上記プログラムは動作しません（async/awaitやアロー関数を使用しているため）。

コンソールにプログラムを丸ごとコピペし、Enterキーを押下することで、実行結果がコンソールに出力されます。

「’デバイス in (“PC“) and 表示区分 in (“一覧編集“)’」 ならPCの一覧画面での編集入力時に実行し、
「’デバイス in (“PC“) and 表示区分 in (“詳細表示“)’」ならPCのレコード詳細画面で、
「’デバイス in (“PC“) and 表示区分 in (“詳細編集“)’」ならPCのレコード追加/編集画面で実行します。

「’デバイス in (“モバイル“) and 表示区分 in (“一覧表示“)’」 の場合は、
「Kintone Device Preview」という拡張機能をブラウザにインストールし、これをアプリ上で起動して、
PC内でモバイル版を表示させることで、プログラムをコンソールで実行することができます。

「’デバイス in (“モバイル“) and 表示区分 in (“一覧編集“)’」 はモバイル版に機能そのものが存在しないため、
実行できません（エラーになる）のでご注意ください。

終わりに

最後までお読みいただきありがとうございました！

私が独自で考えた方法ですが、参考になりましたでしょうか？

課題として、HTML要素の親子関係までは判定できないという点がありますので、今後検討しようと思います。

また、もし私が使用しているソースコードを丸ごと欲しいという方がいらっしゃいましたら、
下記にて有償で提供させていただきます。

有償版では、レコードが500件を超える場合でも動作可能にしておりますし、
面倒なクエリ文字列の編集も数字で簡単に設定可能にしており、
更にPC/モバイルの判定も自動で行うようにしております。

万が一不具合があった場合はお問い合わせフォームにて随時対応させていただきますので、
JavaScriptがあまり得意でない方にはおすすめです！

興味がある方は、下記ボタンからご購入よろしくお願いいたします！