【簡単設定】LINE公式アカウントのデータをBubbleに自動的に連携する方法

LINEでユーザーが友だち追加されたらBubbleにThingを作成する

LINEとBubbleを連携させることで、新しい友だち追加時に自動的にBubbleのデータベースに情報を登録できるので、LINEを活用して顧客とのコミュニケーションを行っている方におすすめのフローです。

LINE公式アカウントとBubbleの連携フローを作ってみよう

それでは、さっそく実際にLINE公式アカウントとBubbleを連携したフローを作成してみましょう！
今回はYoomを使用して、ノーコードでLINE公式アカウントとBubbleの連携を進めていきますので、まだYoomのアカウントをお持ちでない場合は、こちらの登録フォームからアカウントを発行しておきましょう。

[Yoomとは]

今回はLINEでメッセージを受けとったらBubbleにThingを作成するフローボットを作成していきます！
作成の流れは大きく分けて以下です。

• LINE公式アカウントとBubbleをマイアプリ連携
• テンプレートをコピーする
• LINE公式アカウントのトリガー設定およびBubbleのアクション設定
• トリガーをONに設定しフロー稼働の準備完了

ステップ1：マイアプリ連携

ここでは、Yoomとそれぞれのアプリを連携して、操作が行えるようにしていきます。
まず、Yoomにログインしたあと左メニューにあるマイアプリを押し、右の新規接続というボタンを押します。

LINE公式アカウントの連携

1.検索する
‍‍検索ボックスにLINE公式アカウントと入力し、LINE公式アカウントのアイコンをクリックします。

2.ログインする
‍下記項目を入力し追加をクリックします。

• アカウント名：メールアドレスなど分かりやすいものを入力してください。
• アクセストークン：値の取得方法はヘルプページでご紹介していますので、そちらをご参照ください。

Yooｍの画面に戻り、下記の表示が出たら連携完了です！

Bubbleの連携

1.検索する
‍‍検索ボックスにBubbleと入力し、Bubbleのアイコンをクリックします。

2.ログインする
下記項目を入力したら「追加」をクリックしてください。

• アカウント名：Yoom上で表示されるアカウント名なので、分かりやすい任意の名称をつけてください。
• アクセストークン：下記の手順に沿ってアクセストークンをご確認ください。
  
  • Yoomと連携したいBubbleのアプリにアクセスします。
  • 左の歯車マークを押しセッティングページにアクセスします。
  • セッティングページ上にあるAPIタブを押し「APIs and Backend Workflows」の項目にチェックを付けます。
  • API Tokensのメニューで「Generate a new API token」を押し、新しいAPIトークンを生成し、Private keyと書かれた箇所のキーをコピーします。
  • Yoom画面に戻りアクセストークン欄に先ほどコピーしたキーを貼り付けます。
    ※詳細はこちらのヘルプページをご覧ください。

• サブドメイン：アクセストークンを取得する際に設定したAPIs and Backend Workflowsに表示されたURL内「https://●●●●.bubbleapps.～」の●●●●部分がサブドメインですので、こちらをコピーしYoomのサブドメイン欄に貼り付けてください。
  ※詳細はこちらのヘルプページをご覧ください。

Yooｍの画面に戻り、下記の表示が出たら連携完了です！

ステップ2：テンプレートコピーの話

次に、今回使用するテンプレートを下記よりコピーしてください。

1.上記バナーの「詳細を見る」をクリック
2.画面が切り替わったら「このテンプレートを試してみる」をクリック
3.Yoomの登録がまだの場合は、登録を行う
※既に登録が完了している場合はログイン画面が表示されるので、ログイン情報を入力してください。
4.下記のようにお使いのYoom管理画面にテンプレートがコピーされるので、OKを押して設定を進めていきます。

ステップ3：アプリトリガーの設定

1.赤枠の「ユーザーからメッセージを受けとったら」をクリック
‍LINE公式アカウントアイコンの「ユーザーからメッセージを受けとったら」をクリックします。
画面が遷移し、先ほどステップ1で入力した内容が反映されています。タイトルなどの修正が不要であれば、そのまま「次へ」をクリックします。

