ダウンロード機能の実装

kintone 標準の CSV 出力は項目や文字コードの選択が必要で、「毎回同じ形式で、ボタン 1 つでダウンロードしたい」という要望をよく聞きます。

この記事では、JavaScript カスタマイズで一覧画面にダウンロードボタンを設置し、表示中のレコードを CSV としてダウンロードする方法を紹介します。

注意点

• 一覧画面の event.records で取得できるのは、現在表示されているページ分のレコードです（1 ページあたり最大 100 件程度）。全件をダウンロードしたい場合は REST API でレコードを全件取得する必要があります。
• 標準機能を代替するものではありません。権限に応じた項目制御は、ユーザーが閲覧できるレコードのみが event.records に含まれる範囲で行われます。

ソースコード

実装の中心となるコードです。

const toCell = (value) => {
  // チェックボックスや複数選択など、配列の値は改行で連結
  const text = Array.isArray(value) ? value.join('\n') : (value ?? '');
  // ダブルクォートはエスケープし、全体を囲む
  return `"${String(text).replace(/"/g, '""')}"`;
};

const downloadAsCsv = (name, records) => {
  if (records.length === 0) return;

  const keys = Object.keys(records[0]);

  const rows = [keys, ...records.map((record) => keys.map((key) => record[key].value))];
  const csv = rows.map((row) => row.map(toCell).join(',')).join('\r\n');

  // BOM を付けることで、Excel で開いたときの文字化けを防ぐ
  const bom = new Uint8Array([0xef, 0xbb, 0xbf]);
  const blob = new Blob([bom, csv], { type: 'text/csv' });
  const url = URL.createObjectURL(blob);

  const link = document.createElement('a');
  link.download = `${name}.csv`;
  link.href = url;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
};

ポイントは次のとおりです。

• BOM 付き UTF-8：Excel で開く際の文字化けを防ぎます。
• ダブルクォートのエスケープ：値にカンマや改行、" が含まれていても CSV が崩れません。
• フィールド値の型：チェックボックスなど配列の値は改行区切りの文字列にしています。ユーザー選択やテーブルなどオブジェクト・配列の入れ子になる項目は、用途に合わせて value の中身を整形してください。
• 項目コード：1 行目には項目コード（フィールドコード）が出力されます。項目名にしたい場合は、フォーム項目の取得 API で変換してください。

実装例

ダウンロードボタンを設置

一覧画面のヘッダーにボタンを設置し、クリックされた際にダウンロードします。

kintone.events.on(['app.record.index.show', 'mobile.app.record.index.show'], (event) => {
  const app = kintone.app || kintone.mobile.app;
  const headerSpace = app.getHeaderMenuSpaceElement?.() || app.getHeaderSpaceElement();

  // 画面の再描画で重複して設置されないようにする
  if (!headerSpace || headerSpace.querySelector('#csv-download-button')) return event;

  const button = document.createElement('button');
  button.id = 'csv-download-button';
  button.textContent = 'CSV';
  button.onclick = () => downloadAsCsv('records', event.records);
  headerSpace.append(button);

  return event;
});

画面表示時に自動でダウンロードする実装も可能ですが、ユーザーの意図しないダウンロードになるため、基本的にはボタンから実行することをおすすめします。