CSVインポート時に対応づけない項目を強調するときのsnippet

小技・ナレッジの共有
1

kintoneのアプリにデータをCSVをWebUIからインポートしたいときに、たまたまCSV内のデータで上書きしたくない項目が混じることがあります。（アプリのフィールドとCSVのカラムが一致しているなど）

インポートの設定画面でCSVの列とアプリのフィールドの対応を確認できますが (指定しない)項目の表記との区別がつきづらいです。

コード

for (const element of document.querySelectorAll('.goog-inline-block.goog-menu-button-caption')) {
    if (element.textContent.trim() === '（指定しない）') {
        const parentRow = element.closest('tr'); // 最も近いtr要素を取得
        if (parentRow) { // 見つかった場合
            parentRow.style.backgroundColor = '#d3d3d3'; // 薄い灰色
        }
    }
}

をWebブラウザのsnippetに登録するか、コンソールに貼り付けるなどして実行して、インポートしない行の表示を変更します。

実行例

image
image923×801 42.6 KB

制限：指定しないという文言かどうかで判断しているので、一度、指定しない状態で実行したあとに、CSVのカラムと対応づけても灰色の項目は灰色になったままです。再読み込みが必要です。

「いいね！」 3
2

社内で他の人がやっていたことの受け売りですが……

Chrome だとページ内検索をするとその文字列がハイライトされるので、フィールドが多いアプリではこの方法で確認してました。

image
image1017×558 24.5 KB

ただ、これだと1つの文字列しか色が付けられないので、例えば「売上金額(当期)」「粗利金額(当期)」「売上金額(前期)」「粗利金額(前期)」「売上金額(前々期)」「粗利金額(前々期)」みたいな同じような名前のフィールドが大量にあって見分けがつきづらいアプリに定期的に CSV インポートしないといけない……とかの時に一発で色付けられるブックマークレットを作っておくと楽そうですね。

「いいね！」 3
3

検索してハイライトは思いつきませんでした。

前提が変わってきますが、CSVの列名とフィールドが合っていない時に紐付け忘れに気づきたいという意図もあったかももしれません。

CSVにあるが対応づけていない浮いている項目がないか？

image
image587×352 18.5 KB

事前にCSV側変更しておけば、cli-kintoneなどから更新できるから手間がかからないような気がしました。

「いいね！」 1
4

image

この部分でも紐付けができているかは、フィールド名とCSVの列名を表示してくれているらしいことをこのJavaScriptを適用している途中で気づいた。ただ、項目数が増えると画面の横スクロールが厳しい。

「いいね！」 1
5

確かに、 CSV 側の列名と kintone のフィールド名が違ったら色を変えるという挙動のほうが、汎用的でブックマークレットとしては使い勝手良さそうですね。

あとは、新デザインがそろそろ来そうなので、その対応もできたら完璧……

「いいね！」 1