2.アプリトリガーのWebhookイベント受信設定
LINEでユーザーからメッセージを受けとるため、LINE公式アカウントの設定を行います。

• 下記画像の赤枠をクリックしURLをコピーします。
• こちらからログインし該当のチャネル作成がまだの方は新規チャネル作成を、すでに作成済の方は該当のチャネルをご選択ください。
• 「Messaging API設定」を選択し、「Webhook URL」に先ほどコピーしたURLを貼り付けし更新を押します。
• 検証をクリックし成功となれば完了です。

※詳しくはヘルプページの手順4からをご参照ください。

テスト操作前に、先ほど設定したチャネルにメッセージを送信してください。
今回は下記赤枠のようなメッセージを仮送信しました。

Yoom画面に戻り「テスト」をクリックしてください。
テスト成功となったら、下記画像のようにアウトプットが表示されます。
先ほどチャネルに仮送信した内容が反映していれば完了ですので、「保存」をクリックします。

ステップ4：アプリトリガーの設定

1.赤枠の「Thingを作成」をクリック
‍Bubbleアイコンの「Thingを作成」をクリックします。
画面が遷移し、先ほどステップ1で入力した内容が反映されています。タイトルなどの修正が不要であれば、そのまま「次へ」をクリックします。

2.API接続設定
Bubbleに反映するデータの設定を行います。

• データタイプ名：BubbleのDataページにアクセスし赤枠で囲った箇所がデータタイプ名です。
  なお、データタイプ名をYoom上で設定する際は以下のルールに則る必要があります。
  
  • 空白がないこと
  • 小文字であること
    ※詳しくはこちらのヘルプページにございます「データタイプ名の設定時の注意点」項目をご覧ください。

• フィールド名：この後に設定する値をフィールド名とすると分かりやすいです。例えば「起動日時」を値とする場合はフィールド名も「起動日時」とすると分かりやすいでしょう。
  

• 値：入力欄をクリックすると下記のように表示されますので、基本情報からお好みでご選択ください。
  

それ以降のフィールドと値の入力欄については、ユーザーID・メッセージID・メッセージテキストなど同じように設定してください。
「Thingを追加」をクリックすると入力欄を増やすことが出来ます。必要に応じて項目を増やしてください。

入力が完了したら「テスト」をクリックします。
テストが成功となりましたら、アウトプットが表示されます。
今回はテスト操作ができないため下記画像は仮のものとなりますが、アウトプットのフィールド名にLINEの内容が反映しているかご確認ください。
無事に反映していればページ下部の「保存」をクリックします。

ステップ5：トリガーをONにして動作確認

設定が完了したのでトリガーを「ON」にして、動作確認をしましょう。

LINE公式アカウントやBubbleのAPIを使ったその他の自動化例

LINE公式アカウントやBubbleのAPIを活用することで、様々な自動化の実現が可能になります。

LINE公式アカウントを使った自動化例

WordPressのコメント投稿をLINEに通知することや、受信した特定のキーワードを含むメッセージをX（Twitter）に自動投稿することができます。

Bubbleを使った自動化例

HubSpotのフォームで回答された内容をBubbleに反映することや、Bubbleに登録された情報をOutlookに自動通知することが可能です。

終わりに

いかがでしたか？LINE公式アカウントとBubbleを連携すれば、「メッセージ受信時の情報管理を自動化したい」「友だち追加のたびにデータベースを更新するのが面倒」「顧客対応の手間を減らしたい」といった課題の解決が期待できます。LINE公式アカウントでのやり取りをそのままBubbleに反映できることで、業務の効率化と抜け漏れ防止が実現できます。

<span class="mark-yellow">ノーコードツールYoomを活用すれば、プログラミングの知識がなくても、簡単にLINE公式アカウントとBubbleの連携を実現できます！</span>気になった方はまずは無料アカウントを作成して、実際に使い勝手を確かめてみてください。登録はたったの30秒で完了！すぐに自動連携を体験できます。

今すぐ無料でアカウントを発行する

毎日の業務をもっとラクにする、LINE公式アカウントとBubbleの連携フローを取り入れてみませんか？