《Bubble》LINEメッセージを送信する実装方法（プラグイン）

LINEメッセージ送信の実装方法

完成イメージ

Bubbleからテキストを入力し、自分宛にLINEメッセージを送れました。

１． LINE Developersに登録する

LINE Developersに登録します。

まずメッセージを自分に送ってみたい場合は「LINEアカウントで登録」から進み、自身のLINEアカウントを紐づけてログインしてください。

２． プロバイダーを作成する

LINE Developersにログイン後、プロバイダーを作成します。

任意のプロバイダー名を設定し「作成」します。

３．Messaging APIのチャネルを作成する

プロバイダー作成後、Messaging APIチャネルを作成します。

登録情報を入力します。

ここで作成するMessaging APIとは、LINE公式アカウントとほぼ同義になります。

そのためチャネル名とは、メッセージを送信するアカウント名となります。

すべて入力したら「作成」ボタンを押します。

これでLINE Developers側の準備は完了です。

４．プラグインをインストールする

続いてBubbleにて、プラグイン「LINE Message」をインストールします。

プラグイン設定のために、チャネルアクセストークンを発行します。

LINE Developersで作成したチャネル内の「Messaging API設定」タブを開きます。

「チャネルアクセストークン（長期）」にてトークンを発行しコピーします。

プラグインページに戻り、「Authorization (shared headers)」に、チャネルアクセストークンを貼り付けます。

続いて先頭に「Bearer 」と入力してください。（⚠️半角スペースがあることに注意してください）

「Authorization (shared headers) – dev.」にも同様に設定します。

５． LINEメッセージ送信を実装する

Bubbleにてメッセージ送信機能を実装します。

メッセージを入力し送信するためのInput、Buttonを配置します。

更にメッセージ送信が分かりやすいよう、Textを配置し「This element is visible on page load」のチェックを外しておきます。

続いてボタン押下時のWorkflowを設定します。

ステップ１：LINE Message – Push call

LINEメッセージを送信します。

「(body)uid」に、送信先アカウントのユーザーIDを入力します。「(body)text」には、配置したInputエレメントを指定します。

送信先である自分のユーザーIDを確認するために、LINE Developersチャネル内の「チャネル基本設定」タブを開きます。

「あなたのユーザーID」という項目をコピーし「(body)uid」へ貼り付けます。

ステップ２：Element actions→Show→Text メッセージを送信しました

ステップ３：Element actions→Reset inputs

以上で実装は完了です。

６．LINE友達登録

最後に、LINE Developersの「Messaging API」チャネルより、「Messaging API設定」のタブのQRコードを使って自分のLINEアカウントへ友達登録をしておきましょう。

⚠️友達登録をしておかないとBubbleから送信されたメッセージは確認できません。

プレビューにて、文字を入力し送信ボタンを押してみてください。

あなたのLINEアカウントヘメッセージが送信されます。

📍自分以外のLINEアカウントのユーザーIDは、アプリ上でのLINEログインによって取得できます。LINEログインについては、こちらの記事で紹介しています。