LINE Front-end Framework

LINE Front-end Framework(LIFF)は、LINEが提供するウェブアプリのプラットフォームです。このプラットフォームで動作するウェブアプリを、LIFFアプリと呼びます。

LIFFアプリを使うと、LINEのユーザーIDなどをLINEプラットフォームから取得できます。LIFFアプリではこれらを利用して、ユーザー情報を活用した機能を提供したり、ユーザーの代わりにメッセージを送信したりできます。

LIFF v2で追加された機能については、「リリースノート」を参照してください。

note OpenChatでのLIFFアプリの利用はサポートされていません

現在のところ、OpenChatではLIFFアプリの利用は正式にサポートされていません。たとえば、LIFFアプリからプロフィール情報を取得できない場合があります。

動作環境

LIFFをサポートするOSとLINEのバージョンは以下のとおりです。

なお、LIFFアプリをLINE内ブラウザで開いた場合と、外部ブラウザで開いた場合では、使用できる機能が異なります。たとえば、liff.scanCode()は、外部ブラウザでは利用できません。詳しくは、「LIFF v2 APIリファレンス」を参照してください。

LIFFアプリをLINE内ブラウザで開く場合

  • iOS:iOS 10以降。WKWebViewが使用されます。
  • Android:5.0以降
  • LINE:バージョン9.14.0以降

LIFFアプリを外部ブラウザで開く場合

以下のブラウザの最新バージョンで動作します。

Microsoft Edge、Google Chrome、Firefox、Safari

LIFFアプリの画面サイズ

LIFFアプリは、以下の3つの画面サイズで表示できます。

画面サイズ

画面サイズは、LIFFアプリをチャネルに追加するときに指定します。詳しくは、「LIFFアプリをチャネルに追加する」を参照してください。

開発上のガイドライン

LIFFアプリは以下のガイドラインに従って開発してください。

  • LIFFアプリで開くコンテンツのURLのフラグメントには、アクセストークンやユーザーIDが含まれます。URLの外部漏洩に注意してください。
  • LIFFアプリを起動した直後は、「LIFFアプリをチャネルに追加する」で指定したエンドポイントURLにアクセスします。URLが変更される前に、liff.init()を呼び出してください。URLが変更されてからliff.init()を呼び出すと、INIT_FAILEDが返されます。
  • LIFFアプリをSPA(Single Page Application)で構築する場合、LIFFはフラグメントを用いたルーティングとは相性が悪いため、History APIを利用して実装してください。
  • 以下のようなデバイスまたはOSの機能を利用するAPIは、必ずユーザー操作をきっかけにして実行されるように実装してください。
    • 位置情報の取得
    • カメラへのアクセス
    • マイクへのアクセス
  • ユーザーの同意なく、cookie、localStorage、またはsessionStorageを使ってユーザーをトラックしたり、LINEのユーザー情報と外部セッション情報を結びつけたりしないでください。
  • LIFFアプリでcookie、localStorage、またはsessionStorageを利用できますが、将来的に利用が制限される可能性があります。
  • テスト段階のLIFFアプリに対するアクセス権限は、LIFFアプリ側で制限してください。
  • LIFFアプリとLIFFアプリ内で開くコンテンツのURLスキームは、httpsである必要があります。コンテンツのURLスキームがhttpの場合は、LINE内ブラウザで表示されます。この場合、LIFFアプリとしてチャネルに追加されていても、LIFFアプリとして動作しません。

作業の流れ

LIFFアプリをエンドユーザーが利用できるようにするには、以下の手順を行います。

  1. LIFFアプリを追加するチャネルを作成する
  2. LIFFスターターアプリを試してみる、またはLIFFアプリを開発する

{{ $t("form.question.helpful") }}

{{ $t("form.question.detail") }}

{{ $t("form.question.improve") }}

{{ $t("form.info.start") }}{{ $t("form.info.link") }}{{ $t("form.info.end") }}


{{ $t("form.result.success") }}
{{ $t("form.result.error") }}
{{ $t("form.result.errorLink") }}