キントーンの一覧画面に「CSVダウンロード」のボタンを表示するJavaScript

キントーンのファイル書き出し（CSVのエキスポート）って使いにくいですよね。
頻繁にCSVをダウンロードされているお客様から「一覧画面にCSVをダウンロードするボタンを作って」との要望がありました。最初は検索したらすぐにプラグインかJavaScriptが見つかると思っていたのですが、これが意外と無かったのでChatGPTに手伝ってもらって作りました。

このJavaScriptを使うと、下記のようなボタンが表示されます。
ぱっと見でよく目立つし、わかりやすいですね。

JavaScriptのコードです。

(function() {
    'use strict';

    // ダウンロード対象フィールド
    var fields = [
        'フィールドコード1',
        'フィールドコード2',
        'フィールドコード3',
        'フィールドコード4',
        'フィールドコード5',
        'フィールドコード6'
    ];

    // 一覧画面にボタン設置
    kintone.events.on('app.record.index.show', function () {
        if (document.getElementById('downloadCsvBtn')) return;

        var myIndexButton = document.createElement('button');
        myIndexButton.id = 'downloadCsvBtn';
        myIndexButton.innerText = 'CSVダウンロード';
        myIndexButton.className = 'kintoneplugin-button-normal';
        kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);

        // ボタンクリック時
        myIndexButton.onclick = async function () {
            try {
                var appId = kintone.app.getId();

                // 1. アプリ情報を取得してアプリ名を取り出す
                var appResp = await kintone.api('/k/v1/app', 'GET', { id: appId });
                var appName = appResp.name.replace(/[\\\/:*?"<>|]/g, '_');

                // 2. ファイル名を作成
                var date = new Date();
                var y = date.getFullYear();
                var m = ('0' + (date.getMonth() + 1)).slice(-2);
                var d = ('0' + date.getDate()).slice(-2);
                var fileName = appName + '_' + y + m + d + '.csv';

                // 3. 一覧の条件を取得
                var condition = kintone.app.getQueryCondition() || '';

                // 4. 条件に従って全件取得
                var allRecords = await fetchAllRecords(appId, condition);

                // 5. CSV生成
                var csv = [];
                csv.push(fields.join(','));
                allRecords.forEach(function(record) {
                    var row = fields.map(function(f) {
                        var val = record[f] ? record[f].value : '';
                        return '"' + (val ? val.replace(/"/g, '""') : '') + '"';
                    });
                    csv.push(row.join(','));
                });

                // 6. Shift-JISに変換
                var sjisArray = Encoding.convert(Encoding.stringToCode(csv.join('\r\n')), 'SJIS', 'UNICODE');
                var blob = new Blob([new Uint8Array(sjisArray)], { type: 'text/csv' });

                // 7. ダウンロード処理
                var link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = fileName;
                link.click();

            } catch (err) {
                alert('エラー: ' + err.message);
            }
        };
    });

    // 一覧条件に従って全件取得
    async function fetchAllRecords(appId, condition) {
        var allRecords = [];
        var limit = 500;
        var offset = 0;
        while (true) {
            var query = condition + ' limit ' + limit + ' offset ' + offset;
            var resp = await kintone.api('/k/v1/records', 'GET', {
                app: appId,
                query: query,
                fields: fields
            });
            allRecords = allRecords.concat(resp.records);
            if (resp.records.length < limit) break;
            offset += limit;
        }
        return allRecords;
    }
})();

使い方と注意事項

• 上記コードをテキストファイルに貼り付け、適度なファイル名（csvdownload.js など）に変更して下さい。
• 「フィールドコード1～6」の部分を、ダウンロードしたい実際のフィールドコード名とその数に合わせて修正して下さい。
• スクリプトをキントーンの「アプリを設定」→「設定」→「JavaScript / CSSでカスタマイズ」にアップロードして下さい。
• なお文字コードにShift-JIS（Excelで文字化けしにくい）を使用していますので、encoding.jsが必要です。
  上記のリンクからencoding.min.jsをダウンロードして、当スクリプトより先に読み込ませて下さい。
• 「CSVダウンロード」ボタンを押すと、一覧条件で絞り込まれた状態のCSVをダウンロードします。
  ※全件をダウンロードしたい場合は一覧条件を「（すべて）」にして行って下さい。
• ダウンロードされるCSVのファイル名は「アプリ名_YYYYMMDD.csv」となっています。

なお当スクリプトによって問題が発生しても、一切の責任を負いかねますのでご了承ください。