皆さんこんにちは！今回はノーコード ラボで開発した以下2つのプラグインについて紹介していきます。
- LINEアカウントによるソーシャルログインを実現する「LINEログイン」のプラグイン
- BubbleからLINEへメッセージを送信できる「LINEメッセージ送信」のプラグイン
LINE LOGIN Aggressive プラグイン（2022/4/25 追記）
LINE のお友達登録をしやすくするために、bot_prompt=aggressive を設定し、ログイン後、お友達登録ができるプラグインを作成しました。ログインだけでなくメッセージも LINE で送ろうと考えている方はこちらの方が使いやすいかもしれません。 LINE LOGIN プラグインとほぼ同じで、bot_prompt=aggressive だけが違うプラグインになります。
なお、bot_prompt=aggressive の時の画面遷移はこちらをご参考ください。
- LINE LOGIN Aggressive プラグイン（2022/4/25 追記）
- 背景
- 事前準備
- LINE LOGINプラグインの利用手順
- LINE Messageプラグインの利用手順
- まとめ
- 英語訳版（2020/12/15追記）
背景
以前の記事で紹介したとおり、Auth0や既存のプラグインを使用することで、LINEのソーシャルログインやメッセージ送信機能を実現することができます。
blog.nocodelab.jp
blog.nocodelab.jp
しかし、こちらは少し手順が複雑だったため、もっと簡単に直接LINEと接続できるプラグインがあれば便利だと思い立ち、今回こちらに関連するプラグインを開発させてもらいました。（間に入るサービスが多いほど、メンテナンスが大変ですしね）
それでは早速、使い方を見ていきましょう！
事前準備
プラグインインストール
Bubbleで新規アプリを作成し、pluginsタブより「LINE LOGIN」「LINE Message」の2つのプラグインをインストールしましょう。「LINE」のキーワードで検索すれば見つかります。
※画像では「testing」と表示されていますが、こちらはプラグインテスト時の表示ですので通常は表示されません
それぞれ設定値を入れる必要がありますが、こちらは後ほど説明します。
LINE Developersの登録
以下のサイトより、LINE Developersの登録を行ってください。すでにアカウントを登録している方は次の手順へ移りましょう。
developers.line.biz
LINE Developersにてプロバイダー・チャネルの作成
LINE Developersの登録が完了したら、プロバイダーを作成します。プロバイダー名は任意のもの（個人名や企業名などでOK）を設定します。
今回はテスト用に「Bubble plugin確認」としました。
次にチャネルを作成します。今回は「LINEログイン」と「Messaging API」の2つのチャネルを作成します。
LINEログイン
まずはLINEログインのチャネルを作成します。登録項目は以下の表の通りです。
| 項目 | 設定内容 |
|---|---|
| チャネルの種類 | LINEログインを選択 |
| プロバイダー | 先ほど作成したプロバイダーを選択 |
| チャネルアイコン | 任意 |
| チャネル名 | チャネルの名前を入力 |
| チャネル詳細 | チャネルの説明を入力 |
| アプリタイプ | ウェブアプリを選択 |
| メールアドレス | 自分のメールアドレスを入力（デフォルトのままでOK） |
| プライバシーポリシーURL | 任意 |
| サービス利用規約URL | 任意 |
LINE Developers Agreement に同意のチェックをして作成ボタンを押せば完了です。
Messaging API
Messaging APIのチャネルも同様に新規作成します。登録項目は以下の表の通りです。
| 項目 | 設定内容 |
|---|---|
| チャネルの種類 | Messaging APIを選択 |
| プロバイダー | 先ほど作成したプロバイダーを選択 |
| チャネルアイコン | 任意 |
| チャネル名 | チャネルの名前を入力 |
| チャネル詳細 | チャネルの説明を入力 |
| 大業種 | 作成するサービスの業種を選択 |
| 小業種 | 作成するサービスの業種を選択 |
| メールアドレス | 自分のメールアドレスを入力（デフォルトのままでOK） |
| プライバシーポリシーURL | 任意 |
| サービス利用規約URL | 任意 |
LINE公式アカウント利用規約およびLINE公式アカウントAPI利用規約に同意のチェックをして作成ボタンを押します。
ここまで出来たら事前準備は完了です。
LINE LOGINプラグインの利用手順
それではLINE LOGINプラグインを使って、LINEアカウントのソーシャルログインを確認してみましょう。
プラグイン設定値の入力
先ほど作成したBubbleアプリのpluginsタブより「LINE LOGIN」を選択し、設定値を入力します。入力内容は以下の表を参考にしてください。
| 項目 | 設定内容 |
|---|---|
| App ID/API Key | 先ほど作成したLINEログインチャネルの「チャネルID」 |
| App Secret | 先ほど作成したLINEログインチャネルの「チャネルシークレット」 |
| App ID/API Key - dev. | App ID/API Keyと同じ |
| App Secret - dev. | App Secretと同じ |
Use a generic redirect URLにもチェックを入れてください。
コールバックURL登録
LINE Developersのページより、作成した「LINEログイン」チャネルの「LINEログイン設定」のタブからコールバックURLを登録します。登録するURLは「https://{作成したBubbleアプリの名称}.bubbleapps.io/api/1.1/oauth_redirect」としてください。
更新ボタンを押して完了です。あわせて、チャネルを非公開→公開に変更しておきましょう。
画面作成
Bubbleアプリへ戻ります。前回の記事と同様に、ログインボタンを配置する index ページと、ログイン後の users ページを作成していきます。
indexページ
Buttonより「LINEアカウントでサインイン」ボタンを作成します。
ワークフローは以下の2つです。
- ページロード時に既にログインされていたら user ページへ遷移する
- 「LINEアカウントでサインイン」ボタンをクリックしたら、user ページへ遷移する
ページロード時にはOnly whenに「Current User is logged in」の条件を入れておきましょう。
次に「LINEアカウントでサインイン」ボタンを押したときの動きです。Account で「Signup/login with a social network」を選択し、OAuth provider に「LINE Login」を選択しましょう。Step2はusersページへ遷移するだけでOKです。
usersページ
ログイン後に遷移させるusers画面も作成していきます。今回も画面上に、LINEのアイコン画像、LINE ID、アカウント名を表示させてみます。
アイコン画像の表示にはImageエレメントを配置します。設定値はDynamic imageから「Get data from an external API」を選択後、「API provider」に「LINE Login - User」を設定し、返却値に「's picture Url」を選択します。
LINE IDの表示にはTextエレメントを配置します。設定値は「Current User's LINE Login's Id」です。
またアカウント名の表示も同様にTextエレメントを配置します。設定値はInsert dynamic dataから「Get data from an external API」を選択後、「API provider」に「LINE Login - User」を設定し、返却値に「's displayName」を選択します。
また、今回もログアウトボタンを配置しておきましょう。
ワークフローは以下の2つです。
- ページロード時にログインされていない場合はindexページへ遷移する
- ログアウトボタンをクリックしたら、ログアウトし、indexページへ戻る
これでLINE LOGIN確認の準備は完了です！
プレビューから確認
それでは早速「LINEアカウントでサインイン」ボタンを押してみます。
LINEのログイン画面に遷移します。
初回のみ、認証確認があります。
ログイン後、usersページに遷移して、無事にアイコン、LINE ID、アカウント名が取得できました！
公式アカウントと友達登録しているかどうかを確認する（2021/7/7 追記）
公式アカウントと友達登録しているかどうかを確認できるようにしました。
この機能を利用するためには LINE ログインのチャネルに LINE 公式アカウントをリンクする必要があります。
まずは次のリンクを参照して、リンクされたボットを設定してください。
developers.line.biz
この状態で LINE ログインをした後、「Get data from an external API」を選択後、「API provider」に「LINE Login - Friendship status」、続いて「's friendFlag」を選択します。
この値は友達登録していたら yes、友達登録していなかったら no が返ってきますので、友達登録していない場合は友達登録を促すなどに利用することができます。
ぜひ、お試しください！
LINE Messageプラグインの利用手順
引き続き、LINE Messageプラグインを使って、BubbleアプリからLINEへメッセージを送信してみましょう。
プラグイン設定値の入力
Bubbleアプリのpluginsタブより「LINE Message」を選択し、設定値を入力します。
先ほどLINE Developersで作成したMessaging APIチャネルのMessaging API設定タブより「チャネルアクセストークン」を発行します。
「Bearer+{半角スペース}+発行したチャネルアクセストークン」をプラグインの「Authorization (shared headers)」および「「Authorization (shared headers) - dev.」」に入力してください。
LINE友達登録
LINE Developersの「Messaging API」チャネルより、「Messaging API設定」のタブのQRコードを使って自分のLINEアカウントへ友達登録をしておきましょう。友達登録をしておかないとBubbleから送信されたメッセージは確認できません。
ユーザーIDの確認（2021/1/28 追記）
LINE Developersの「Messaging API」チャネルより、「チャネル基本設定」タブから送信元のLINEアカウントのIDを確認しておきます。「あなたのユーザーID」という項目の部分です。
（LINE Developersへのログインの際、”LINE アカウントでログイン”を選択してください。もしアカウントをお持ちでない場合はLINEから作成してください。LINEアカウントへ紐づけせずにログインすると「あなたのユーザーID」が発行されません）
この値は後ほどメッセージ送信する際の設定値に使用しますので、メモしておきましょう。
画面作成
Bubbleアプリへ戻り、 index ページにメッセージ送信用の機能を作成していきましょう。
メッセージ入力にはInputフォームを配置し、Buttonエレメントを配置して送信ボタンを作ります。送信が完了したことがわかるように「メッセージを送信しました！」のTextも配置しておきます。ページロード時には表示させませんので「This element is visible on page load」のチェックは外しておきましょう。
ワークフローは、送信ボタンを押したときに入力したメッセージを送信するように設定します。
ActionにはPluginsから「LINE Message - Push call」を選択してください。(body) uidには先ほど確認したユーザーIDを、(body) textには「Input input message's value」を設定しましょう。
また送信後はinputの値をクリアし、完了メッセージを表示させるように設定します。
これでLINE Message確認の準備は完了です！
プレビューから確認
それでは適当なメッセージを入力し、送信ボタンを押してみましょう。
Bubble側では送信完了メッセージが確認できました。
LINE側を見ると、無事にメッセージが送信されていました！
※LINE Developersのフリープランの場合、Messaging APIで送信できるメッセージは毎月1000通までとなりますのでご注意ください。
ブロードキャスト対応（2020/10/24 追記）
ラボさんのLINE配信プラグイン
— けい🐭コードを書けないCTO / Bubble (@NoCoder_K) 2020年10月24日
https ://api.line.me/v2/bot/profile/ + user_id
を叩いてると思うんだけど、一斉配信したければAPI connectorで
https: //api.line.me/v2/bot/message/broadcast
をPOSTで叩けばできるので必要な方は参考にどうぞ pic.twitter.com/MG9Orz5R7B
けいさんからの指摘を受けて、LINE Message プラグインの v1.1.0 でブロードキャストに対応しました。
これを使うと公式アカウントと友だちになっているすべてのユーザーにメッセージを送信します。
Bubble 側に登録している/していないは関係なく、友だちすべてに送られますのでご注意ください。
ブロードキャストの使い方
Action に「LINE Message - Broadcast」が追加されていますので、こちらを選択してください。
text のところに一斉送信したいメッセージを入れてください。
まとめ
いかがでしたでしょうか？今まで複雑だったBubbleからのLINEソーシャルログインとLINEへのメッセージ送信がとても簡単に実現できるようになりました！
ぜひ皆さんも新しいプラグインを使ってみてください！
英語訳版（2020/12/15追記）
海外からの問い合わせが増えてきたため、本記事には英語訳版があります。
