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

投稿日 2025年9月7日
更新日 2025年9月8日
著者 Masayuki Ohashi
カテゴリーデータベース

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

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

JavaScriptのコードです。

(function() {
    'use strict';

    // ダウンロード対象フィールド
    var fields = &#91;
        'フィールドコード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(/&#91;\\\/:*?"&lt;&gt;|]/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 = &#91;];
                csv.push(fields.join(','));
                allRecords.forEach(function(record) {
                    var row = fields.map(function(f) {
                        var val = record&#91;f] ? record&#91;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(&#91;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 = &#91;];
        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 &lt; limit) break;
            offset += limit;
        }
        return allRecords;
    }
})();

(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」となっています。

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

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

JavaScriptのコードです。

使い方と注意事項

kintone(キントーン)はWeb型データベースの覇者となり得るのか？

ちょっと便利なkintone(キントーン)用のJavaScriptを2つ

かなり便利なkintone(キントーン)用のJavaScriptを紹介

キントーン以外のノーコードツールを使ってみた