【Bubble】ファイルのアップロード中にローディングアニメーションを表示する方法

2024年5月31日

著者：大熊滉希
ノーコード特化のアプリ/システム開発事業を展開するEPICsの代表。
前職にて新規事業コンサルティングを行う企業で役員を歴任した後、
最小の経営資源で開発を行えるノーコードに可能性を感じEPICsを創業。

運営会社：EPICs合同会社
日本最大級の開発実績を誇るノーコード特化のアプリ/システム開発会社。
最安30万円・最短2週間から、BubbleやAdaloなど多様なツールの中からニーズに合わせた最適な開発を提案・実施している。Adalo公認エキスパートも在籍。

ノーコードツールBubbleでUploader系エレメントからファイルをアップロードするときに、アップロード処理中にはローディングアニメーション（GIF）を表示させる方法を紹介します。

Bubbleではファイルのアップロード中に画面上部にプログレスバーが表示されますが、それだけだとユーザーの待ち時間のストレスが大きいです。別途用意したローディングGIfなどを表示するといった少しの工夫でユーザーに与える印象がずいぶん変わってきますよね。

BubbleのPictureUploaderエレメントやFileUploaderエレメントに備わっているプロパティを活用すれば誰でも簡単に実装できるので、ぜひチャンレンジしてみてください！

無料で資料をダウンロード

日本最大級のノーコード開発実績

ノーコード開発サービスのご案内

実装イメージ

PictureUploaderエレメントからファイルをアップロードしたときに、画像のアップロード処理中にはクルクルアニメーション（ローディングGIF）を表示させ、アップロード処理が完了したらローディングを非表示にするのが今回の実装イメージです。

サンプル動画ではPictureUploaderエレメントを使っていますが、もちろんFileUploaderエレメントでも同様に実装できるのでご安心ください。

以下の手順で実装します。

まずはファイルアップロード中に表示するローディング部分を作成します。

今回はBubbleのPopupエレメントを使います。画面上にPopupエレメントを設置しましょう。

Popupの中身の背景色はデフォルトで白になっていますが、今回はサンプルのように背景色なしでいきたいので、Background styleをNoneに設定します。Shadowも不要なのでNoneにします。

次の項でPopup内にImageエレメントを設置して上下中央揃えにしたいので、Container layoutはAlign to parentに設定します。

Popupエレメントの中にImageエレメントを設置し、ご自身で用意したクルクルアニメーション（ローディングGIF）をアップロードして設定しましょう。

次にファイルアップロード中にローディングアニメーション用のPopupエレメントを表示するワークフローを設定していきます。ここで大活躍するのが今回の主役、PictureUploaderエレメントの状態を示すプロパティの１つである「is loading is yes/no」です。

ファイルがアップロードされている間、is loading プロパティは yes になります。アップロードが完了すると、プロパティは no に変わります。

したがって、添付画像のように、Do when PictureUploader is loading is yes のときに、Show Popupというワークフローを組めばOKです！

最後に、ファイルアップロード完了時にPopupローディングを非表示にするワークフローを組んであげましょう。

ファイルアップロード中の判定で使用したPictureUploaderエレメントのis loadingの今度はis noを活用します！

添付画像のように、Do when PictureUploader is loading is no のときに、Hide Popupというワークフローを組めばOKです！

以上でBubbleでファイルのアップロード中にローディングアニメーションを表示する方法の解説終了です。お疲れ様でした！

「勉強になった！」「役に立った！」と思っていただけたら、是非シェアもお願いします！