CSVをJavaScriptでちょっぴり柔軟に出力したい！！！
と思うことがありますよね。
今日はJavaScriptを出力する機能を作ってみましょう。
ちょっと長め＆重めです💦
アプリの準備
kintone アプリストアから、顧客リストを「サンプルデータを含める」にチェックを付けて作成します。
JavaScript
JavaScript全体のコードはこちら
kintoneのレコード一覧CSVファイルダウンロードするスクリプト
ボタンをつける
こちらの記事を参考にボタンを設置します。
【kintone】アプリの「スペース」フィールドにボタンを設置する
ボタンの機能の中身は↓のようにしておいてください。
//ボタンをクリックしたときの動作
btn.onclick=()=>{
//CSVダウンロード
dlCsv();
}
encoding.js
Cybozu CDN
↓こちらを「JavaScript / CSSでカスタマイズ」の設定に追加しておきます。
https://js.cybozu.com/encodingjs/1.0.30/encoding.min.js
CSVを出力する機能を書く
↓こちらを参考にkintoneのレコードをCSVファイルに書き込むようなコードにしてみました。
解説は後述します。
参考：
ファイルをダウンロード保存する方法
ブラウザからjsの配列をcsvとしてダウンロードする。
javascriptで文字コード変換
// 1.CSVファイル生成用
const HEADER =['会社名','部署名','担当者名','郵便番号','TEL'];//CSVに出力したいフィールドのフィールドコード
// CSVをダウンロード
const dlCsv = async ()=>{
//フィールド名からCSVの文字列データを作る
const setHeaderData = () => {
let headerData = '';
HEADER.forEach(h => {
headerData += h + ',';
});
headerData += '\r\n';
return headerData;
};
//レコードからCSVの文字列データを作る
const recordToCsvData = records => {
let rowData = '';
records.forEach(r => {
HEADER.forEach(h => {
rowData += r[h].value + ',';
});
rowData += '\r\n';
});
return rowData;
};
//URLエンコード
const createDataUriFromString = str => {
// 文字列を配列に変換
const array = str.split('').map(s => s.charCodeAt());
// エンコード
const sjis_array = Encoding.convert(array, 'SJIS', 'UNICODE');
const uInt8List = new Uint8Array(sjis_array);
return uInt8List;
};
//2. CSVにしたいレコードを取得する
const param_get = {
app:kintone.app.getId(),
//query:'出力フラグ != 1', // 絞り込みたいときはクエリを書く"出力フラグ = 0" など
};
const obj_get = await kintone.api('/k/v1/records','GET',param_get);
const targetRecords =obj_get.records;
//3. レコード1件以上だったらCSV出力
if (targetRecords.length > 0) {
//4. CSVにするテキストデータを作成
const str = createDataUriFromString( setHeaderData() + recordToCsvData(targetRecords));
//5. CSVファイル作成
const blob = new Blob([str], {type:"text\/csv"});
const url = URL.createObjectURL(blob);
//6. ダウンロード処理
const a = document.createElement("a");
document.body.appendChild(a);
a.download = "test.csv";//ここすきなファイル名に
a.href = url;
a.click();
a.remove();
URL.revokeObjectURL(url);
// // 出力フラグをONにするようなコードはこのへんに
// let param_records = [～,～, ～,～];
// const param_upd = {
// app:kintone.app.getId(),
// records:param_records,
// };
// const obj_put = await kintone.api('/k/v1/records','PUT',param_upd);
}
}
CSVダウンロードの流れ
ざっくり解説ですが、流れとしてはこの順で実行します。
- 設定の定数
- CSVにしたいレコードを取得する
- レコード1件以上だったらCSV出力するIF文（レコード無ければ終了）
- CSVにするテキストデータを作成
- CSVファイル作成
- ダウンロード処理
一つずつ見ていきます。
1.設定の定数
HEADER に、出力したいフィールドのフィールドコードを配列で書いておきます。
// CSVファイル生成用
const HEADER =['会社名','部署名','担当者名','郵便番号','TEL'];//CSVに出力したいフィールドのフィールドコード
2.CSVにしたいレコードを取得する
出力したいCSVの元になるレコードを取りに行きます。
ここで、アプリに「出力フラグ」などを準備しておくと、queryに未出力のレコードを指定できたりします。
たとえばquery:'出力フラグ != 1',など・・・。
targetRecords = obj_get.records;の部分でレコードの配列が代入されます。
//CSVにしたいレコードを取得する(1)
const param_get = {
app:kintone.app.getId(),
//query:'出力フラグ != 1', // 絞り込みたいときはクエリを書く
};
const obj_get = await kintone.api('/k/v1/records','GET',param_get);
const targetRecords = obj_get.records;
3.レコード1件以上だったらCSV出力
2.で取得したレコードが1件以上だったら出力しましょう
//レコード1件以上だったらCSV出力(2)
if (targetRecords.length > 0) { ～～
4.CSVにするテキストデータを作成
上の方でたくさん定義してあるCSV作成のための関数を使っています。
関数たちはこちらを参考に書いています。
参考：
ブラウザからjsの配列をcsvとしてダウンロードする。
javascriptで文字コード変換
//CSVにするテキストデータを作成
const str = createDataUriFromString( setHeaderData() + recordToCsvData(targetRecords));
5.CSVファイル作成
4.で作ったstrをCSV「ファイル」にします。
5.6.は↓のサイトを参考にしています。
参考：ファイルをダウンロード保存する方法
//CSVファイル作成(4)
const blob = new Blob([str], {type:"text\/csv"});
const url = URL.createObjectURL(blob);
6.ファイルのダウンロード処理
ダウンロードするときは、aタグを隠してクリックして削除するという流れなんですね。勉強になりました。
//ダウンロード処理(5)
const a = document.createElement("a");
document.body.appendChild(a);
a.download = "test.csv";//ここすきなファイル名に
a.href = url;
a.click();
a.remove();
URL.revokeObjectURL(url);
まとめ
今回はとにかくダウンロードしてみる。という仕組みを紹介しました。
工夫を加えると、「CSVファイルをダウンロードしたらフラグを立てる」というような仕組みも作れます。
コメントアウト部分も参考にされると良いかもしれません！？
是非挑戦してみてくださいね＾０＾
以上です。