【kintone】Javascriptでダウンロード機能を独自実装する

KintoneJavaScript

last modified date 2021-8-16

2021-8-15

こんにちは、リビットです。

突然ですが、みなさんが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;
  }
);