# LINE Front-end Framework (LIFF)
LINE Front-end Framework(LIFF)は、LINEヤフー株式会社が提供するウェブアプリのプラットフォームです。このプラットフォームで動作するウェブアプリを、LIFFアプリと呼びます。
LIFFアプリを使うと、LINEのユーザーIDなどをLINEプラットフォームから取得できます。LIFFアプリではこれらを利用して、ユーザー情報を活用した機能を提供したり、ユーザーの代わりにメッセージを送信したりできます。
LIFF v2で追加された機能については、「リリースノート」を参照してください。
今後追加が予定されている機能については、『LINEログインドキュメント』のロードマップを参照してください。
LINEヤフー株式会社では開発者向けにLIFFプレイグラウンド (opens new window)というウェブアプリ(LIFFアプリ)を提供しています。LIFFプレイグラウンドではLIFFの基本的な機能が試せます。LIFFを用いるとどのようなことができるのかを確認したいときに参照してください。なお、LIFFプレイグラウンドのソースコード (opens new window)をGitHubで公開しています。
現在のところ、OpenChatではLIFFアプリの利用は正式にサポートされていません。たとえば、LIFFアプリからプロフィール情報を取得できない場合があります。
# デモ用のLIFFアプリを体験する
LINE API Use Case (opens new window)では、デモ用のLIFFアプリと、そのソースコードを公開しています。お手持ちのスマートフォンでデモ用のLIFFアプリを開いて、店舗予約やテーブルオーダーを体験してみましょう。
- デモ用のLIFFアプリでヘアサロンやレストランの店舗予約を体験する (opens new window)
- デモ用のLIFFアプリでデジタル会員証を体験する (opens new window)
- デモ用のLIFFアプリでテーブルオーダーを体験する (opens new window)
- デモ用のLIFFアプリでスマホレジを体験する (opens new window)
# 推奨環境
LIFFの推奨環境は以下のとおりです。
なお、LIFFアプリをLIFFブラウザで開いた場合と、外部ブラウザで開いた場合では、使用できる機能が異なります。たとえば、liff.scanCode()
は、外部ブラウザでは利用できません。詳しくは、「LIFF v2 APIリファレンス」を参照してください。
# LIFFアプリをLIFFブラウザで開く場合
項目 | 推奨環境 | 最低動作環境 |
---|---|---|
iOS | 最新バージョン。WKWebView (opens new window)が使用されます。 | LINEの推奨環境に準ずる。 * |
Android | 最新バージョン。Android WebView (opens new window)が使用されます。 | LINEの推奨環境に準ずる。 * |
LINE | 最新バージョン |
|
LIFFアプリは、OS、LINEともに最新バージョンの環境での利用を推奨します。上記の「最低動作環境」以降のバージョンでも、機能や設定によっては動作しない場合や画面が正常に表示されない場合があります。
* LINEの推奨環境については、ヘルプセンターの「LINEの推奨環境を教えてください (opens new window)」を参照してください。
# LIFFアプリを外部ブラウザで開く場合
以下のブラウザの最新バージョンで動作します。
Microsoft Edge、Google Chrome、Firefox、Safari
# LIFFブラウザ
LIFFブラウザはLIFFアプリ専用のブラウザです。ユーザーがLINEでLIFFのURLを開くと、LIFFブラウザでLIFFアプリが開きます。
LIFFブラウザはLINE内で動作するため、LIFFアプリはユーザーにログインを促さなくてもユーザーデータにアクセスすることができます。また、LIFFブラウザはLIFFアプリを共有したり、LIFFアプリから友だちにメッセージを送るなど、LINE特有の機能を提供しています。
# LIFFブラウザの仕様
LIFFブラウザは、iOSではWKWebView (opens new window)、AndroidではAndroid WebView (opens new window)を利用しています。そのため、LIFFブラウザの仕様および動作についてもこれらの仕組みに準拠します。
なお、LIFFブラウザは、外部ブラウザがサポートしているウェブ技術の一部をサポートしていません。詳しくは、「LIFFブラウザと外部ブラウザの違い」を参照してください。
# LIFFブラウザのキャッシュ
LIFFブラウザが利用しているWKWebView (opens new window)やAndroid WebView (opens new window) は、表示したコンテンツの内容を、Cache-Control (opens new window) などのHTTPヘッダーの指示に従って、キャッシュとして保存して利用する場合があります。
LIFFブラウザにおけるキャッシュの制御については、Cache-Control (opens new window) などのHTTPヘッダーを用いて行ってください。
LIFFブラウザに保存されたキャッシュを明示的に削除することはできません。
# LIFFブラウザの画面サイズ
LIFFブラウザは、以下の3つの画面サイズで表示できます。
画面サイズは、LIFFアプリをLINEログインチャネルに追加するときに指定します。詳しくは、「LIFFアプリをチャネルに追加する」を参照してください。
# アクションボタン
LIFFアプリの画面サイズを「Full」に指定している場合、ヘッダーには、デフォルトでアクションボタンが表示されます。
このボタンを使って、LIFFアプリをユーザーの友だちにシェアできます。アクションボタンをタップすると、以下のオプションが、ユーザーのLINEの設定言語で表示されます。
項目 | 説明 |
---|---|
シェア | 現在開いているページのパーマネントリンクを、LINEメッセージでシェアします。 |
閲覧中のページを最小化 | LIFFブラウザを最小化します。詳しくは、「LIFFブラウザを最小化する」を参照してください。 |
更新 | 現在開いているページを再読み込みします。 |
権限設定 | 権限設定画面を開きます。権限設定画面では、現在開いているLIFFアプリのカメラやマイクへのアクセス権を確認できます。変更はできません。LINEバージョン14.6.0以降で利用可能です。 |
現在のページのURLがLINE Developersコンソールの[エンドポイントURL]に指定したURLで始まらない場合、パーマネントリンクを取得できずシェアに失敗します。
LINE DevelopersコンソールでLIFFアプリの[モジュールモード]をオンにすると、アクションボタンを非表示にできます。詳しくは、「LIFFアプリをチャネルに追加する」を参照してください。
# 開発上のガイドライン
LIFFアプリを開発する際は、「LIFFアプリ開発ガイドライン」に従ってください。
# LIFFアプリの開発をサポートするツール
LINEヤフー株式会社では、開発者の方々がLIFFアプリの開発をより円滑に行えるよう、以下のツールを提供しています。
ツール名 | このツールでできること |
---|---|
LIFFスターターアプリ | LIFFについて初めて学ぶ人向けのスターターアプリです。LIFFアプリの開発の始め方を理解しやすいよう、LIFFアプリの初期化のデモのみを行っています。まずは動くものを作って、LIFFの概要を大まかに理解したい方にお勧めです。 |
Create LIFF App | LIFFアプリの開発環境がコマンド1つで構築できるCLIツールです。ReactのCreate React App (opens new window)や、Next.jsのCreate Next App (opens new window)のように、Create LIFF Appからの質問に答えていくことで、用途に合わせたLIFFアプリのひな形を含む開発環境が生成され、すぐに開発を始めることができます。 |
LIFF CLI | LIFFアプリの開発を円滑にするCLIツールです。LIFF CLIでできることは次のとおりです。
|
LIFFプレイグラウンド (opens new window) | LIFFの機能をオンライン上で試すことができます。LIFFプレイグラウンドのソースコード (opens new window)はGitHubで公開していますので、開発者は任意のLIFF IDを設定して、独自のLIFFプレイグラウンドをサーバー上にデプロイすることも可能です。 |
# 作業の流れ
LIFFアプリをエンドユーザーが利用できるようにするには、以下の手順を行います。
- LIFFアプリを追加するチャネルを作成する
- LIFFスターターアプリを試してみる、またはLIFFアプリを開発する