日本発ノーコードアプリ開発ツール『Click』

【中級者向け】IntegromatのWebhookで、Bubbleの入力データをGoogleスプレッドシートに送信する|ノーコード開発ナレッジ【Integromat/Bubble】

この記事では、自動化ツールIntegromatを使用して、ノーコードツールBubbleの入力データをGoogleスプレッドシートに送信する方法を解説します。Webhookを使用することで、BubbleのワークフローからIntegromatのシナリオを実行でき、ユーザーが「送信」ボタンを押したら、Googleスプレッドシートにデータが送られる。といった使い方が可能です。

用意するアカウント

以下3つのアカウントを用意して下さい。APIを使用するため、Bubbleの有料プランが必須です。(こちらをご覧ください:Bubbleの料金は?

シナリオの作成

1.Webhookの設定

“Webhooks – Custom webhook”モジュールから始めます。

Webhook > Addから、任意の接続名称を入力し、”Save”をクリックします。

表示されたURLを後ほど使いますので、コピーしておきます。

2.入力フォームの作成

本記事ではBubbleで入力されたユーザー情報をGoogleスプレッドシートに送信します。

送信するデータは氏名、電話番号、住所の3つで、以下のデータ構造で作成します。

(本記事ではField typeを全てtextデータにしていますが、適宜変更して下さい。)

 

入力フォームと送信ボタンを作成します。

3.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”のチェックをします。

送信するデータタイプにチェックをします。

4.Googleスプレッドシートの設定

Webhookモジュールの”OK”をクリックします。

Google Sheets – Add a Row”モジュールを追加。

Connection > Addをクリック、任意の名称を入力し、”Continue”をクリック

連携したいGoogleアカウントを選択し、連携を認証する。

スプレッドシートを作成します。

IntegromatのGoogle Sheetsモジュールで対象のスプレッドシートを選択します。

各列にWebhookからのデータを指定します。

“OK”をクリックして、Google Sheetsの設定は完了です。

5.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スプレッドシートに送信する方法です。