【Bubble】CSVでRepeatingGroupのデータを出力する方法

ノーコードツールBubbleの無料プラグインを用いて、ボタンクリック時にRepeatingGroupのデータをCSVファイルでダウンロードする機能の実装方法をご紹介します。

以下に当てはまる方にはぜひ、読み進めていただきたいです！

• RepeatingGroupのデータをワンクリックでCSV出力したい人
• CSVファイルを開いたときに、Windowsでも文字化けしないようにしたい人
• 無料プラグインでサクッと簡単にCSVファイルダウンロード機能を実装してみたい人

実装イメージ

添付画像のように、画面上のボタンをクリックしたときに、RepeatingGroupのデータをCSVファイルでダウンロードできる機能を実装します。json形式でキーと値を自由に指定可能です。

今回のサンプルのエレメントツリーも一応添付しておきます。

画面上の構成はいたってシンプル。RepeatingGroupとCSV出力のトリガーとなるButtonエレメントを設置しているだけです。

BubbleでCSVファイルダウンロード機能を実装する方法

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

プラグイン「CSV Download Coverter」をインストール

プラグイン追加ページで、csv downloadと検索するとヒットする、CSV Download Coverterというプラグインをインストールします。

CSV Download Coverterのプラグインページ：https://bubble.io/plugin/csv-download-coverter-shift-jis-1649895805314×598569727070568400

※すごく細かいですが、変換を意味する英語スペルはconverterなので、プラグイン名はnが漏れているのは意図してなのか…。

ボタンクリック時にPlugins ＞ csv downloadアクションを設定する

CSVファイルダウンロードしたいデータを表示するRepeatingGroupを画面に設置し、CSV出力のトリガーとなるボタンも用意してください。準備ができたら、ボタンクリック時にワークフローのcsv downloadアクションを設定しましょう！

json形式とtext形式が用意されています。この記事ではjson形式での実装方法をご紹介。

file_nameとjson_dataを入力して完了！

プラグインCSV Download Coverterのcsv downloadアクションを選択すると、上の添付画像のような設定画面が表示されます。file_nameにはお好みでダウンロードされるファイル名を設定してください。以下のサンプルではアンダースコアの後で今日の日付をyyyymmdd形式でつけるように設定してます。

json_data欄には出力したいRepeatingGroupをList of 〜:format as textで指定します。

:format as textを選択すると、下の添付画像のような設定画面が開かれるので、json形式（キーと値）で設定してあげましょう！

Delimiter欄には、,（カンマ）を入れましょ。

ここまでの設定が完了したら、プレビューで実際にボタンクリックしてみて正常にCSVファイルダウンロードされるか確認しましょう！今回も最後までお付き合いいただきありがとうございました！

別のプラグイン「1T CSV creator」でもCSV出力を実装可能です。今回紹介したプラグインと比べると工程は多め。