ダウンロード機能の実装

突然ですが、みなさんが kintone を使う上で「これは使いづらいな」と感じる機能はありますか？

僕が kintone 上でアプリを開発する上で最もよく聞いた意見が、

「ダウンロード(CSV 出力)が使いづらい」

でした。

アプリを管理している方はダウンロード画面と似た UI を他の機能でも見かけるため、なんとなくわかるかと思いますが、ほとんどの方は 1 ヵ月に 1 度あるかないかぐらいだと思います。(本来はダウンロード自体しなくていいように業務フローを改善するべきかもしれませんが…)

なので今回は、煩雑なダウンロード機能を解決するため、独自で簡単にダウンロード機能を実装する方法をご紹介します。

ソースコード

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

const downloadAsCsv = (name, records) => {
  const keys = Object.keys(records[0]);

  const data = [keys, ...records.map((record) => keys.map((key) => record[key].value))];

  return download(name, data);
};

const download = (name, array) => {
  const bom = new Uint8Array([0xef, 0xbb, 0xbf]);
  const blob = new Blob([bom, array], { type: 'text/csv' });
  const url = (window.URL || window.webkitURL).createObjectURL(blob);

  const link = document.createElement('a');
  link.download = name + '.csv';
  link.href = url;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);

  return true;
};

実装例

画面表示時にダウンロード

あまり使う機会はないかもしれませんが、最もシンプルな実装です。

kintone.events.on('app.record.index.show', (event) => {
  downloadAsCsv('test.csv', event.records);

  return event;
});

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

アプリのヘッダーにボタンを設置し、クリックされた際に処理を実行します。

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

  const button = document.createElement('button');
  button.textContent = 'csv';
  headerMenuSpace.append(button);
  button.onclick = (clicked) => {
    downloadAsCsv('test.csv', event.records);
  };

  return event;
});