関連のツールの紹介、使い方などをやさしく説明しています。ラボで開発した以下2つのプラグインについて紹介していきます。設定し、ログイン後、お友達登録ができるプラグインを作成しました。送ろうと考えている方はこちらの方が使いやすいかもしれません。違うプラグインになります。時の画面遷移はこちらをご参考ください。以前の記事で紹介したとおり、Auth0や既存のプラグインを使用することで、LINEのソーシャルログインやメッセージ送信機能を実現することができます。blog.nocodelab.jpblog.nocodelab.jpしかし、こちらは少し手順が複雑だったため、もっと簡単に直接LINEと接続できるプラグインがあれば便利だと思い立ち、今回こちらに関連するプラグインを開発させてもらいました。Message」の2つのプラグインをインストールしましょう。「LINE」のキーワードで検索すれば見つかります。※画像では「testing」と表示されていますが、こちらはプラグインテスト時の表示ですので通常は表示されませんそれぞれ設定値を入れる必要がありますが、こちらは後ほど説明します。Developersの登録を行ってください。アカウントを登録している方は次の手順へ移りましょう。Developersの登録が完了したら、プロバイダーを作成します。プロバイダー名は任意のもの(個人名や企業名などでOK)を設定します。plugin確認」としました。次にチャネルを作成します。API」の2つのチャネルを作成します。LINEログインまずはLINEログインのチャネルを作成します。登録項目は以下の表の通りです。同意のチェックをして作成ボタンを押せば完了です。APIのチャネルも同様に新規作成します。登録項目は以下の表の通りです。任意LINE公式アカウント利用規約およびLINE公式アカウントAPI利用規約に同意のチェックをして作成ボタンを押します。ここまで出来たら事前準備は完了です。LOGINプラグインを使って、LINEアカウントのソーシャルログインを確認してみましょう。LOGIN」を選択し、設定値を入力します。入力内容は以下の表を参考にしてください。URLにもチェックを入れてください。Developersのページより、作成した「LINEログイン」チャネルの「LINEログイン設定」のタブからコールバックURLを登録します。登録するURLは「https://{作成したBubbleアプリの名称}.bubbleapps.io/api/1.1/oauth_redirect」としてください。更新ボタンを押して完了です。あわせて、チャネルを非公開→公開に変更しておきましょう。画面作成Bubbleアプリへ戻ります。ページを作成していきます。indexページButtonより「LINEアカウントでサインイン」ボタンを作成します。ワークフローは以下の2つです。in」の条件を入れておきましょう。次に「LINEアカウントでサインイン」ボタンを押したときの動きです。Login」を選択しましょう。Step2はusersページへ遷移するだけでOKです。usersページログイン後に遷移させるusers画面も作成していきます。ID、アカウント名を表示させてみます。アイコン画像の表示にはImageエレメントを配置します。Url」を選択します。IDの表示にはTextエレメントを配置します。アカウント名の表示も同様にTextエレメントを配置します。displayName」を選択します。今回もログアウトボタンを配置しておきましょう。ワークフローは以下の2つです。LOGIN確認の準備は完了です!プレビューから確認それでは早速「LINEアカウントでサインイン」ボタンを押してみます。LINEのログイン画面に遷移します。初回のみ、認証確認があります。追記)公式アカウントと友達登録しているかどうかを確認できるようにしました。公式アカウントをリンクする必要があります。次のリンクを参照して、リンクされたボットを設定してください。friendFlag」を選択します。返ってきますので、友達登録していない場合は友達登録を促すなどに利用することができます。Messageプラグインを使って、BubbleアプリからLINEへメッセージを送信してみましょう。Message」を選択し、設定値を入力します。API設定タブより「チャネルアクセストークン」を発行します。dev.」」に入力してください。API設定」のタブのQRコードを使って自分のLINEアカウントへ友達登録をしておきましょう。友達登録をしておかないとBubbleから送信されたメッセージは確認できません。API」チャネルより、「チャネル基本設定」タブから送信元のLINEアカウントのIDを確認しておきます。「あなたのユーザーID」という項目の部分です。アカウントでログイン”を選択してください。アカウントをお持ちでない場合はLINEから作成してください。LINEアカウントへ紐づけせずにログインすると「あなたのユーザーID」が発行されません)この値は後ほどメッセージ送信する際の設定値に使用しますので、メモしておきましょう。ページにメッセージ送信用の機能を作成していきましょう。メッセージ入力にはInputフォームを配置し、Buttonエレメントを配置して送信ボタンを作ります。送信が完了したことがわかるように「メッセージを送信しました!」のTextも配置しておきます。load」のチェックは外しておきましょう。ワークフローは、送信ボタンを押したときに入力したメッセージを送信するように設定します。call」を選択してください。value」を設定しましょう。送信後はinputの値をクリアし、完了メッセージを表示させるように設定します。Message確認の準備は完了です!プレビューから確認それでは適当なメッセージを入力し、送信ボタンを押してみましょう。Bubble側では送信完了メッセージが確認できました。APIで送信できるメッセージは毎月1000通までとなりますのでご注意ください。ブロードキャストに対応しました。これを使うと公式アカウントと友だちになっているすべてのユーザーにメッセージを送信します。側に登録している/していないは関係なく、友だちすべてに送られますのでご注意ください。Broadcast」が追加されていますので、こちらを選択してください。ところに一斉送信したいメッセージを入れてください。まとめいかがでしたでしょうか?今まで複雑だったBubbleからのLINEソーシャルログインとLINEへのメッセージ送信がとても簡単に実現できるようになりました!ぜひ皆さんも新しいプラグインを使ってみてください!英語訳版(2020/12/15追記)海外からの問い合わせが増えてきたため、本記事には英語訳版があります。個別指導などを行っています。)引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。