宮崎翼 
Bubbleでアプリを開発している多くの方が、そう考えているのではないでしょうか。その強力な解決策の一つが、多くのユーザーが日常的に利用しているLINEを使ったソーシャルログイン機能の実装です。
こんにちは、ツバサです！
この記事では、ノーコードツールBubbleを使ってLINEログインを実装し、取得したユーザー情報（ID、名前、プロフィール画像）をデータベースに保存するまでの手順を、初心者の方にも分かりやすく徹底的に解説します。
この記事を読み終える頃には、LINEログイン機能が実装され、ユーザーにとって格段に使いやすいサービスへと進化しているはずです。
この記事のゴール
Lineでログインして、そのUser情報を取得し表示します。
注意事項 2025/8/31時点で、LINEログイン連携のように、Bubbleの「API Connector」を使って外部サービスと連携するだけであれば無料プラン(Free)でも実装できますが、将来的に自分のアプリをAPIとして公開する場合には、Starterプラン以上へのアップグレードが必要になるので注意ください。詳細は、以下の価格ページをご覧ください。
https://bubble.io/pricing
事前準備：LINE Developersでのチャネル作成
まずはじめに、LINEの機能とBubbleアプリを連携させるための「チャネル」をLINE Developersコンソールで作成します。
- LINE Developersコンソールにアクセスし、自身のLINEアカウントでログインします。
- 初めての場合は「プロバイダー」を作成します（会社名や開発者名などを入力）。
- 作成したプロバイダーを選択し、「チャネルを新規作成」から「LINEログイン」を選択します。
- アプリ名や説明など、必要な情報を入力してチャネルを作成します。
- 作成したチャネルの「チャネル基本設定」タブを開き、以下の2つの情報をメモしておきましょう。後でBubble側で使います。
- チャネルID
- チャネルシークレット
この段階では、他の設定はまだ不要です。次に進みましょう。
STEP1: Bubbleでのプラグイン設定
次に、Bubbleエディタ側でLINEログインを可能にするためのプラグインを設定します。
- Bubbleエディタの左メニューから「Plugins」タブを開き、「+ Add plugins」をクリックします。
- 検索バーに「LINE」と入力し、Bubble公式が提供している「LINE」プラグインを「Install」します。
Plugin-NoCodeLab-LINELOGIN
https://bubble.io/plugin/line-login-1598590018392×504478593837957100 - インストールが完了すると、プラグイン設定画面が表示されます。ここに、先ほどLINE Developersでメモした「Channel ID」と「Channel Secret」をそれぞれ入力します。
- ここで非常に重要なのが、コールバックURLの設定です。
プラグイン設定画面に「Redirect URI」または「Callback URL」という項目でURLが表示されています。このURLをコピーしてください。
以下の赤字部分は、アプリによって変わります。
https://momosta.bubbleapps.io/api/1.1/oauth_redirect - コピーしたURLを、先ほどのLINE Developersコンソールの画面に戻って貼り付けます。
- チャネルの「LINEログイン設定」タブを開きます。
- 「コールバックURL」の「編集」ボタンを押し、先ほどコピーしたURLを貼り付けて「更新」します。
この設定により、LINEでの認証が完了したユーザーが、正しくあなたのBubbleアプリに戻ってくることができるようになります。
STEP2: ログイン画面とワークフローの設定
プラグインの設定が完了したら、次はユーザーが実際に操作するログインボタンと、そのボタンが押されたときの処理（ワークフロー）を作成します。
- 「Design」タブで、ログインボタン（Button要素など）を好きなデザインで配置します。テキストは「LINEでログイン」などが分かりやすいでしょう。
- ボタンを選択した状態で「Add workflow」をクリックします。
Click here to add an action...をクリックし、Account→**Signup/login with a social network**を選択します。OAuth providerのドロップダウンメニューから「LINE Login」を選択します。
たったこれだけです！
このアクション一つで、BubbleがLINEの認証画面への移動から、
認証後のユーザー情報の受け取りまでを自動的に行ってくれます。
STEP3: 取得した情報を画面に表示・DBに保存する
ログインが成功したら、取得したユーザー情報を画面に表示し、さらに後からでも使えるようにデータベース（DB）に保存しましょう。
1. ユーザー（User）データタイプにフィールドを追加
まず、LINEの情報を保存するための「箱」をDBに用意します。
- 「Data」タブ → 「Data types」タブに移動します。
Typeの一覧から「User」を選択します。- 「+ Create a new field」から、以下の3つのフィールドを追加します。
line_user_id(Field type:text)line_display_name(Field type:text)line_picture_url(Field type:textまたはimage)
2. ワークフローでDBに情報を保存
次に、STEP2で作成したログインワークフローに、DBへの保存処理を追加します。
Signup/login with a social networkアクションの後に、新しいアクションを追加します。Data (Things)→**Make changes to a thing...**を選択します。Thing to changeには**Current User**を指定します。- 「+ Set another field」をクリックし、先ほど作成したフィールドに、LINEから取得した情報を紐づけていきます。
line_user_id=Current User's LINE's user IDline_display_name=Current User's LINE's nameline_picture_url=Current User's LINE's profile picture
これで、LINEログインしたユーザーの情報がBubbleのデータベースに保存されるようになりました。
3. 画面に情報を表示
DBに保存した情報を、ログイン後の画面に表示してみましょう。
- テキスト要素や画像（Image）要素を画面に配置します。
- 各要素のデータソースを以下のように設定します。
- 名前を表示するテキスト:
Insert dynamic data→Current User's line_display_name - プロフィール画像:
Insert dynamic data→Current User's line_picture_url - LINE User ID:
Insert dynamic data→Current User's line_user_id
- 名前を表示するテキスト:
これで実装は完了です！
プレビューモードで実際にLINEログインを試し、情報が正しく表示・保存されるか確認してみましょう。
*以下のようにすれば、DB保尊しなくても、LINEの情報をそのまま表示することも可能です。
【トラブルシューティング】初心者がつまずきやすいポイント
ここまでの手順通りに進めてもうまくいかない場合、特に初心者が陥りがちな原因について解説。
問題：そもそもログインできず、エラーになる
- 原因：コールバックURLの設定ミス
- 最も可能性が高いのは、STEP1で設定したコールバックURLが間違っているケースです。Bubbleのプラグイン設定画面に表示されているURLと、LINE Developersコンソールに設定したURLが完全に一致しているか、もう一度確認してみてください。
問題が発生した際は、Bubbleの「デバッガー」が非常に役立ちます。Inspectモードを使って各要素の値がどうなっているかを確認する癖をつけると、エラー解決のスピードが格段に上がるはずです。
まとめ
今回は、BubbleアプリにLINEログインを実装し、取得したユーザー情報をDBに保存するまでの一連の流れを解説しました。
- LINE Developersでチャネルを作成
- Bubbleでプラグインを設定し、コールバックURLを連携
- ワンアクションでログインワークフローを構築
- 取得した情報をDBに保存し、画面に表示
ソーシャルログインは、ユーザー体験を向上させるための重要な機能です。
この記事を参考に、ぜひあなたのアプリにもLINEログインを導入してみてください！
