LINE上で動くアプリ開発!? "LIFF"を初心者向けに分かりやすく解説。事例や実装方法も

『LIFF（LINE Front-end Framework）』とは、LINEが提供している開発者向けサービスのひとつです。2020年現在、多くの企業LINE公式アカウントで利用されています。

国内でも利用者数の多いLINE上にアプリを展開することで、多くのユーザーに直接サービスを提供できるようになりました。今後ますます需要が高まることが予想されます。

そんななか「LIFFを使って何ができるの？」「実際にどんな使われ方をしてるの？」と気になっている方も多いのではないでしょうか。

この記事では、LIFFについて初心者向けに分かりやすく解説するとともに、実際に利用されているサービスの実例や実装方法についてもご紹介します。ぜひLIFFを有効活用してください。

LIFF（LINE Front-end Framework）とは

LIFF（LINE Front-end Framework）とは、LINEのアプリ上で動くWebアプリのプラットフォームです。LIFFを使って動作するアプリを「LIFFアプリ」といいます。

LINE上にアプリを展開することで、簡単にLINEのユーザー情報と企業が持つ顧客情報を連携させることができ、従来よりシームレスなサービスを提供可能になりました。

LIFFアプリを使うと具体的にどんなことができるのでしょうか。以下で詳しく解説します。

LIFFアプリでできること

まず前提として、LIFFアプリは一般的なWebアプリと同等の機能を持っています。しかしLIFFを利用することで、他にもさまざまな機能を実装させられるのです。

この項目ではLIFFアプリでできることを8つご紹介します。

1. LINEのトークルーム上でWebアプリを起動する
2. トークルームにメッセージを送信する
3. UXの向上したLINE Botを作成する
4. ユーザーが選択した相手へメッセージを送信する
5. ユーザーIDを利用しログインの手間を省く
6. QRコードを読み取る
7. LINE公式アカウントの登録を促す
8. 外部ブラウザからLIFFアプリを開く

できること1. LINEのトークルーム上でWebアプリを起動する

LIFFアプリはLINEのトークルーム上でWebアプリを起動できます。

これまではLINEとLINE以外のアプリ画面を行き来しなければサービスを提供できませんでした。LIFFを使えばトークルーム内でサービスを完結させられるため、ユーザーの手間を省けます。

またトークルーム上にLIFFアプリを表示させるときには、そのサービスに合った画面サイズを選ぶことも可能です。画面サイズには以下の3つがあります。

• Full：
  画面の上から下までをすべて覆うサイズ
• Tall：
  画面の下からおよそ80%までを覆うサイズ
• Compact：
  画面の下からおよそ半分までを覆うサイズ

できること2.トークルームにメッセージを送信する

LIFFアプリはトークルームにメッセージを送信できます。

いわゆるLINE Botの発言とは違い「利用者自身のメッセージ」として送信できるため、ユーザーの代わりにLINE Botへの複雑な命令文を送ることも可能です。

またテキストだけでなく、画像やスタンプ、音声、動画、さらには位置情報も送信できます。

できること3. UXの向上したLINE Botを作成する

LINE BotのUXを向上させられるのも、LIFFの特徴です。

LIFFアプリは柔軟にカスタマイズ可能なため、既存のLINE Botでは実現できなかったさまざまなことができます。

例）

• LIFFアプリのフォームからLINE Botへ、ユーザー情報を連携・更新する
• 外部のWeb APIと連携し、LINE Bot上で高度なサービスを提供する

できること4. ユーザーが選択した相手へメッセージを送信する

LIFFには、ユーザーが選択した相手のトーク画面へメッセージを送信する機能もあります。

この機能を使えば、友人に数量限定のクーポンを配布する機能なども簡単に実装できるでしょう。

できること5.ユーザーIDを利用しログインの手間を省く

LIFFはユーザーの識別が必要なWebサービスをログイン機能なしで実装することができます。ユーザーがLINEに登録しているアカウント情報をそのままWebサービスのアカウントとして利用できるためです。

