ノーコードツールBubbleの無料プラグインを用いて、ボタンクリック時にRepeatingGroupのデータをCSVファイルでダウンロードする機能の実装方法をご紹介します。
以下に当てはまる方にはぜひ、読み進めていただきたいです！
- RepeatingGroupのデータをワンクリックでCSV出力したい人
- CSVファイルを開いたときに、Windowsでも文字化けしないようにしたい人
- 無料プラグインでサクッと簡単にCSVファイルダウンロード機能を実装してみたい人
また、本メディアを運営する「EPICs株式会社」は、ノーコードを活用したアプリ・システム開発を行っております。大手ノーコードツールであるBubbleからも、公式代理店として認定されています。
従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。
- 開発期間をおよそ1/3に抑えられる → 検証や新規事業に向いている
- 開発費用をおよそ1/3に抑えられる → 浮いた費用を別の領域に利用できる
- リリース後の改修スピードも早い → PDCAを早く回せる
日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。
- 日本最大級のノーコード開発実績 → 高度な開発もスピーディー
- 複数のノーコードツールに対応 → 最適なツール選びで開発費用・期間を最大限抑えられる
- マーケティングまで支援が可能
プロが無料で提案
実装イメージ
添付画像のように、画面上のボタンをクリックしたときに、RepeatingGroupのデータをCSVファイルでダウンロードできる機能を実装します。json形式でキーと値を自由に指定可能です。
今回のサンプルのエレメントツリーも一応添付しておきます。
画面上の構成はいたってシンプル。RepeatingGroupとCSV出力のトリガーとなるButtonエレメントを設置しているだけです。
BubbleでCSVファイルダウンロード機能を実装する方法
以下の手順で実装します。
- プラグイン「CSV Download Coverter」をインストール
- ボタンクリック時にPlugins ＞ csv downloadアクションを設定する
- file_nameとjson_dataを入力して完了！
プラグイン「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ファイルダウンロードされるか確認しましょう！今回も最後までお付き合いいただきありがとうございました！
