【LINE】LIFFとは何か？LIFFアプリの使い方を実例で解説（LINEログインチャネルの作成方法）

LINEにはLIFFという機能があります。LIFFを活用すれば、LINEのユーザーIDやプロフィール情報にアクセスでき、様々なサービスを提供可能となります。

例えば、LINEログインを使った会員登録や、友だちへのメッセージ送信など、アイデア次第で無限の可能性が広がります。この記事では、LIFFとは何か？といった基本的なことから、実際にLIFFアプリを構築する方法を実例で解説しています。

LIFFとは何か？
LIFFアプリ作成の流れ
DEMOアプリの概要
LINEログインチャネルの登録
LIFFアプリの登録
アプリの作成と公開
LIFFアプリを開く
公開する

LIFFとは何か？

LIFFとは「LINE Front-end Framework」の略で、LINEが提供するWebアプリケーションのプラットフォームです。

LIFFを利用することで、LINEアプリ内で動作するWebアプリ（LIFFアプリ）を簡単に作成することができます。

LIFFアプリは、LINEのユーザーIDやプロフィール情報など、LINEプラットフォーム上の情報にアクセスできるため、LINEと連携した様々なサービスを提供することができます。

例えば、次のようなことができます。

LIFFでできること

会員登録・ログイン: LINEアカウントで簡単に会員登録やログインができます。
クーポン発行: LIFFアプリ内でクーポンを発行し、LINEで友だちにシェアできます。
商品購入: LIFFアプリ内で商品を購入し、LINE Payで決済できます。
イベント情報提供: イベント情報をLIFFアプリで配信し、LINEで友だちに招待できます。
アンケート調査: LIFFアプリでアンケートを実施し、LINEで回答を収集できます。

具体的には、HTMLやCSS, JavaScriptで作ったWEBページを、LIFFアプリとして登録することで、そのWEBページをLINEの中で開くことができます。

JavaScriptを使って、ユーザーIDやユーザーの表示名などを取得して、WEBページの中で表示するといった処理をすることができます。

LIFFアプリ作成の流れ

LIFFアプリを作成するための大まかな流れは以下のようになります。

LIFFアプリ作成の流れ

LINEログインチャネルの登録
LIFFアプリの登録（事前にWEBアプリを公開しURLを有効化しておく）
アプリの作成と公開
検証｜LIFFアプリを開く
開発中 → 公開済みにする

DEMOアプリの概要

ここでは、LIFFを使って実際にアプリを作成する実例を紹介します。

LIFFアプリのリンクをたどると、LIFFアプリの承認画面が表示され、先に進むと、ログインしたLINEのプロフィール画像や表示名、ユーザーIDなどを表示するアプリケーションを作成します。

LINEログインチャネルの登録

LIFFアプリはLINEログインチャネルの中の機能の一つです。

このため、先にLINEログインチャネルを作成する必要があります。

LINE Developersにログインして、「プロバイダー」から作成をします。

プロバイダーが作成できたら、対象のプロバイダーを選択して、「新規チャネル作成」をクリックします。

「LINEログイン」をクリックします。

入力項目があるので、必須情報などを入力していきます。

アプリタイプは「ウェブアプリ」を選択します。

MEMO

ウェブアプリ：ウェブページにLINEログインを組み込む場合。
ネイティブアプリ：iOS/AndroidのアプリにLINEログインを組み込む場合。

２要素認証はOFFでも問題ありません。（ONの場合、認証番号を入力します。）

開発者契約に同意し「作成」をクリックします。

LIFFアプリの登録

先に、アプリとして公開するWEBページのURLを取得しておきます。

Point

WEBアプリを先に完成させてもいいのですが、LIFFアプリを登録したときに発行されるLIFF IDをコードの中に埋め込む必要があります。

メニューの「LIFF」をクリックします。

「追加」をクリックします。

LIFFアプリの情報を入力していきます。

サイズ（Full, Tall, Compact）

サイズには「Full」「Tall」「Compact」ｍの３つがあります。選択内容によって、LINEの画面上での表示サイズが変化します。

（参考）LINE Front-end Framework (LIFF)

ここではFullを選択します。

エンドポイントURL

エンドポイントURLに先ほど公開したアプリのURLを入力します。

MEMO

エンドポイントURLに登録したURLが、LINEログイン時に表示されます。

Scope

Scopeは次の３つが用意されています。使いたいメソッドに合わせて選択します。

