ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。わからないことがあったら、コメントや Twitter などで聞いてください!

Bubble で簡単にファイルの zip & ダウンロードができる Zip and download files プラグイン

f:id:MKCHI:20211206104402p:plain

こんにちは!
Bubble で簡単に複数ファイルを zip 化してダウンロードしたいと思ったことはありませんか?
今回は、無料の Zip and download files プラグインを利用して、複数ファイルを圧縮してダウンロードする方法をご紹介します。
とても簡単に利用できるので、おすすめです。

Zip and download files プラグインとは

Zip and download files プラグインは、単一/複数ファイルを圧縮してダウンロードするプラグインです。
AWS S3(Bubble アプリのファイル格納場所)に保存されているファイルも、AWS 上に保存されていないファイルも、両方ダウンロードすることができます。

bubble.io

Zip and download files プラグインの利用方法

ここからはプラグインの利用方法について紹介してきます。

プラグインのインストール

Plugins タブで「Zip and download files」を検索し、インストールします。

f:id:MKCHI:20211202102312p:plain

事前準備

まずは User Type にダウンロード用項目の「file」と「image」の2つのフィールドを追加します。
今回は、「image」は単一ファイルのダウンロードに使用し、「file」は複数ファイルのダウンロードに使用しています。

f:id:MKCHI:20211202103437p:plain

フィールド追加後、App Data ダブに移動し、User Type のデータを作成していきます。

f:id:MKCHI:20211202103626p:plain

1つのファイルをダウンロード

まずは、単一ファイルをダウンロードしたい場合について紹介します。

f:id:MKCHI:20211202110910g:plain

Button を押したタイミングでダウンロードしたいので、Button を追加します。
また、ダウンロードパス確認用の Text も配置します。(Text は配置しなくても構いません)

f:id:MKCHI:20211202104616p:plain

Text には今回ダウンロードしたいデータを表示しておきます。

f:id:MKCHI:20211202104636p:plain

先程追加した Button のワークフローで、「Click here to add an action」を押し「Plugins」の「Download files」を選択します。

f:id:MKCHI:20211202105253p:plain

「To download a single file, use field 3)」の欄に、今回ダウンロードするファイルを指定します。

f:id:MKCHI:20211202110523p:plain

プレビューして配置した Button を押すと、指定したファイルがダウンロードされます。

複数のファイルをダウンロード

次に、複数ファイルをダウンロードする場合について紹介します。

f:id:MKCHI:20211202111651g:plain

単一ファイルのダウンロードと同様に、Button を配置します。
また、ダウンロードパス確認用の Text も配置します。(Text は配置しなくても構いません)

f:id:MKCHI:20211202111837p:plain

Text には今回ダウンロードしたいデータを表示します。

f:id:MKCHI:20211202111940p:plain

先程追加した Button のワークフローで、「Click here to add an action」を押し「Plugins」の「Download files」を選択します。

f:id:MKCHI:20211202112426p:plain

「For multiple files use fields 1) and 2)」欄の「1) File Name」に、今回ダウンロードする zip ファイル名を指定します。
「2) List of files to zip」に圧縮するファイルリストを指定します。

f:id:MKCHI:20211202112637p:plain

プレビューして配置した Button を押すと、指定したファイルが zip で圧縮されてダウンロードされます。

まとめ

Bubble 上に保存していないファイル(File Uploder で選択した状態の画像やファイルなど)も 同じように zip 化してダウンロードできるので便利ですよね。
ファイルサイズが大きくなるとダウンロードに時間がかかるので、プログレスバーなどを表示しても良いかもしれません。
Bubble で簡単にファイルを圧縮してダウンロードしたい方、一度使利用してみてはいかがでしょうか。