【Bubble開発】GoogleスプレッドシートからBubbleに数値を連携する実装

Bubbleで業務アプリや管理ツールを開発していると、Googleスプレッドシートに保存された数値データを条件付きで読み取り、Bubbleアプリ上に反映させたいという場面は多くあります。

この記事ではGoogle Sheets APIとBubbleを連携し、Googleスプレッドシートの特定行から数値を取得してBubbleに表示する方法を解説します。

実装イメージ動画

実装手順

1. Google Sheets API連携設定（OAuth2 & Bearerトークン取得）
2. 条件でレスポンスをフィルタ
3. 該当行から金額を抽出し、Bubbleの入力欄に表示

実装方法

Google Sheets APIの連携設定

BubbleからGoogleスプレッドシートの内容を取得するには、Google Sheets APIにリクエストを送る必要があります。
そのために、以下3つの情報をGoogle APIに伝える設定をします。

画像のAPI設定内容

項目	設定内容	意味・説明
(path) spreadsheetId	対象のGoogleスプレッドシートのID	対象のGoogleスプレッドシートのID（URLに含まれる）例： https://docs.google.com/spreadsheets/d/この部分がID/edit
(path) range	読込用!A2:D100	読み込むセル範囲（シート名＋セル範囲）例：シート名が「読込用」で、A2〜D100を読み込む
(header) Authorization	Bearer Search for GoogleTokens:first item’s access_token	Google APIを使うための認証トークン（access_token）Googleログインを使ってBubble内で取得したトークンを自動挿入している

※ この処理を行う前に、ユーザーが「Googleとの連携」を済ませておく必要があります。

たとえば「Google連携」ボタンを作成し、そこにOAuth2認証を行うワークフローを設定しておくことで、Googleからaccess_tokenを取得できます。

このトークンが取得されて初めて、APIでスプレッドシートの内容を安全に取得できるようになります。

Googleとの連携の流れ

• Google連携用のボタンを設置
• ボタンのワークフローに「Signup/Login with a social network」を追加
• Provider（プロバイダー）： Google
• Access scopes：https://www.googleapis.com/auth/spreadsheets.readonly （※必要に応じて）
• Redirect URL：自動設定でOK（必要なら指定）

条件を選択しAPIを実行

ユーザーがBubbleアプリ内で条件を選択し、連携ボタンを押すとGoogle Sheets APIが呼び出されてデータが取得されます。

操作の流れ

1. ドロップダウンなどで条件を選択
2. 「連携」ボタンを押す
3. ワークフローが実行され、API ConnectorのSheets APIが実行
4. 読込用!A2:D100 のセル範囲がGoogleから返される

今回の実装だと、「手当」を選択し、加算用ドロップダウン「インセンティブA」を選択、連携ボタンを押すと、Sheets APIが呼び出され、指定範囲のデータが取得されています。

レスポンスを条件で一致する行をフィルタリング

Google Sheets APIから返ってきたデータ（行のリスト）は、そのままでは全件分の情報が含まれている状態です。
その中から、「ユーザーが選んだ条件（例：ユーザーID・カテゴリ・年月）に一致する1行だけ」を抽出する必要があり、List filterでAdvancedを使ってフィルタリングします。

簡単にまとめると画像では下記を実行しています。

Advanced filter:
– item 1: UserのIDと一致
 – item 2: 手当ID（Dropdownの値）と一致
  – item 3: 年月（例：202503）と一致

※Google Sheets APIは行ごとのデータを配列で返します。A列が item 1、B列が item 2、C列が item 3… という形で扱われるため、それぞれの条件を item 単位で指定することでフィルタが可能になります。

また、フィルタで抽出された1行のデータは、「Display data」アクションを使って、表示用のグループに渡す必要があります。
この設定を行わないと、フィルタ結果を画面に表示することができません。

具体的には

• Element： g result（データを受け取る対象グループ）
• Data to display： Result of step 3’s values:filtered:first item（条件に一致した最初の1行）

このように設定することで、次のステップで「g result」内のデータを元に、 入力欄の Initial content に Parent group’s values item 1:last item と記述し、金額（D列の値）を自動的に表示する処理へとつながっていきます。

該当データをBubbleに表示

フィルタで絞り込まれた行の中から、最終的に取得したい数値（例：金額や点数など）を、Bubble上の入力欄やテキスト欄に表示します。

この部分では、Sheets APIのレスポンス結果を「g result」などのグループ要素に紐づけて格納します。

項目	設定値	説明
要素	g result	データを保持する親グループ
Type of content	Get Incentive Call value	APIから返ってきたレスポンスの型
Data source	filtered:first item	条件一致した1行目のデータのみを対象とする設定

入力欄の初期値設定

実際に画面に表示される金額は、「g result」内の配列から最後の列の値（D列＝金額）を取り出して表示します。

項目	説明
values item 1	取得した1行（values の1行目）を表す
last item	その中の最後の項目（D列：金額）を抽出

補足：なぜ「last item」か？

Google Sheets APIは通常、指定範囲のデータを配列で返します。今回のように最後の列（D列）の値が金額の場合、
values item 1:last item を指定することで該当行の金額だけを抽出可能です。