これによりアカウント開設やログインの手間を省けます。

できること6. QRコードを読み取る

対応端末のみに限りますが、QRコードを読み取ることも可能です。

読み取ったQRコードとWebサービスを連携することにより、店舗ごとに異なる情報をユーザーに提示したり、別ユーザーのQRコードを読み取ってWebサービス内でコミュニケーションを取れるようにしたりできます。

※ 現在、この機能はiOS版LINEバージョン9.19.0以降では使用できません。QRコード読み取りを実装するときは、ユーザーの利用するスマホが対応しているか判定できるように実装しましょう。

できること7. LINE公式アカウントの登録を促す

ユーザーが自社のLINE公式アカウントを友だち追加しているかどうかも、LIFFアプリを使えば分かります。

これによりまだ公式アカウントを友だち追加していないユーザーがLIFFアプリを開いたときに、友だち追加を促す機能を実装できるのです。

できること8. 外部ブラウザからLIFFアプリを開く

LIFFアプリはブラウザからも開けるため、Webページのリンクから開く、またはGoogle検索の結果から開くことも可能です。

そのため、LINE Botなどの「LINEの中からしかアクセスできないサービス」と比較すると、LIFFアプリはより柔軟に集客戦略を立てられます。

実際にLIFFが使われているサービス

これまでLIFFを使ってできることを解説しました。

次に、実際にLIFFが利用されているサービスを4つご紹介します。

• アイカサ
• JINS
• ロクシタン
• ChargesSPOT

事例1. アイカサ

「急な雨のためにわざわざ傘を買いたくない」と考える人のための、傘シェアリングサービスを提供しているのが『アイカサ』です。

アイカサはLIFFを有効活用して、トークルーム内で完結するWebサービスを展開しています。

「傘」という日常的な道具のシェアサービスを展開するにあたり、分かりやすさや手軽さは重要です。アイカサはLIFFアプリの特徴である「トークルームの中と外を行き来せずWebサービスを展開できること」を活かして、サービス利用に至るまでのユーザーの離脱を防止しました。

事例2. JINS

自社オリジナルの安く高品質なメガネや、「花粉対策メガネ」「保湿メガネ」など利便性の高いメガネを次々と打ち出すことにより、国内トップクラスの業績を叩き出している『JINS』。

JINSのLINE公式アカウントでは、JINSアカウントの登録から店舗検索、さらにはAIによる眼鏡の「似合い度判定」など、さまざまなサービスをトークルーム上から利用できます。

またLIFFアプリを使い、トークルーム上で動くスロットを回してクーポンを獲得できるキャンペーンを展開していたのも特徴的です。

事例3. ロクシタン

国内外で高い人気を誇るコスメティックブランド『ロクシタン』も、LIFFアプリを活用中です。

メンバーズカードの会員登録サービスや、決済時に提示すればポイントやプレゼントを獲得できるサービスなど、あらゆるサービスがトークルームから利用できます。

事例4. ChargeSPOT

「どこでも借りられて、どこでも返せる」がコンセプトのモバイルバッテリーシェアリングサービス『ChargeSPOT』は、LINEのトークルーム上からモバイルバッテリーを借りられるサービスをLIFFで提供しています。

LINE公式アカウントを友だち登録すれば、トークルーム上からモバイルバッテリーの場所を検索したり、借りるためのQRコードを読み取ったり、さらには料金の支払いまでできるのが特徴です。

LIFFアプリの開発方法

実際にLIFFアプリを開発するためには、どんな手順を踏めばいいのでしょうか。

開発のために必要なものは以下の3点です。

• LINE Developersアカウント
• LINEログインチャネル
• HTMLとJavaScriptで動くWebアプリ

これらについてひとつずつ紹介します。

LINE Developersアカウント

「LINE Developersアカウント」は、開発者向けのLINEのアカウントです。アカウント登録すれば自作のサービスやアプリをとおして、LINEが公開するさまざまな機能を利用できます。

