JSZipを使って添付ファイルを一括ダウンロードしよう

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生成が必要です。

この点に関しては以下のサンプルで紹介していますので、参考にしましょう。

ファイルダウンロードで必須となる2つの手順

また、「レコードの取得」、「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で確認したものになります。