BubbleとGoogleスプレッドシートをAPIで連携し、Bubbleのデータベースからスプレッドシートへデータを流し込み、その後、エクセル形式に変換してダウンロードできる機能を実装する方法を解説します。
また、本メディアを運営する「EPICs株式会社」は、ノーコードを活用したアプリ・システム開発を行っております。大手ノーコードツールであるBubbleからも、公式代理店として認定されています。
従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。
- 開発期間をおよそ1/3に抑えられる → 検証や新規事業に向いている
- 開発費用をおよそ1/3に抑えられる → 浮いた費用を別の領域に利用できる
- リリース後の改修スピードも早い → PDCAを早く回せる
日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。
- 日本最大級のノーコード開発実績 → 高度な開発もスピーディー
- 複数のノーコードツールに対応 → 最適なツール選びで開発費用・期間を最大限抑えられる
- マーケティングまで支援が可能
プロが無料で提案
実装手順
- 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」などでユーザーに提供します。
- ボタンをクリックすることで、ユーザーがエクセルファイルを端末にダウンロードできる仕組みを作れます。
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内でダウンロード
という一連のデータ処理フローが構築可能になります。
特に、バックオフィス系システムや帳票出力機能を構築する場面で非常に有効です。
予期されるデータ量や利用ユーザーの行動パターンを想定した設計により、より安定性の高いアプリケーションの実現が可能となります。
