# LIFFアプリを開く

LIFF v2では、LIFFブラウザまたは外部ブラウザでLIFFアプリを開くことができます。 ここでは、ユーザーがLIFFアプリを開く操作を説明します。

  1. ユーザーがLIFF URLにアクセスします。

    LIFF URLは、LIFFアプリをチャネルに追加すると、発行されます。
    たとえば、LINEのトーク画面に、LIFFアプリを開くためのURLを入力し、吹き出しに表示されたURLをタップします。

    LIFFアプリを開く

  2. ユーザーがLIFFアプリに必要な権限を与えることを許可します。

    LIFFアプリが開きます。

LIFFアプリが開く環境について

ユーザーがLIFF URLにアクセスすると、外部ブラウザまたはLINE上でLIFFブラウザが開きます。どちらの環境で開くかは、iOSの場合はユニバーサルリンク (opens new window)、Androidの場合はApp Links (opens new window)の仕様に従います。

LINE以外のネイティブアプリ上でも開けますが、その場合は各ネイティブアプリのWebView仕様に準拠するため、どこで開かれるかは保証しません。

# LIFF URLにアクセスしてからLIFFアプリが開くまでの動作について

ここでは、ユーザーがLIFF URLにアクセスしたときに、LIFFアプリが正しく開くように実装するために、2つのリダイレクト先の設定方法、およびliff.init()メソッドを実行するタイミングを説明します。

リダイレクト先 説明
1次リダイレクト先URL ユーザーがLIFF URLにアクセスしたときに、LIFFサーバーから初めてリダイレクトされる先のURLです。ここにリダイレクトされたときに、liff.init()メソッドを実行します。
2次リダイレクト先URL liff.init()メソッドが実行されたときに、ユーザーがリダイレクトされる先のURLです。ここにリダイレクトされたら、LIFFアプリのページを表示します。

リダイレクトの流れ

LIFFアプリ初期化時の注意事項

liff.init()メソッドが返すPromiseオブジェクトがresolveする前に、サーバーやフロントエンド側の処理などでURLを変更しないようにしてください。URLを変更すると、INIT_FAILEDが返され、LIFFアプリを開けません。 そのほか、LIFFアプリ初期化時の注意事項について詳しくは、「LIFFアプリを初期化する」を参照してください。

# LIFF URLを作成する

LIFF URLは、LINEが提供するLIFFサーバーを指すURLです。 LIFFアプリをチャネルに追加すると、発行されます。

# 1次リダイレクト先URLを作成する

1次リダイレクト先URLは、常にLINE Developersコンソールの[エンドポイントURL]に指定したURLです。

LIFF URLに指定した追加情報の扱い

1次リダイレクト先URLではLIFF URLに指定した追加情報(例:path_A/?key1=value1#URL-fragment)はすべてliff.stateクエリパラメータに含まれています。

例:https://example.com/2020campaign/?key=value&liff.state=urlencoded(path_A/?key1=value1#URL-fragment)

なお、LIFF URLに追加情報を指定しない場合は、liff.stateクエリパラメータは省略されます。

# 2次リダイレクト先URLを作成する

2次リダイレクト先URLは、ユーザーがアクセスするURLによって異なります。

LINE Developersコンソールの[エンドポイントURL]に指定したパスやクエリパラメータ(/2020campaign/?key=value)が、2次リダイレクト先に含まれます。

ユーザーがアクセスするURL 2次リダイレクト先URL
LIFF URL(1)
例:https://liff.line.me/{liffId}
LINE Developersコンソールの[エンドポイントURL]に指定したURLです。
例:https://example.com/2020campaign/?key=value
LIFF URLに追加情報を指定したURL(2)
例:https://liff.line.me/{liffId}/path_A/?key1=value1#URL-fragment
図の(2)のように3種類の情報を組み合わせたURLです。
  • エンドポイントURL]に指定したドメイン名(https://example.com
  • エンドポイントURL]に指定したパスやクエリパラメータ(/2020campaign/?key=value
  • LIFF URLに指定した追加情報(/path_A/?key1=value1#URL-fragment
例:https://example.com/2020campaign/path_A/?key=value&key1=value1#URL-fragment

エンドポイントURL

# LIFFアプリから別のLIFFアプリを開いた場合の動作について

画面サイズがFull表示のLIFFアプリ内で、別のLIFFアプリへのリンクをクリックすると、LIFFブラウザを開いたまま別のアプリを表示することができます。

ブラウザが閉じないため、LIFFブラウザの戻るボタンで遷移元のLIFFアプリに戻ることができます。

別のLIFFアプリへ遷移する際に、liff.init()liff.login()を実行しログイン処理を行いますが、この画面遷移中はPromiseオブジェクトはresolveまたはrejectもされず、pending状態のままとなります。ログイン処理後のLIFFアプリのエンドポイントURLを開いたタイミングで、初めてliff.init()がresolveあるいはrejectされます。

LIFFアプリを閉じずに別のLIFFアプリに遷移できる条件
  • LIFF SDKバージョンが2.4.1以上、ユーザーのLINEバージョンが10.18.0以上
  • 遷移元のLIFFアプリの画面サイズがFull表示に設定されている
  • 遷移先のLIFFアプリがliff.init()で正しく初期化されている
URL検証機能

liff.login()メソッドの引数にredirectUriを指定した場合、指定したURLが[エンドポイントURL]のドメイン名とパスの組み合わせ(例:https://example.com/path)と一致しているか検証されます。不一致だった場合はエラー画面が表示され、ログイン処理が失敗します。

if (!liff.isLoggedIn()) {
  liff.login({ redirectUri: "https://example.com/path" });
  //ドメイン名とパス(https://example.com/path)がエンドポイントURLと一致しているか検証します。
}

redirectUriを指定することで、[エンドポイントURL]が正しく設定されていることを確認できます。なお、クエリパラメータ(?key=value)やURLフラグメント(#URL-fragment)は検証されません。

URL一致の判定基準について詳しくは、「URL検証機能」を参照してください。

LIFF-apps-transition

LIFFアプリの画面サイズによる動作
  • 遷移元のLIFFアプリの画面サイズがTallもしくはCompactの場合は、遷移先の画面サイズにかかわらず一度ブラウザが閉じてから、遷移先のLIFFアプリが表示されます。
  • 遷移元のLIFFアプリの画面サイズがFullの場合は、遷移先のLIFFアプリの画面サイズがTallもしくはCompactでもFullサイズで表示されます。
意図しない動作

古いバージョンのLIFF SDKを使っている場合、以下のような意図しない動作になることがあります。

  • パス(/path)が指定されたLIFF URLから別のLIFFアプリへ遷移したにもかかわらず、LINE Developersコンソールの[エンドポイントURL]に指定したURLへ遷移してしまう
  • ユーザーに権限の認可を求める同意画面で[キャンセル]をクリックした場合、一度LIFFブラウザを閉じなくてはならない
  • 遷移先がLINEミニアプリの場合、LIFFブラウザヘッダのデザインが自動で変化しない

複数のLIFFアプリ間を遷移するように設計する際は、最新版のLIFF SDKを使うことをお勧めします。