# LIFFアプリを開く
LIFF v2では、LIFFブラウザまたは外部ブラウザでLIFFアプリを開くことができます。 ここでは、ユーザーがLIFFアプリを開く操作を説明します。
ユーザーがLIFF URLにアクセスします。
LIFF URLは、LIFFアプリをチャネルに追加すると、発行されます。
たとえば、LINEのトーク画面に、LIFFアプリを開くためのURLを入力し、吹き出しに表示されたURLをタップします。ユーザーが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.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です。
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です。
https://example.com/2020campaign/path_A/?key=value&key1=value1#URL-fragment |
# LIFFアプリから別のLIFFアプリを開いた場合の動作について(LIFF間遷移)
LIFFブラウザでLIFFアプリを開いているときに、別のLIFFアプリへのリンクをクリックすると、LIFFブラウザを開いたまま別のアプリを表示することができます。これを「LIFF間遷移」と呼びます。LIFF間遷移ではLIFFブラウザが閉じないため、LIFFブラウザの戻るボタンで遷移元のLIFFアプリに戻ることができます。
- LIFF間遷移が可能な条件
- LINEのバージョン12.13.0未満におけるliff.init()のPromiseオブジェクトについて
- LIFFアプリの画面サイズによる動作
- LIFF間遷移後の「chat_message.write」スコープについて
- LIFF間遷移前のURLを取得する
古いバージョンのLIFF SDKを使っている場合、以下のような意図しない動作になることがあります。
- パス(
/path
)が指定されたLIFF URLから別のLIFFアプリへ遷移したにもかかわらず、LINE Developersコンソールの[エンドポイントURL]に指定したURLへ遷移してしまう - ユーザーに権限の認可を求める同意画面で[キャンセル]をクリックした場合、一度LIFFブラウザを閉じなくてはならない
- 遷移先がLINEミニアプリの場合、LIFFブラウザヘッダのデザインが自動で変化しない
複数のLIFFアプリ間を遷移するように設計する際は、最新版のLIFF SDKを使うことをお勧めします。
LIFFアプリから別のURLにアクセスしたときに、「○○(LIFFアプリの名称)へ移動しました。」というメッセージが表示される場合があります。
このメッセージは、先に開いているLIFFアプリ(遷移元のLIFFアプリ)と異なるLIFF IDのLIFFアプリを開いたときに表示されます。このメッセージの表示の有無は、LIFF間遷移の成功とは関係ありません。
# LIFF間遷移が可能な条件
以下の条件をすべて満たす場合に、LIFF間遷移が可能となります。
- LIFF SDKバージョンが2.4.1以上、ユーザーのLINEバージョンが10.18.0以上
- 遷移元のLIFFアプリの画面サイズが
Full
表示に設定されている - 遷移先のLIFFアプリが
liff.init()
で正しく初期化されている
# LINEのバージョン12.13.0未満におけるliff.init()のPromiseオブジェクトについて
LINEのバージョンが12.13.0未満の場合、別のLIFFアプリに遷移するときに、liff.init()
メソッドが内部で自動的にliff.login()
メソッドを実行しログイン処理を行います。そのため、画面遷移中はPromise
オブジェクトはresolveまたはrejectもされず、pending状態のままとなります。ログイン処理後のLIFFアプリのエンドポイントURLを開いたタイミングで、初めてliff.init()
がresolveあるいはrejectされます。
# LIFFアプリの画面サイズによる動作
- 遷移元のLIFFアプリの画面サイズが
Tall
もしくはCompact
の場合は、遷移先の画面サイズにかかわらず一度ブラウザが閉じてから、遷移先のLIFFアプリが表示されます。 - 遷移元のLIFFアプリの画面サイズが
Full
の場合、遷移後のLIFFアプリは画面サイズの指定にかかわらずFull
で表示されます。 - 遷移元のLIFFアプリの画面サイズが
Full
で、遷移先のLIFFアプリの画面サイズの指定がTall
もしくはCompact
だった場合、遷移後のLIFFアプリでは、アクションボタンは表示されません。
# LIFF間遷移後の「chat_message.write」スコープについて
LIFF間遷移後のchat_message.write
スコープは、遷移先のURLによって有効かどうかが異なります。
遷移先のURL | URLの例 | 遷移後のchat_message.write スコープ |
---|---|---|
LIFF URL | https://liff.line.me/{liffId} | 有効 |
LIFF URLに追加情報を指定したURL | https://liff.line.me/{liffId}/path_A/?key1=value1#URL-fragment | 有効 |
エンドポイントURL | https://example.com | 無効 |
chat_message.write
スコープが有効であれば、遷移後のLIFFアプリでもliff.sendMessages()
メソッドを利用できます。
# LINEのバージョン12.13.0未満の場合は「chat_message.write」スコープが無効になります
LINEのバージョン12.13.0未満では、LIFFアプリ AからLIFFアプリ Bを開いた場合、遷移後のLIFFアプリ Bではchat_message.write
スコープが無効になり、チャネル同意画面にも表示されません。そのため、chat_message.write
スコープが必要なliff.sendMessages()
メソッドはLIFFアプリ Bでは利用できません。
# LIFF間遷移前のURLを取得する
LIFF間遷移でLIFFアプリを開いた場合、遷移後のLIFFアプリのURLにはliff.referrer
というクエリパラメータが付与されます。liff.referrer
の値には、LIFF間遷移時にLIFFサーバーが受信したReferer
リクエストヘッダーのアドレスを、パーセントエンコード (opens new window)したURLが設定されます。liff.referrer
の値を確認することで、遷移前のURLを取得できます。
詳しくは、2023年11月30日のニュース、「LINEバージョン12.13.0以降でLIFF間遷移後にliff.referrerが付与されない不具合を修正しました」を参照してください。
以下は、LIFF間遷移時にliff.referrer
が付与される例です。
遷移前のLIFFアプリのURL | リンク先のURL | 遷移後のLIFFアプリのURL(liff.init() メソッド実行後) | |
---|---|---|---|
付与される場合 | https://first.example.com/ | https://liff.line.me/{LIFF ID} (LIFF URL) | ✅ https://second.example.com/?liff.referrer=https%3A%2F%2Ffirst.example.com%2F ※1 |
付与されない場合 | https://first.example.com/ | https://second.example.com/ (エンドポイントURL) | ❌ https://second.example.com/ ※2 |
※1 遷移後のLIFFアプリのURLにはliff.referrer
以外にもliff.*
のクエリパラメータが付与されていることがあります。
※2 LIFFアプリのエンドポイントURLを直接開いた場合、liff.referrer
は付与されません。