# LIFFアプリを開く

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

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

LIFF URLは、LIFFアプリをチャネルに追加すると、発行されます。
たとえば、LINEのトーク画面に、LIFFアプリを開くためのURLを入力し、吹き出しに表示されたURLをタップします。
ユーザーがLIFFアプリに必要な権限を与えることを許可します。

LIFFアプリが開きます。

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

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

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

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

エンドポイントURLおよびLIFF URLの仕様を変更しました

2020年6月29日にお知らせしたとおり、LINE Developersコンソールの［エンドポイントURL］に入力したパス（/path）およびクエリパラメータ（?key=value）を、LIFFアプリで利用できるようになりました。

新仕様を利用するには、LIFFアプリの［LIFF URLの追加情報の処理方法］を「連結」に設定します。今後は、新仕様を利用することを推奨します。

LIFF URLの追加情報の処理方法

なお、以下の点に注意してください。

LIFFアプリが新仕様に対応していない場合は、「置換（後方互換性モード）」に設定してください。この場合は、仕様変更の影響を受けません。
新しいLIFFアプリを追加した場合は、「連結」に設定されています。追加するときは、この設定項目は表示されません。必要に応じて編集してください。
「連結」を使用する場合、LIFF SDK v2.3.0以降を使用してください。v2.3.0より前のバージョンを使用すると、「連結」に設定していても「置換（後方互換性モード）」の仕様でLIFF URLの追加情報が処理されます。

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

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

リダイレクトの流れ

liff.init()メソッドを実行するタイミングに注意してください

1次リダイレクト先URL以外のタイミングでliff.init()メソッドを実行すると、INIT_FAILEDが返され、LIFFアプリを開けません。

# LIFF URLを作成する

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

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

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

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

1次リダイレクト先URLでは［LIFF 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は、LINE Developersコンソールの［LIFF URLの追加情報の処理方法］の設定と、ユーザーがアクセスするURLによって異なります。

# ［LIFF 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

ユーザーがアクセスする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`

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 URLの追加情報の処理方法］が「置換（後方互換性モード）」の場合

LINE Developersコンソールの［エンドポイントURL］に指定したパスやクエリパラメータ（/2020campaign/?key=value）が、2次リダイレクト先に含まれないことがあります。

ユーザーがアクセスするURL 2次リダイレクト先URL

LIFF URL LINE Developersコンソールの［エンドポイントURL］に指定したURLです。
例：https://example.com/2020campaign/?key=value

注意：［エンドポイントURL］の設定内容によっては、指定したパスやクエリパラメータ（/2020campaign/?key=value）が、2次リダイレクト先に含まれないことがあります。

LIFF URLに追加情報を指定したURL

ユーザーがアクセスするURL	2次リダイレクト先URL
LIFF URL	LINE Developersコンソールの［エンドポイントURL］に指定したURLです。例：`https://example.com/2020campaign/?key=value` 注意：［エンドポイントURL］の設定内容によっては、指定したパスやクエリパラメータ（`/2020campaign/?key=value`）が、2次リダイレクト先に含まれないことがあります。
LIFF URLに追加情報を指定したURL	以下の2種類の情報を組み合わせたURLです。［エンドポイントURL］に指定したドメイン名（`https://example.com`） LIFF URLに指定した追加情報（`/path_A/?key1=value1#URL-fragment`）例：`https://example.com/path_A/?key1=value1#URL-fragment` 注意：［エンドポイントURL］に指定したパスやクエリパラメータ（`/2020campaign/?key=value`）は、2次リダイレクト先に含まれません。

以下の2種類の情報を組み合わせたURLです。

［エンドポイントURL］に指定したドメイン名（https://example.com）
LIFF URLに指定した追加情報（/path_A/?key1=value1#URL-fragment）

例：https://example.com/path_A/?key1=value1#URL-fragment

注意：［エンドポイントURL］に指定したパスやクエリパラメータ（/2020campaign/?key=value）は、2次リダイレクト先に含まれません。

注意

liff.permanentLink.createUrl()メソッドを実行したとき、現在のページのURLが、［エンドポイントURL］に指定したURLで始まらない場合、パーマネントリンクを取得できません。

特に［LIFF URLの追加情報の処理方法］が「置換（後方互換性モード）」のときは、［エンドポイントURL］に指定したパスやクエリパラメータ（/2020campaign/?key=value）が、2次リダイレクト先に含まれないことがあります。その場合、liff.permanentLink.createUrl()メソッドが上記の条件を満たすため、パーマネントリンクを取得できません。

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

画面サイズがFull表示のLIFFアプリ内で、別のLIFFアプリへのリンクをクリックすると、LIFFブラウザを開いたまま別のアプリを表示することができます。
ブラウザが閉じないため、LIFFブラウザの戻るボタンで遷移元のLIFFアプリに戻ることができます。

別のLIFFアプリへ遷移する際に、liff.init()がliff.login()を実行しLINEログイン処理を行いますが、この画面遷移中は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）と一致しているか検証されます。不一致だった場合はエラー画面が表示され、LINEログインに失敗します。

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

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

URL一致の判定基準は、［LIFF 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を使うことをお勧めします。