kintoneにファイルをいっぱい詰め込んだんだけど、ファイルのダウンロードは一つずつしかできないと嘆いている、そこのアナタに朗報です!
Cybozu CDNに登録されているJSZipを用いて、添付ファイルをZipファイルで一括ダウンロードする方法をご紹介いたします。
はじめに
今回は一括ダウンロードをより簡単に実装するため、Cybozu CDN外のライブラリを利用します。
そのような場合は、一旦ファイルをダウンロードしてからアプリに適用しましょう。
また、今回紹介する記事で確認したライブラリのバージョンは以下の通りです。
- JSZip(v3.1.5) … ファイルをZip化するために利用します。
- JSZipUtils(v0.0.2) … ファイルのダウンロード時に利用します。
- FileSaver.js(v1.3.4) … ファイルの保存時に利用します。
JSZipUtilsと、FileSaver.jsはgithub上で公開されているものを取得する方法をオススメいたします。
(FileSaver.jsのv1.3.6以降を利用する場合、ソースからビルドする必要があります。 )
一括ダウンロードの仕組み
今回kintoneからファイルを一括ダウンロードする処理順序は以下の通りです。
kintone上の添付ファイルをダウンロードするためには、レコードの取得とURL生成が必要です。
この点に関しては以下のサンプルで紹介していますので、参考にしましょう。
また、「レコードの取得」、「URLの作成」、「ファイルのダウンロード」は非同期通信で行われる点に注意しましょう。
JavaScriptソースコード
ソースコード
ソースコード解説
一覧画面に一括ダウンロードボタンを配置し、ボタンが押されたタイミングでgetZipFile関数が呼ばれます。
このgetZipFiles関数にてプロミスチェーンを実装し、処理順序を明確にしています。
プロミスを利用すると処理順序が明確になり、非同期処理を簡単に扱えます。
また、then()に関数を渡すと、関数の第一引数に前のプロミスの返り値の内容が渡される仕組みを利用しています。
これにより、getFileKeysにレコードの一括取得(getAppRecords)の結果のオブジェクトが渡り、filekeyの一覧を抽出しています。
その後も同様に処理を重ねて、必要な情報を後処理に渡して繋げていきます。
使い方
ソース上部のfieldCodeの値を添付ファイルのフィールドコードに変更する必要があります。
変更した後、JSファイル(以下例ではdownload.js)をアップロードしましょう。
注意事項
ファイル名に日本語が含まれている場合、文字化けが発生することがあります。
本サンプルではレコードの取得は100件までとなっております。
本サンプルはサブテーブルの添付ファイルには対応しておりません。
FileSaver.jsの制限事項として、ブラウザによってファイルサイズに上限があります。
Windows Chromeのバージョン67にて動作を確認しております。
エラー処理が不十分な部分がありますので、実装される際はご留意のほどお願いいたします。
最後に
今回は一括ダウンロードの手法を紹介させていただきました。
最低限の機能実装でも結構なボリュームがありますが、この後レコードごとにフォルダを分けたり、ファイル名を可変にしたり、ファイルのダウンロード中はspin.jsを利用するなど色々な拡張ができると思います。
色々なカスタマイズを行い、是非ともコミュニティへご投稿ください!
デモ環境
https://dev-demo.cybozu.com/k/264/
※デモ環境についての説明はこちら
このTipsは、2018年6月版 kintoneで確認したものになります。
お世話になっております。
この記事を参考に実装して、実行したところ、「saveAs is not defined」のエラーになってしまいます・・・
https://github.com/eligrey/FileSaver.js/blob/master/src/FileSaver.js
を使っています。何かわかれば教えていただけると助かります・・・
自己解決しました。https://github.com/eligrey/FileSaver.js/blob/master/src/FileSaver.js の先頭の
export var saveAs = saveAs の「export」を削除して、jszip のURLを
https://js.cybozu.com/jszip/v3.1.5/jszip.min.js
にしたところ、動きました。また、本ページの注意事項のところに「ファイル名に日本語が含まれている場合、文字化けが発生します」と記載がありますが、Firefoxで実行したところ、文字化けせずにダウンロードできました!ので共有しておきます♫
佐藤様
フィードバックをありがとうございます。
以下の点、確認して反映いたします。
>https://github.com/eligrey/FileSaver.js/blob/master/src/FileSaver.js の先頭の
export var saveAs = saveAs の「export」を削除して、
>jszip のURLを
https://js.cybozu.com/jszip/v3.1.5/jszip.min.js
>本ページの注意事項のところに「ファイル名に日本語が含まれている場合、文字化けが発生します」と記載がありますが、Firefoxで実行したところ、文字化けせずにダウンロードできました!
ご担当者様
宜しくお願いいたします。
※ 因みに、Firefoxとは、MacのFirefoxです。(WindowsのFirefoxでは文字化けしてしまいました)