カテゴリー内の他の記事

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

フォローする

kintoneにファイルをいっぱい詰め込んだんだけど、ファイルのダウンロードは一つずつしかできないと嘆いている、そこのアナタに朗報です!
Cybozu CDNに登録されているJSZipを用いて、添付ファイルをZipファイルで一括ダウンロードする方法をご紹介いたします。

はじめに

今回は一括ダウンロードをより簡単に実装するため、Cybozu CDN外のライブラリを利用します。
そのような場合は、一旦ファイルをダウンロードしてからアプリに適用しましょう。
また、今回紹介する記事で確認したライブラリのバージョンは以下の通りです。 

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)をアップロードしましょう。

JSUpload_05.png

 

注意事項

ファイル名に日本語が含まれている場合、文字化けが発生することがあります。

本サンプルではレコードの取得は100件までとなっております。

本サンプルはサブテーブルの添付ファイルには対応しておりません。

FileSaver.jsの制限事項として、ブラウザによってファイルサイズに上限があります。

Windows Chromeのバージョン67にて動作を確認しております。

エラー処理が不十分な部分がありますので、実装される際はご留意のほどお願いいたします。

 

最後に

今回は一括ダウンロードの手法を紹介させていただきました。

最低限の機能実装でも結構なボリュームがありますが、この後レコードごとにフォルダを分けたり、ファイル名を可変にしたり、ファイルのダウンロード中はspin.jsを利用するなど色々な拡張ができると思います。

色々なカスタマイズを行い、是非ともコミュニティへご投稿ください!

 

デモ環境

https://dev-demo.cybozu.com/k/264/

※デモ環境についての説明はこちら

 

このTipsは、2018年6月版 kintoneで確認したものになります。

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
佐藤

お世話になっております。

この記事を参考に実装して、実行したところ、「saveAs is not defined」のエラーになってしまいます・・・

https://github.com/eligrey/FileSaver.js/blob/master/src/FileSaver.js

を使っています。何かわかれば教えていただけると助かります・・・

 

Avatar
佐藤

自己解決しました。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で実行したところ、文字化けせずにダウンロードできました!ので共有しておきます♫

 

Avatar
cybozu Development team

佐藤様

フィードバックをありがとうございます。

以下の点、確認して反映いたします。

>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で実行したところ、文字化けせずにダウンロードできました!

 

Avatar
佐藤

ご担当者様

宜しくお願いいたします。

※ 因みに、Firefoxとは、MacのFirefoxです。(WindowsのFirefoxでは文字化けしてしまいました)

ログインしてコメントを残してください。