この記事では、自動化ツールIntegromatを使用して、ノーコードツールBubbleの入力データをGoogleスプレッドシートに送信する方法を解説します。Webhookを使用することで、BubbleのワークフローからIntegromatのシナリオを実行でき、ユーザーが「送信」ボタンを押したら、Googleスプレッドシートにデータが送られる。といった使い方が可能です。
目次
用意するアカウント
以下３つのアカウントを用意して下さい。APIを使用するため、Bubbleの有料プランが必須です。（こちらをご覧ください：Bubbleの料金は？）
- Integromat（https://www.integromat.com）
- Bubble（https://bubble.io）
シナリオの作成
１．Webhookの設定
“Webhooks – Custom webhook”モジュールから始めます。
Webhook > Addから、任意の接続名称を入力し、”Save”をクリックします。
表示されたURLを後ほど使いますので、コピーしておきます。
２．入力フォームの作成
本記事ではBubbleで入力されたユーザー情報をGoogleスプレッドシートに送信します。
送信するデータは氏名、電話番号、住所の３つで、以下のデータ構造で作成します。
（本記事ではField typeを全てtextデータにしていますが、適宜変更して下さい。）
入力フォームと送信ボタンを作成します。
３．Bubbleの設定
外部APIと接続するために、”API Connector”プラグインをインストールします。
“Add another API”をクリックし、以下の通りに各項目を指定します。
- Use as : “Action”を選択
- Data type : JSON
- メソッド：POST
- URL : IntegromatのWebhookでコピーしたURLを貼り付ける
- Body type : Form-data
- Parameters : “Key”にユーザー情報のData fieldを指定し、”Value”は適当な値を入力
- Private : チェックボックスを外す
“Initialize call”をクリック。
エラーが表示されるので、”GOT IT”をクリック。
Integromatを確認。Webhookのモジュールに”Successfully determined”が表示されます。
BubbleのSettings > API > Public API endpointsから、”Enable Workflow API and backend workflows”, “Enable Data API”のチェックをします。
送信するデータタイプにチェックをします。
４．Googleスプレッドシートの設定
Webhookモジュールの”OK”をクリックします。
Google Sheets – Add a Row”モジュールを追加。
Connection > Addをクリック、任意の名称を入力し、”Continue”をクリック
連携したいGoogleアカウントを選択し、連携を認証する。
スプレッドシートを作成します。
IntegromatのGoogle Sheetsモジュールで対象のスプレッドシートを選択します。
各列にWebhookからのデータを指定します。
“OK”をクリックして、Google Sheetsの設定は完了です。
５．Bubbleの設定＆ワークフローの作成
“Run once”をクリックし、作成したシナリオを一回だけ実行します。
BubbleのAPI Connecterプラグインから、先ほど設定したAPIの”Initialize call”をクリックします。
エラーメッセージが表示されます。これは一旦そのままにします。
Integromatのシナリオを確認すると、正常に実行されたことが分かります。
Googleスプレッドシートにもデータが送信されてます。
Bubbleのエラーメッセージ”GOT IT”をクリックし、”Manually enter API response”をクリックします。
“{}”（半角）を入力し、”SAVE”をクリックします。
“SAVE”をクリックします。
続いてBubble側で「Googleスプレッドシートに送信」ボタンを押したときのワークフローを作成します。
“Start/Edit workflow”をクリックします。
“plugin”アクションから作成したAPIの名称をクリックします。
各パラメータに”Dynamic content”で入力フォームのデータを指定します。
これでシナリオが完成しました。
実行結果
シナリオを実行した状態で、Bubbleのプレビューからフォームに情報を入力します。
「Googleスプレッドシートに送信」ボタンをクリックします。
データの送信に成功しました！
以上がIntegromatのWebhookで、Bubbleの入力データをGoogleスプレッドシートに送信する方法です。
