ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。わからないことがあったら、コメントや Twitter などで聞いてください!

Bubble から LINE メッセージを送信する方法

f:id:toka-xel:20200707152830p:plain

こんにちは!ノーコード ラボの岡崎です。

今回は Bubble から LINE にメッセージを送信する方法についてまとめました。

LINE にメッセージを送信する場合、LINE の Messaging API を利用します。

前提条件

LINE

次のページを参考に LINE のチャネルを作成してください。

developers.line.biz

Bubble

新規アプリを立ち上げ、API Connector プラグインをインストールしてください。


設定方法

1. API Connector の設定

まずは、Bubble 側で API Connector の設定を行います。以下の LINE のドキュメントを参考にしています。

developers.line.biz

1.1 共通部分(認証)の設定

f:id:toka-xel:20200707134330p:plain

API の共通部分をまずは作っていきます。

項目 設定値
API Name LINE Messaging API(任意)
Authentication None or self-handled
Content-Type application/json
Authorization Bearer {channel access token}

{channel access token} は Developers Console で生成したアクセス トークンを記述します。

f:id:toka-xel:20200707135555j:plain

1.2 プッシュメッセージの設定

1人のユーザーに送信するプッシュメッセージの設定を行います。

f:id:toka-xel:20200707134345p:plain

項目 設定値
Name Push Call(任意)
Use as Action
POST https://api.line.me/v2/bot/message/push
Body type JSON
Body {
 "to" : "<uid>",
 "messages": [
  {
   "type": "text",
   "text": "<text>"
  }
 ]
}
text API Connector initialize(任意)
uid ご自分の LINE の UserId


Body parameters の text と uid の Private のチェックは外してください。
ご自分の LINE の UserId は次を確認してください。

f:id:toka-xel:20200707140741j:plain

また、LINE Developers の QR コードを読み取って、友達に追加してください。

f:id:toka-xel:20200707142835j:plain

ここまでできたら、Initialize call をクリックしてください。
うまく設定ができていたらご自分の LINE に「API Connector initialize」というメッセージが送信されるはずです。

1.3 注意点

パラメータの値を見ていただければ予想がつくとは思いますが、uid に LINE の UserId、text のところに送信したいメッセージをパラメータとして渡していただければ、好きなようにメッセージを送信することができるようになります。
ただし、メッセージを送信するには友達登録が必須になります。

また、LINE の UserId というのは、通常はわからないようになっています。
LINE ログインを利用すると Bubble のユーザーと LINE の UserId を結びつけることができますので、こちらもご参考ください。

blog.nocodelab.jp

2. Bubble エディターの設定

index ページに input ボックスと送信ボタンを配置します。

f:id:toka-xel:20200707144906p:plain

そして、送信ボタンの Workflow を設定します。

action の中の Plugins に LINE Messaging API - Push Call がありますので、クリックし、uid と text のパラメータを設定してください。

f:id:toka-xel:20200707150914j:plain

これで、input ボックスに送信したいメッセージを入れて、送信ボタンを押したら、メッセージを送ることができるようになります。


まとめ

思っていたよりも簡単に Bubble から LINE にメッセージを送信できるようになりました。
しかしながら、LINE の UserId と Bubble アカウントの紐付けが難しいです。
Bubble から LINE メッセージを送信するのであれば、LINE ログインを使うことも同時に考えた方が良さそうです。

それでは、また!