設定画面に変更の目印と表示切替を追加。自社検証用kintoneで撮影した実機画面です。
「アプリを更新する前に、どの設定を変えたか確認したい」「計算式やルックアップの設定を、何度も開いて調べている」。そんな確認を、いつものkintone設定画面で補うために、kintone Config Lensを公開しました。変更点、設定の概要、フィールドコードをチップで表示する、無料・MITライセンスのTampermonkey用ユーザースクリプトです。
アプリを更新する前に、変更した場所を確認する
kintoneでは、設定を保存してから「アプリを更新」で運用中のアプリへ反映します。フォームだけでなく、通知やアクセス権も調整したとき、反映前に変更した場所を見返せると、確認の手がかりになります。
Config Lensの差分チップは、運用中の設定と、保存済みのプレビュー設定を比較します。追加・変更したフィールドにチップを表示し、詳細から変更内容を確認できます。選択肢の追加だけでなく、並び順の変更も比較できます。設定タブやメニューの「変更あり」表示は、フォーム以外を見直す入口になります。
対象は、フォーム項目・配置、一覧、プロセス管理、通知、アクセス権など、対応する16カテゴリです。この数はkintoneの全設定を網羅する意味ではありません。
比較するために「アプリを更新」を押す必要はありません。ただし、未保存の編集は比較対象外です。標準の保存操作で設定を保存し、Config Lensの「設定を再取得」で比較を更新してください。取得した時点の情報を使うため、その後の変更が自動ですべて反映されるわけではありません。
計算式やルックアップを、チップから確認する
「この項目は何を計算していたか」「どのアプリから、どの項目をコピーしているか」。設定を調べるたびに個別のダイアログを開く場面があります。
設定チップにマウスを重ねると、選択肢、計算式、ルックアップの参照先アプリ・キー・コピー先・絞り込み条件などの概要を確認できます。計算式のチップは短い「fx」表示にし、長い式を常時フォームへ並べない形にしています。
ルックアップとコピー先は、同じ色・番号で対応を示します。フォームの項目を見ながら、どこへ値が入る設定なのかを追うための補助になります。概要はよく確認する情報に絞っており、編集するときは引き続き標準の設定画面を使います。
ルックアップとコピー先の対応をチップで確認する実機画面です。
フォームの配置を見ながら、コードと要素IDを確認する
カスタマイズのコードを書くとき、画面上の項目とフィールドコードを照合したいことがあります。Config Lensでは、フォーム上にフィールドコードを表示できます。スペース・ラベル・罫線に設定された要素IDも確認できます。
必要な情報を見た後は、右下の切替からチップを非表示にできます。表示中は項目の高さが増える場合がありますが、すべてのチップを隠すと、そのための余白も除かれます。フォームの配置を確認する作業と、補助情報を見る作業を切り替えられます。
標準の操作を使いながら、必要な情報だけ補う
開発中には、チップが設定ボタンの操作を妨げたり、項目やテーブル内で重なったりすることがありました。そこで、短い表記、ホバーでの概要、配置、固定の表示切替を見直しました。補助情報を増やすだけでなく、標準の編集・保存を続けやすいことを重視しています。
使い方は、設定画面で「設定を読み込む」→必要なチップを表示して確認→標準UIで編集・保存→「設定を再取得」という流れです。取得は手動で行います。1回の取得では通常34回のGETリクエストを行い、取得済み情報のホバーや表示切替では追加取得しません。
このスクリプトは設定の書き込み、レコード取得、アプリ更新、外部サーバーへの設定情報の送信を行いません。比較結果の一時保持は同じタブで30分間で、バックアップや変更履歴の保存機能ではありません。
公開ベータとして、対象と制約を確認して使う
現在はv0.9.0の公開ベータです。PC版kintoneのアプリ設定画面で使い、対象の設定を閲覧できる権限が必要です。サイボウズの公式製品ではありません。
APIトークンやWebhookなど、比較対象外の設定があります。JavaScript・CSSは登録情報と順序を比較するもので、コード本文の差分は比較しません。プラグイン内部の設定・バージョンも対象外です。権限不足や取得失敗があるときは、表示がないことを「変更なし」の保証にはできません。
検証環境と未確認の範囲は公開READMEで案内しています。標準画面の構造に依存する補助表示なので、kintoneの更新で動かなくなる可能性もあります。反映するかどうかの判断は、実際の設定や業務への影響と合わせて行ってください。
導入手順と配布ファイルはGitHubへ
まずはGitHubのREADMEで導入条件と制約を確認してください。利用環境のルールに沿って、検証用アプリから使うことをおすすめします。
配布ファイルはGitHub ReleasesのkintoneConfigLens.user.jsです。Tampermonkeyへ登録して使用します。Source codeのZIPをkintoneへ読み込む手順ではありません。
不具合や改善案はGitHub Issuesへ。コードの改善に参加したい方は、開発への参加案内もご覧ください。