ノーコード ラボ

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

Bubbleで「LINEログイン」と「LINEメッセージ送信」ができるプラグインを作成しました

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

皆さんこんにちは!今回はノーコード ラボで開発した以下2つのプラグインについて紹介していきます。

  • LINEアカウントによるソーシャルログインを実現する「LINEログイン」のプラグイン
  • BubbleからLINEへメッセージを送信できる「LINEメッセージ送信」のプラグイン

bubble.io

bubble.io

背景

以前の記事で紹介したとおり、Auth0や既存のプラグインを使用することで、LINEのソーシャルログインやメッセージ送信機能を実現することができます。
blog.nocodelab.jp
blog.nocodelab.jp
しかし、こちらは少し手順が複雑だったため、もっと簡単に直接LINEと接続できるプラグインがあれば便利だと思い立ち、今回こちらに関連するプラグインを開発させてもらいました。(間に入るサービスが多いほど、メンテナンスが大変ですしね)
それでは早速、使い方を見ていきましょう!

事前準備

プラグインインストール

Bubbleで新規アプリを作成し、pluginsタブより「LINE LOGIN」「LINE Message」の2つのプラグインをインストールしましょう。「LINE」のキーワードで検索すれば見つかります。
f:id:gbear88:20201009113550p:plain
※画像では「testing」と表示されていますが、こちらはプラグインテスト時の表示ですので通常は表示されません
それぞれ設定値を入れる必要がありますが、こちらは後ほど説明します。

LINE Developersの登録

以下のサイトより、LINE Developersの登録を行ってください。すでにアカウントを登録している方は次の手順へ移りましょう。
developers.line.biz

LINE Developersにてプロバイダー・チャネルの作成

LINE Developersの登録が完了したら、プロバイダーを作成します。プロバイダー名は任意のもの(個人名や企業名などでOK)を設定します。
今回はテスト用に「Bubble plugin確認」としました。
f:id:gbear88:20201009140354p:plain
次にチャネルを作成します。今回は「LINEログイン」と「Messaging API」の2つのチャネルを作成します。
f:id:gbear88:20201009140636p:plain

LINEログイン

まずはLINEログインのチャネルを作成します。登録項目は以下の表の通りです。

項目 設定内容
チャネルの種類 LINEログインを選択
プロバイダー 先ほど作成したプロバイダーを選択
チャネルアイコン 任意
チャネル名 チャネルの名前を入力
チャネル詳細 チャネルの説明を入力
アプリタイプ ウェブアプリを選択
メールアドレス 自分のメールアドレスを入力(デフォルトのままでOK)
プライバシーポリシーURL 任意
サービス利用規約URL 任意

f:id:gbear88:20201009142246p:plain
f:id:gbear88:20201009145232p:plain
LINE Developers Agreement に同意のチェックをして作成ボタンを押せば完了です。

Messaging API

Messaging APIのチャネルも同様に新規作成します。登録項目は以下の表の通りです。

項目 設定内容
チャネルの種類 Messaging APIを選択
プロバイダー 先ほど作成したプロバイダーを選択
チャネルアイコン 任意
チャネル名 チャネルの名前を入力
チャネル詳細 チャネルの説明を入力
大業種 作成するサービスの業種を選択
小業種 作成するサービスの業種を選択
メールアドレス 自分のメールアドレスを入力(デフォルトのままでOK)
プライバシーポリシーURL 任意
サービス利用規約URL 任意

f:id:gbear88:20201009145135p:plain
f:id:gbear88:20201009145147p:plain
LINE公式アカウント利用規約およびLINE公式アカウントAPI利用規約に同意のチェックをして作成ボタンを押します。
ここまで出来たら事前準備は完了です。
f:id:gbear88:20201009144540p:plain

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にもチェックを入れてください。
f:id:gbear88:20201009151305p:plain
f:id:gbear88:20201009151321p:plain:w380f:id:gbear88:20201009151331p:plain:w380

コールバックURL登録

LINE Developersのページより、作成した「LINEログイン」チャネルの「LINEログイン設定」のタブからコールバックURLを登録します。登録するURLは「https://{作成したBubbleアプリの名称}.bubbleapps.io/api/1.1/oauth_redirect」としてください。
f:id:gbear88:20201009152431p:plain
f:id:gbear88:20201009152440p:plain
更新ボタンを押して完了です。あわせて、チャネルを非公開→公開に変更しておきましょう。
f:id:gbear88:20201009152719p:plain

画面作成

Bubbleアプリへ戻ります。前回の記事と同様に、ログインボタンを配置する index ページと、ログイン後の users ページを作成していきます。

indexページ

Buttonより「LINEアカウントでサインイン」ボタンを作成します。
f:id:gbear88:20201009153357p:plain
ワークフローは以下の2つです。

  • ページロード時に既にログインされていたら user ページへ遷移する
  • 「LINEアカウントでサインイン」ボタンをクリックしたら、user ページへ遷移する

ページロード時にはOnly whenに「Current User is logged in」の条件を入れておきましょう。
f:id:gbear88:20201009153755p:plain
次に「LINEアカウントでサインイン」ボタンを押したときの動きです。Account で「Signup/login with a social network」を選択し、OAuth provider に「LINE Login」を選択しましょう。Step2はusersページへ遷移するだけでOKです。
f:id:gbear88:20201009154350p:plain