機能の利用には「チャネル」の登録が必要です。チャネルとはLINEが提供する開発者向けの機能を利用するための通信路のようなもの。主に以下の3点があります。

• LINEログイン
• Messaging API
• Clova Skil

LIFFアプリをつくるにはこれらのうち『LINEログイン』チャネルを登録する必要があります。

アカウント開設はこちら。

LINEログインチャネル

LINEログインチャネルを使えば、LINEのログイン機能を自社サービスで利用できます。

LINE Developersのコンソール画面からLINEログインチャネルを作成することで、アプリやサービスのログイン機能をLINEログインで代替し、ユーザー情報を利用できるのです。

またLINEログインチャネルにはLIFFアプリを登録できます。過去バージョンのLIFF（LIFF v2）ではMessaging APIチャネルにもLIFFアプリを登録できましたが、現在の最新バージョンのLIFF（LIFF v2）ではLINEログインチャネルのみ登録可能です。

LINEログインの詳細はこちら。

HTMLとJavaScriptで動くWebアプリ

LIFFアプリにはHTMLとJavaScriptで動くWebアプリが必要です。「LIFF SDK」をWebページのsrcタグに埋め込むことで、LIFFが提供するさまざまな機能をJavaScriptから利用できます。

作成したWebアプリをLINE DevelopersコンソールからLIFFアプリとして登録すると、LIFFアプリとして動作するURLが発行されます。このURLをスマホのWebページやインストールしているLINEアプリのトークルームから開くと、LIFFアプリが起動する仕組みです。

LIFFアプリを自分で作ってみる

では実際に、簡単なLIFFアプリを作ってみましょう。開発の手順は以下の通りです。

1. LINE Developersアカウントを開設する
2. LINE Developersコンソールからプロバイダーを作成する
3. 作成したプロバイダーに、LINEログインチャネルを登録する
4. LIFFアプリの元となるWebアプリを作成する
5. LINEログインチャネルにLIFFアプリを登録する
6. WebアプリにLIFF SDKを組み込む

手順1. LINE Developersアカウントを開設する

まずLINE Developersアカウントを開設します。

LINE DevelopersのWebサイト（ https://developers.line.biz/ja/ ）でLINEアカウントを使用しログインするだけで開設可能です。

アカウントを開設するだけでLINE Developersのコンソール画面を利用できます。今後はこのコンソール画面から作業します。

手順2. LINE Developersコンソールからプロバイダーを作成する

LINE Developersのコンソール画面からプロバイダーを作成します。プロバイダーとはLINE Developersのチャネルに自作のアプリを提供する個人または組織のことです。

プロバイダーはLINE DevelopersコンソールのTOP画面から「Create new provider」ボタンを押し、プロバイダー名を入力するだけで作成できます。

手順3. 作成したプロバイダーに、LINEログインチャネルを登録する

作成したプロバイダーにLINEログインチャネルを登録します。

さきほど作成したプロバイダーの管理画面から、「Create LINE Login channel」をクリックしましょう。すると、LINEログインチャネルの作成フォームが表示されます。

フォームにチャネル名やチャネルの説明、アイコンなど必要事項を記入し画面下部の「Create」ボタンを押すと、LINEログインチャネルの登録完了です。

手順4. LIFFアプリの元となるWebアプリを作成する

LINEログインチャネルを登録を終えたらWebアプリを作りましょう。

Webアプリはただソースコードを用意するのではなく、実際にWeb上へ公開しなければいけません。今回は、以下のHello worldをHTMLで返すだけの静的ページをFirebase Hostingで公開してみます。

<!-- headタグ等は略 -->
<body>
<div>Hello world.</div>
</body>

上記HTMLをFirebase Hostingにデプロイしたら、公開URLにアクセスしてみましょう。「Hello world.」とだけ書かれたページが表示されたでしょうか。

現時点ではLIFFアプリとしての機能を利用してはいませんが、この状態でコンソール画面に戻ります。

