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

2025年5月16日

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

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

実装イメージ動画

また、本メディアを運営する「EPICs株式会社」は、ノーコードを活用したアプリ・システム開発を行っております。大手ノーコードツールであるBubbleからも、公式代理店として認定されています。

従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。

開発期間をおよそ1/3に抑えられる → 検証や新規事業に向いている
開発費用をおよそ1/3に抑えられる → 浮いた費用を別の領域に利用できる
リリース後の改修スピードも早い → PDCAを早く回せる

日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。

ノーコード開発サービスについて詳しく知る

EPICs株式会社の特徴

日本最大級のノーコード開発実績 → 高度な開発もスピーディー
複数のノーコードツールに対応 → 最適なツール選びで開発費用・期間を最大限抑えられる
マーケティングまで支援が可能

ざっくりの課題でも
プロが無料で提案

実装手順

Google Sheets API連携設定（OAuth2 & Bearerトークン取得）
条件でレスポンスをフィルタ
該当行から金額を抽出し、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が呼び出されてデータが取得されます。

操作の流れ

ドロップダウンなどで条件を選択
「連携」ボタンを押す
ワークフローが実行され、API ConnectorのSheets APIが実行
読込用!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行目のデータのみを対象とする設定