【Bubble】LINEメッセージ送信の実装方法
概要
LINEは日本では大変人気の高いメッセンジャーアプリです。企業・店舗用アカウントからメッセージを送信し、ビジネスにも活用されています。
今回はBubbleでLINEメッセージを送信する方法を解説します。
LINEメッセージ送信の実装方法
完成イメージ
Bubbleからテキストを入力し、自分宛にLINEメッセージを送れました。
![](https://swooo.net/wp-content/uploads/2023/03/01スクリーンショット-2023-01-23-22.41.46.png)
1. LINE Developersに登録する
LINE Developersに登録します。
まずメッセージを自分に送ってみたい場合は「LINEアカウントで登録」から進み、自身のLINEアカウントを紐づけてログインしてください。
![](https://swooo.net/wp-content/uploads/2023/03/02スクリーンショット-2023-01-23-21.55.55.png)
2. プロバイダーを作成する
LINE Developersにログイン後、プロバイダーを作成します。
![](https://swooo.net/wp-content/uploads/2023/03/03スクリーンショット-2023-01-23-22.01.26.png)
任意のプロバイダー名を設定し「作成」します。
![](https://swooo.net/wp-content/uploads/2023/03/04スクリーンショット-2023-01-23-21.43.28.png)
3. Messaging APIのチャネルを作成する
プロバイダー作成後、Messaging APIチャネルを作成します。
![](https://swooo.net/wp-content/uploads/2023/03/05スクリーンショット-2023-01-23-21.44.07.png)
登録情報を入力します。
ここで作成するMessaging APIとは、LINE公式アカウントとほぼ同義になります。
そのためチャネル名とは、メッセージを送信するアカウント名となります。
![](https://swooo.net/wp-content/uploads/2023/03/06スクリーンショット-2023-01-23-22.17.44.png)
![](https://swooo.net/wp-content/uploads/2023/03/07スクリーンショット-2023-01-23-22.18.16.png)
![](https://swooo.net/wp-content/uploads/2023/03/08スクリーンショット-2023-01-23-22.18.31.png)
すべて入力したら「作成」ボタンを押します。
これでLINE Developers側の準備は完了です。
4. プラグインをインストールする
続いてBubbleにて、プラグイン「LINE Message」をインストールします。
プラグイン設定のために、チャネルアクセストークンを発行します。
LINE Developersで作成したチャネル内の「Messaging API設定」タブを開きます。
![](https://swooo.net/wp-content/uploads/2023/03/09スクリーンショット-2023-01-23-22.24.00.png)
「チャネルアクセストークン(長期)」にてトークンを発行しコピーします。
![](https://swooo.net/wp-content/uploads/2023/03/10スクリーンショット-2023-01-23-21.48.57.png)
プラグインページに戻り、「Authorization (shared headers)」に、チャネルアクセストークンを貼り付けます。
続いて先頭に「Bearer 」と入力してください。(半角スペースがあることに注意してください)
「Authorization (shared headers) – dev.」にも同様に設定します。
![](https://swooo.net/wp-content/uploads/2023/03/11スクリーンショット-2023-01-23-21.36.46.png)
5. LINEメッセージ送信を実装する
Bubbleにてメッセージ送信機能を実装します。
メッセージを入力し送信するためのInput、Buttonを配置します。
更にメッセージ送信が分かりやすいよう、Textを配置し「This element is visible on page load」のチェックを外しておきます。
![](https://swooo.net/wp-content/uploads/2023/03/12スクリーンショット-2023-01-23-21.35.06.png)
続いてボタン押下時のWorkflowを設定します。
![](https://swooo.net/wp-content/uploads/2023/03/13スクリーンショット-2023-01-23-22.47.17.png)
When | Step | 意味 |
---|---|---|
Button 送信 is clicked | Plugins > LINE Message – Push call | LINEメッセージを送信する |
Element Actions > All elements > Show | textエレメント(送信完了メッセージ)を表示する | |
Element Actions > Input > Reset inputs | Inputの値をクリアする |
Step1: LINE Message – Push call
LINEメッセージを送信します。
「(body)uid」に、送信先アカウントのユーザーIDを入力します。
送信先である自分のユーザーIDを確認するために、LINE Developersチャネル内の「チャネル基本設定」タブを開きます。
![](https://swooo.net/wp-content/uploads/2023/03/14スクリーンショット-2023-01-23-22.56.25.png)
「あなたのユーザーID」という項目をコピーし「(body)uid」へ貼り付けます。
![](https://swooo.net/wp-content/uploads/2023/03/15スクリーンショット-2023-01-23-22.56.41.png)
「(body)text」には、配置したInputエレメントを指定します。
![](https://swooo.net/wp-content/uploads/2023/03/16スクリーンショット-2023-01-23-21.36.28.png)
以上で実装完了です。
プレビューにて、文字を入力し送信ボタンを押してみてください。
あなたのLINEアカウントヘメッセージが送信されます。
ℹ️ 自分以外のLINEアカウントのユーザーIDは、アプリ上でのLINEログインによって取得できます。LINEログインについては、こちらの記事で紹介しています。