kintoneの添付ファイルをJSZipで一括ダウンロードしよう
はじめに
kintoneにファイルをいっぱい詰め込んだんだけど、ファイルのダウンロードはひとつずつしかできないと嘆いている、そこのアナタに朗報です!
Cybozu CDN
に登録されている
JSZip
を用いて、添付ファイルをZipファイルで一括ダウンロードする方法を紹介します。
添付ファイルの一括ダウンロード/アップロードなどの操作について、kintoneコマンドラインツールを使ったやり方の説明記事もあります。
興味のある方は
添付ファイルをダウンロード・アップロード・削除してみよう
を確認してください。
ライブラリ
今回は一括ダウンロードをより簡単に実装するため、Cybozu CDN外のライブラリを利用します。
そのような場合は、いったんファイルをダウンロードしてからアプリに適用しましょう。
また、今回紹介する記事で確認したライブラリのバージョンは以下のとおりです。
-
JSZip v3.10.1
… ファイルをZip化するために利用します。
-
JSZipUtils v0.1.0
… ファイルのダウンロード時に利用します。
-
FileSaver.js v2.0.4
… ファイルの保存時に利用します。
JSZipUtilsと、FileSaver.jsはgithub上で公開されているものを取得する方法をおすすめします。
デモ環境
デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/264/
ログイン情報は cybozu developer networkデモ環境 で確認してください。
一括ダウンロードのしくみ
今回kintoneからファイルを一括ダウンロードする処理順序は以下のとおりです。
kintone上の添付ファイルをダウンロードするためには、レコードの取得とURL生成が必要です。
この点に関しては以下のサンプルで紹介していますので、参考にしましょう。
また、「レコードの取得」、「URLの作成」、「ファイルのダウンロード」は非同期通信で行われる点に注意しましょう。
JavaScriptソースコード
ソースコード
|
|
ソースコード解説
一覧画面に一括ダウンロードボタンを配置し、ボタンの押されたタイミングでgetZipFile関数が呼ばれます。
このgetZipFiles関数にて、async/awaitで非同期処理を実装しています。
これにより、getFileKeysにレコードの一括取得(getAppRecords)の結果のオブジェクトが渡り、filekeyの一覧を抽出しています。
その後も同様に処理を重ねて、必要な情報を後処理に渡してつなげていきます。
使い方
ソース上部のfieldCodeの値を添付ファイルのフィールドコードに変更する必要があります。
変更した後、JSファイル(以下例ではdownload.js)をアップロードしましょう。
注意事項
- ファイル名に日本語を含んでいる場合、文字化けすることがあります。
- 本サンプルではレコードの取得は100件までとなっています。
- 本サンプルはサブテーブルの添付ファイルには対応していません。
- FileSaver.jsの制限事項として、ブラウザーによってファイルサイズに上限があります。
- エラー処理が不十分のため、実装の際はご留意ください。
おわりに
今回は一括ダウンロードの手法を紹介しました。
最低限の機能実装でも結構なボリュームがありますが、この後レコードごとにフォルダーを分けたり、ファイル名を可変にしたり、いろいろな拡張ができると思います。
いろいろなカスタマイズを行い、ぜひともコミュニティへご投稿ください!
このTipsは、2025年7月版kintoneで動作を確認しています。
