LINE運用ガイド応用編｜LINE DevelopersでLIFFアプリを作成する方法

LINE公式アカウントにLINEログインを設定したら、次はLINEログインの重要な機能であり、LINE独自の機能でもある「LIFFアプリ」をご紹介します。LINE DevelopersのLINEログインチャネルからLIFFアプリを追加する手順と、主な活用シーンを解説します。

Khan LeeCTO2021-09-24

LINE公式アカウントにLINEログインを設定したら、次はLINEログインの重要な機能「LIFFアプリ」です。今回はLIFFアプリの追加方法と活用シーンをご紹介します。とはいえ、LIFFアプリが何なのかまだよくわからないという方も多いようなので、設定手順の前にまず簡単に説明しておきましょう。

‍

LIFFアプリとは？

まずはLINE DevelopersによるLIFFアプリの定義を見てみましょう：LINE Front-end Framework (LIFF) is a platform for web apps provided by LINE. The web apps running on this platform are called LIFF apps.

‍

日本語で要約すると、次のようになります。

‍

LIFFアプリとは、LINE Front-end Framework（LIFF）というプラットフォーム上で動作するWebアプリのことです。

‍

さらにかみ砕くと、LIFFアプリはLINEアプリに内蔵されたブラウザのようなものです。友だちがこの内蔵ブラウザで操作すると、LIFFアプリを通じて企業は友だちのユーザーIDなどのLINE情報を取得できます（もちろん、友だちからデータ取得の同意を得ていることが前提です）。

LINE公式アカウントでリンクをタップするとLIFFアプリが開き、企業が友だちのデータを取得できる様子を示したスマートフォンのイメージ。

‍

LIFFアプリの作成方法

LIFFアプリが何かわかったところで、実際に追加してみましょう。LIFFアプリはLINE Developersで作成します。LINE Official Account Managerではないので注意してください。この2つの管理画面を混同する方はとても多いのですが、「技術的な設定はすべてLINE Developers、友だちとのコミュニケーションやアカウント運用はLINE Official Account Manager」と覚えておけば間違いありません。

LIFFアプリはLINEログインの配下にあるため、先にLINEログインチャネルが必要です。まだお持ちでない方は、まず以下の記事をご覧ください。

‍

LINE DevelopersでLINEログインを作成する方法LINE公式アカウントの運用で、そろそろLINEログインが必要になってきましたか？設定手順に入る前に、LINEログインとは何か、どんな場面で使うのかを簡単にご紹介します。https://oakmega.com/blog/create-line-login-from-line-developers

「LINE DevelopersでLINEログインを作成する方法」と書かれた紫色のテック風カバー画像。

‍

それでは、LIFFアプリを追加していきましょう！

ステップ1：LINEログインチャネルにアクセスする

まずLINE Developersの画面右上にある「ログイン」をクリックし、LINEビジネスIDでLINE Developersコンソールにログインします。

LINE Developersのトップページ。右上の「ログイン」ボタンが赤枠と矢印で示されている。

‍

コンソールに入ったら、該当するプロバイダーを開き、LIFFアプリを追加したいLINEログインチャネルをクリックします。

OakMegaのチャネル一覧で、LIFFアプリを追加するLINEログインチャネルが赤枠で示されている。

‍

LINEログインチャネルを開いたら、上部の「LIFF」タブをクリックします。

LINEログインチャネルのチャネル基本設定画面。赤枠と矢印でLIFFタブが示されている。

‍

LIFFタブで画面を下にスクロールし、「追加」をクリックしてLIFFアプリの作成を始めます。

LINE DevelopersコンソールのLIFFタブ。まだアプリがなく、追加ボタンが表示されている。

LINE DevelopersのLIFFアプリ画面。追加ボタンが赤枠と矢印で示されている。

‍

ステップ2：情報を入力する

LIFFアプリの追加には基本情報（Basic information）の入力が必要です。画面の案内に沿って入力していきます。
LIFFアプリ名：LINE Developersコンソールにのみ表示され、友だちがLIFFアプリを開いても表示されません。ブランド名を入力します。
サイズ：LINEでLIFFアプリを開いたときの表示サイズです。「Full」を選ぶと全画面で表示されます（Tallは画面の70%、Compactは50%で表示）。

LINEのLIFFアプリ追加画面。ブランド名を入力し、全画面表示を選択する。

‍

続けて基本情報を入力します。
エンドポイントURL：友だちがLIFFアプリを開いたときに表示されるURLです。ブランドの公式サイトなど、任意のURLを入力します。
Scope：LIFFアプリで取得したい情報です。「profile」と「openid」の両方にチェックを入れます。
友だち追加オプション（Bot link feature）：友だちがLIFFアプリを開いたときに、LINE公式アカウントと連携させるかどうかです。「On (Normal)」を選びます。

LINEのLIFF設定画面。エンドポイントURL、profile・openidのScope、友だち追加オプションが表示されている。

‍

続いてオプション（Options）を設定します。
Scan QR：チェックを入れません。
Module Mode：オンにします（サイズで「Tall」または「Compact」を選んだ場合のみ表示されます）。

LINE DevelopersのLIFFアプリ追加画面。Scan QRをオフ、Module Modeをオンにした例。

‍

入力が終わったら「追加」をクリックすれば、最初のLIFFアプリの完成です！

LIFFアプリの設定画面。Scan QRはオフ、Module Modeはオンで、矢印が追加ボタンを指している。

‍

LIFF URLをコピーしてLINEのトークに貼り付け、スマートフォンでリンクを開いて設定結果を確かめてみましょう！

LIFFの管理画面でLIFF URLが赤枠で示されている。コピーしてLINEのメッセージでテストできる。

‍

LIFFアプリのよくある質問

初めてLIFFアプリを作成したときによくある質問をまとめました。

Q1：LIFFアプリを設定すれば、ブラウザ内でユーザー情報を取得できているのですか？

この点はLINEログインと同じで、LIFFアプリで取得した情報を自社サーバーに保存するには、エンジニアによるWebページの改修が必要です。エンジニア向けの詳しい解説記事も今後公開予定ですので、「OakMega LINE運用ガイド」をぜひチェックしてください！

Q2：ほかのLINE公式アカウントのLIFFアプリでは、なぜメールアドレスを取得できるのですか？

それらのアカウントはLINEログインで追加の設定を行っているため、LIFFアプリのScopeで「email」を選択でき、友だちのメールアドレスもあわせて取得できるのです。

Q3：友だち追加オプション（Bot link feature）の役割がまだよくわかりません。

友だち追加オプションについては、今後詳しい解説記事を公開予定です。「OakMega LINE運用ガイド」をぜひチェックしてください！

‍

LINE運用のノウハウをもっと知りたい方、LIFFアプリの表示サイズを小さくする方法が気になる方は、OakMegaのLINE公式アカウントでさらに詳しい情報をご覧ください。また「OakMega LINE運用ガイド」では、ブランドのLINE公式アカウントをゼロから構築するための手順を一通りご紹介しています。