
【kintone】Javascriptでダウンロード機能を独自実装する
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;
}
);