usersページ

ログイン後に遷移させるusers画面も作成していきます。今回も画面上に、LINEのアイコン画像、LINE ID、アカウント名を表示させてみます。
アイコン画像の表示にはImageエレメントを配置します。設定値はDynamic imageから「Get data from an external API」を選択後、「API provider」に「LINE Login - User」を設定し、返却値に「's picture Url」を選択します。
f:id:gbear88:20201009160157p:plain:w380f:id:gbear88:20201009160207p:plain:w380
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」を選択します。
f:id:gbear88:20201009160952p:plain
また、今回もログアウトボタンを配置しておきましょう。
ワークフローは以下の2つです。

  • ページロード時にログインされていない場合はindexページへ遷移する
  • ログアウトボタンをクリックしたら、ログアウトし、indexページへ戻る

f:id:gbear88:20201009161434p:plain:w380f:id:gbear88:20201009161444p:plain:w380
これでLINE LOGIN確認の準備は完了です!

プレビューから確認

それでは早速「LINEアカウントでサインイン」ボタンを押してみます。
f:id:gbear88:20201009162603p:plain
LINEのログイン画面に遷移します。
f:id:gbear88:20201009162614p:plain
初回のみ、認証確認があります。
f:id:gbear88:20201009162624p:plain
ログイン後、usersページに遷移して、無事にアイコン、LINE ID、アカウント名が取得できました!
f:id:gbear88:20201009162703p:plain

LINE Messageプラグインの利用手順

引き続き、LINE Messageプラグインを使って、BubbleアプリからLINEへメッセージを送信してみましょう。

プラグイン設定値の入力

Bubbleアプリのpluginsタブより「LINE Message」を選択し、設定値を入力します。
先ほどLINE Developersで作成したMessaging APIチャネルのMessaging API設定タブより「チャネルアクセストークン」を発行します。
f:id:gbear88:20201009164258p:plain
「Bearer+{半角スペース}+発行したチャネルアクセストークン」をプラグインの「Authorization (shared headers)」および「「Authorization (shared headers) - dev.」」に入力してください。
f:id:gbear88:20201009164240p:plain

LINE友達登録

LINE Developersの「Messaging API」チャネルより、「Messaging API設定」のタブのQRコードを使って自分のLINEアカウントへ友達登録をしておきましょう。友達登録をしておかないとBubbleから送信されたメッセージは確認できません。
f:id:gbear88:20201009164851p:plain

ユーザーIDの確認

LINE Developersの「Messaging API」チャネルより、「チャネル基本設定」タブから送信元のLINEアカウントのIDを確認しておきます。「あなたのユーザーID」という項目の部分です。
f:id:gbear88:20201009171354p:plain
この値は後ほどメッセージ送信する際の設定値に使用しますので、メモしておきましょう。

画面作成

Bubbleアプリへ戻り、 index ページにメッセージ送信用の機能を作成していきましょう。
メッセージ入力にはInputフォームを配置し、Buttonエレメントを配置して送信ボタンを作ります。送信が完了したことがわかるように「メッセージを送信しました!」のTextも配置しておきます。ページロード時には表示させませんので「This element is visible on page load」のチェックは外しておきましょう。
f:id:gbear88:20201009172958p:plain
ワークフローは、送信ボタンを押したときに入力したメッセージを送信するように設定します。
ActionにはPluginsから「LINE Message - Push call」を選択してください。(body) uidには先ほど確認したユーザーIDを、(body) textには「Input input message's value」を設定しましょう。
また送信後はinputの値をクリアし、完了メッセージを表示させるように設定します。
f:id:gbear88:20201009173244p:plain
これでLINE Message確認の準備は完了です!

プレビューから確認

それでは適当なメッセージを入力し、送信ボタンを押してみましょう。
f:id:gbear88:20201009173900p:plain
Bubble側では送信完了メッセージが確認できました。
f:id:gbear88:20201009173946p:plain
LINE側を見ると、無事にメッセージが送信されていました!
f:id:gbear88:20201009180008p:plain:w500
※LINE Developersのフリープランの場合、Messaging APIで送信できるメッセージは毎月1000通までとなりますのでご注意ください。

ブロードキャスト対応(2020/10/24 追記)

けいさんからの指摘を受けて、LINE Message プラグインの v1.1.0 でブロードキャストに対応しました。
これを使うと公式アカウントと友だちになっているすべてのユーザーにメッセージを送信します。
Bubble 側に登録している/していないは関係なく、友だちすべてに送られますのでご注意ください。

ブロードキャストの使い方

Action に「LINE Message - Broadcast」が追加されていますので、こちらを選択してください。 f:id:toka-xel:20201024170413p:plain

text のところに一斉送信したいメッセージを入れてください。 f:id:toka-xel:20201024170512p:plain

まとめ

いかがでしたでしょうか?今まで複雑だったBubbleからのLINEソーシャルログインとLINEへのメッセージ送信がとても簡単に実現できるようになりました!
ぜひ皆さんも新しいプラグインを使ってみてください!