openid：liff.getIDToken()およびliff.getDecodedIDToken()を使用するためのスコープ。
profile：liff.getProfile()およびliff.getFriendship()を使用するためのスコープ。
chat_message.write：liff.sendMessages()を使用するためのスコープ。アカウントの種類によっては、このオプションが［すべて表示］の下に表示されることがあります。

MEMO各メソッドの機能

openid
liff.getIDToken() や liff.getDecodedIDToken() を使用して、IDトークンを取得するためのスコープです。
IDトークンは、ユーザーを認証するための情報を含んでおり、サーバー側で検証することで、ユーザーの情報を安全に取得することができます。
profile
liff.getProfile() や liff.getFriendship() を使用して、ユーザーのプロフィール情報（名前、画像など）や友だち関係を取得するためのスコープです。
chat_message.write
liff.sendMessages() を使用して、LINEのトークルームにメッセージを送信するためのスコープです。
このスコープを有効にすることで、LIFFアプリからユーザーとのコミュニケーションをよりインタラクティブにすることができます。

友だち追加オプション

公式アカウントの友だち追加を表示させるかどうか、いつ表示させるかを指定します。

友だち追加したときにログイン情報を取得したい場合は「On(aggressive)」にします。

On (normal)：LIFFアプリの権限の同意画面に、LINE公式アカウントを友だち追加するオプションを追加します。
On (aggressive)：LIFFアプリの権限の同意画面の後に、LINE公式アカウントを友だち追加するかどうか確認する画面を表示します。
Off：LINE公式アカウントを友だち追加するオプションを表示しません。

Scan QR

LIFFアプリでLIFFアプリ内でQRコードを読み取るための機能、liff.scanCodeV2()を利用する場合は、オンにします。

モジュールモード

モジュールモードをONにすると、LIFFアプリのヘッダー部分に表示される「シェア」や「友だちに送る」などのアクションボタンを非表示にすることができます。

なお、モジュールモードのオプションはLIFFアプリの画面サイズが「Full」に設定されている場合にのみ表示されます。

設定が完了したら「追加」をクリックします。

（参考）公式 LIFFアプリをチャネルに追加する

LIFFアプリが登録されます。

MEMO｜シェアターゲットピッカーとは？

シェアターゲットピッカーとは、LIFFアプリからLINEの友だちに対して、メッセージやコンテンツを直接送信できる機能です。

例えば、LIFFアプリで獲得したクーポンやキャンペーン情報を、友だちに簡単にシェアできます。

アプリの作成と公開

エンドポイントURLに登録したWEBページに、LIFFアプリの元となるコード（HTMLやJavaScriptなど）を埋め込みます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LIFFアプリテスト</title>
    <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        #profile {
            display: none;
            margin-top: 20px;
        }
        img {
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <h1>LIFFアプリテスト</h1>
    <button id="loginButton">LINEログイン</button>
    <button id="logoutButton" style="display: none;">ログアウト</button>
    <div id="profile">
        <h2>プロフィール情報</h2>
        <img id="pictureUrl" width="100" height="100" alt="プロフィール画像">
        <p id="displayName"></p>
        <p id="userId"></p>
    </div>

    <script>
        // LIFFアプリの初期化
        document.addEventListener("DOMContentLoaded", function () {
            liff.init({
                liffId: "YOUR_LIFF_ID"  // ここを取得したLIFF IDに置き換え
            }).then(() => {
                // LIFFがLINE上で起動されているか確認
                if (liff.isLoggedIn()) {
                    displayUserProfile();  // ログイン済みならプロフィール表示
                } else {
                    document.getElementById("loginButton").style.display = "block";
                }
            }).catch((err) => {
                console.error("LIFF初期化エラー:", err);
            });
        });

        // ログインボタンの動作
        document.getElementById("loginButton").addEventListener("click", function () {
            liff.login();  // LIFFにログイン
        });

        // ログアウトボタンの動作
        document.getElementById("logoutButton").addEventListener("click", function () {
            liff.logout();
            window.location.reload();
        });

        // ユーザープロフィールを表示
        function displayUserProfile() {
            liff.getProfile().then(profile => {
                document.getElementById("loginButton").style.display = "none";
                document.getElementById("logoutButton").style.display = "block";
                document.getElementById("profile").style.display = "block";
                document.getElementById("displayName").textContent = `名前: ${profile.displayName}`;
                document.getElementById("userId").textContent = `ユーザーID: ${profile.userId}`;
                document.getElementById("pictureUrl").src = profile.pictureUrl;
            }).catch((err) => {
                console.error("プロフィール取得エラー:", err);
            });
        }
    </script>
</body>
</html>

※YOUR_LIFF_IDを、取得したLIFF IDに置き換えます。