【Bubble開発】API経由でデータ更新&エクセルエクスポートする方法～Bubble × Googleスプレッドシートの連携～

Koki Okuma

BubbleとGoogleスプレッドシートをAPIで連携し、Bubbleのデータベースからスプレッドシートへデータを流し込み、その後、エクセル形式に変換してダウンロードできる機能を実装する方法を解説します。

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

ノーコード開発お役立ち資料3点セット

計100ページ近い大ボリュームでノーコード開発について解説

ノーコード開発会社の選び方
EPICsのノーコード受託開発の特徴
支援実績・事例集

実装手順

Googleスプレッドシートのテンプレートを作成
Google Drive APIでそのテンプレートを複製
複製したスプレッドシートのIDを取得
Google Sheets APIでBubbleのデータをスプレッドシートに反映
Drive APIでそのスプレッドシートをExcel形式に変換
Bubbleアプリ内からダウンロード可能にする

実装方法

Google APIの準備

まずはGoogle Cloud Consoleにて、必要なAPIの有効化と認証情報の取得を行います。

Google Cloud Consoleにアクセスし、新しいプロジェクトを作成します。
「APIとサービス」>「ライブラリ」から以下のAPIを有効化します。
- Google Sheets API
- Google Drive API
「認証情報」メニューより「サービスアカウント」を作成し、JSON形式のキーをダウンロードします。
データを書き込むGoogleスプレッドシートの「共有設定」を開き、上記サービスアカウントのメールアドレスを「編集者」として追加します。

Bubble側の設定

Google APIと通信するために、BubbleのAPI Connectorプラグインを利用します。

Bubbleエディタ内の「Plugins」タブから「API Connector」をインストール。
新しいAPIを追加し、以下の情報を設定します。
- Base URL: https://sheets.googleapis.com/v4/spreadsheets
- 認証方式: OAuth2.0（サービスアカウントを使う場合はAccess Tokenを取得して設定）

スプレッドシートのコピー

テンプレートスプレッドシートをGoogle Drive APIを使ってコピーします。

エンドポイント

POST https://www.googleapis.com/drive/v3/files/{TEMPLATE_SPREADSHEET_ID}/copy

リクエストボディ

{

“name”: “Copied Spreadsheet”,

“parents”: [“{FOLDER_ID}”]

}

このリクエストで、指定したフォルダにスプレッドシートが複製され、そのレスポンスから新しいスプレッドシートのIDを取得します。

Bubbleのデータをスプレッドシートに反映

複製されたスプレッドシートに対して、Bubbleのデータベースから取得したデータを反映させます。

エンドポイント

POST https://sheets.googleapis.com/v4/spreadsheets/{NEW_SPREADSHEET_ID}/values:batchUpdate

リクエストボディ:

{

“valueInputOption”: “RAW”,

“data”: [

{

“range”: “Sheet1!A1:D5”,

“values”: [

[“ID”, “Name”, “Email”, “Status”],

[“1”, “John Doe”, “john@example.com”, “Active”],

[“2”, “Jane Doe”, “jane@example.com”, “Inactive”]

]

}

]

}

rangeはA1記法で指定し、どのセルに書き込むかを明示します。
valuesは2次元配列形式で、行ごとにデータを設定します。
Bubbleでは「Do a search for」でデータを取得し、「formatted as JSON」などを使って構造を整えてからAPIに渡すのが一般的です。

スプレッドシートをExcel形式に変換

Drive APIを使用し、スプレッドシートをエクセルファイルとしてエクスポートします。

エンドポイント:

GET https://www.googleapis.com/drive/v3/files/{FILE_ID}/export?mimeType=application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

このリクエストでは、対象のGoogleスプレッドシートを.xlsx形式でエクスポートします。
バイナリデータが返されるため、Bubbleのファイルストレージに保存する処理を追加します（Upload file API等を使う）。

Bubbleでダウンロード可能にする

保存されたエクセルファイルを、ユーザーがダウンロードできるように設定します。

Bubbleでファイルを保存する際は「File」型としてデータベースに保持する。
保存後に得られるファイルURLを「Download」ボタンや「Open external website」などでユーザーに提供します。
ボタンをクリックすることで、ユーザーがエクセルファイルを端末にダウンロードできる仕組みを作れます。

＜無料＞資料ダウンロード

【ノーコード開発】お役立ち資料３点セット

「ノーコード開発会社の選び方」「EPICs株式会社ノーコード開発の実績集」
「受託開発サービス概要」が同梱されたお役立ち資料セット

Google APIの制限

レート制限

Google APIにはアクセス制限が設けられています。

1ユーザーあたり：秒間最大100リクエスト
1プロジェクトあたり：秒間最大100リクエスト
429エラーが返された場合、数秒待機後に再試行（Exponential backoff）が推奨されます。

スプレッドシートの技術的制約

Googleスプレッドシートには以下のような制限があります。

最大1000万セル
最大200シート
ファイルサイズ最大100MB これらの制限を超える場合、データを複数シートに分割するなどの工夫が必要です。

まとめ

Google API & Bubble API Connectorを連携することで、

Bubble DB → Google Sheets
Google Sheets → Excel
Excel → Bubble内でダウンロード

という一連のデータ処理フローが構築可能になります。

特に、バックオフィス系システムや帳票出力機能を構築する場面で非常に有効です。

予期されるデータ量や利用ユーザーの行動パターンを想定した設計により、より安定性の高いアプリケーションの実現が可能となります。

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

【Bubble開発】API経由でデータ更新&エクセルエクスポートする方法～Bubble × Googleスプレッドシートの連携～

実装手順