手順5. LINEログインチャネルにLIFFアプリを登録する

コンソール画面に戻ったら、先ほど作成したWebアプリをLIFFアプリとして登録します。

まずLINEログインチャネルの管理画面を開き、画面中央のプルダウンメニューから「LIFF」を選択、表示された「Add」ボタンを押してください。するとLIFFアプリ追加のためのフォーム画面が表示されるため、必要事項を記入します。

なお、このフォーム画面の「Size」で選択した大きさが、LIFFアプリを開いたときのウィンドウの大きさになります。好きなサイズを選びましょう。

また「Endpoint URL」には先ほど作成したWebアプリの公開URLを入力してください。ここで設定したURLのページが、LIFFアプリ起動時に最初に開くページになります。

すべてのフォームを入力して「Add」を押せば登録完了です。

このときコンソール画面に表示されている「LIFF URL」がLIFFアプリとしてアクセスするためのURLです。このURLをトークルームに貼り付けてクリックしてみましょう。

そうすると「サービス提供者が次の許可をリクエストしています」と表示されます。これを許可すれば、WebアプリがLIFFアプリとして起動します。

手順6. WebアプリにLIFF SDKを組み込む

LIFFアプリを公開できましたが、現状ではLIFFが提供する機能を利用していません。

そこで「Hello “ユーザー名”.」とユーザーに挨拶できるようにWebアプリを書き換えてみましょう。

まずheadタグ内に以下URLの「LIFF SDK」（LIFFの機能を利用するためのツールキット）を取得するscriptタグを挿入します。charset属性は「utf-8」を指定してください。

https://static.line-scdn.net/liff/edge/2.1/sdk.js

これでJavaScriptから機能を利用できるようになりました。今回は「ユーザーに挨拶するWebアプリ」をつくるため、LIFF SDKを介して利用者のプロフィール名を取得し、HTMLに挿入するコードを書いてみます。

<body>
<div>Hello <span id="name">world</span>.</div>
</body>
<script>
// LIFFの初期化を行う
liff.init({
// 自分のLIFF ID（URLから『https://liff.line.me/』を除いた文字列）を入力する
liffId: "1654040741-0Wrbl8Lb"

}).then(() => { // 初期化完了. 以降はLIFF SDKの各種メソッドを利用できる

// 利用者のLINEアカウントのプロフィール名を取得
liff.getProfile().then(profile => {

// プロフィール名
const name = profile.displayName

// HTMLに挿入
document.querySelector("#name").innerText = name
})
})
</script>

HTMLを書き換えてデプロイしたら、もう一度LIFFアプリを起動してみましょう。（使用しているスマホがAndroidの場合は前回LIFFで開いたHTMLがキャッシュされているため、起動前に「設定」アプリからLINEのメモリを削除する必要があります。

LIFFアプリを開いた直後は「Hello world.」と表示されますが、およそ1秒後に「liff.init」「liff.getProfile」が完了して「Hello “ユーザー名”.」と書き変わります。

LIFFを介してLINE利用者のアカウント名を取得し、ユーザーに挨拶するLIFFアプリの完成です。

おわりに

今回はLIFF（LINE Front-end Framework）でできることや実際に使われているサービス例を紹介しました。

LIFFは自作サービスのLINE公式アカウントの機能を強化できます。ロクシタンやアイカサなど、すでにLIFFを利用してさまざまなサービスが生まれているのです。

LINEアカウントとWebアプリがあればさまざまなLIFFアプリを開発できるので、興味のある方はぜひLIFFアプリを自作してみてください。

（執筆：sig_Left　編集：Suzuki Miyuu　ロゴ提供：LINE株式会社）

LINE MOOKをモバイル向けコンテンツデザインの手本にすべき4つの理由

Workship MAGAZINE

ダークソーシャルとは？マーケターにとって厄介な“見えないユーザー”を知ろう

Workship MAGAZINE

アプリのチャットインターフェース設計に役立つアイディア48選

Workship MAGAZINE