LIFF URLに追加したパラメータ、読み取るのはliff.init()の後で

2026/07/16

LIFF URLには、クエリパラメータを追加できることを知っていますか？今回のTipsでは、LIFF URLに追加したパラメータの便利な使い方と、それを読み取るときのコツを紹介します。

LIFF URLには追加情報を付与できる

LIFF URLには、パスやクエリパラメータ、URLフラグメントといった追加情報を付与できます。

https://liff.line.me/{liffId}/?store=shibuya
https://liff.line.me/{liffId}/summer2026/#coupon

追加情報は、最終的に表示されるページのURLにも引き継がれます。店舗ごとにパラメータを変えたQRコードを配って画面を出し分けたり、キャンペーンの流入経路を区別したりといった使い方ができます。

ただし、パラメータなどの追加情報を読み取るタイミングには注意が必要です。

パラメータの読み取りは`liff.init()`の完了後に

LIFF URLに付与した追加情報は、一時的にliff.stateというクエリパラメータへ退避され、liff.init()メソッドの処理の中で行われるリダイレクトを経て、元の形に復元されます。

例えばhttps://liff.line.me/{liffId}/?store=shibuyaにアクセスしたとき、次の書き方は典型的な失敗例です。

javascript

// NG例: liff.init()の完了を待たずにURLを読み取っている
const params = new URLSearchParams(location.search);
const store = params.get("store"); // nullになることがある

liff.init({ liffId: myLiffId });

追加情報がまだliff.stateへ退避されたままのため、storeはnullになることがあります。

そのため、URLの読み取りは、liff.init()メソッドが返すPromiseオブジェクトがresolveされてから実行してください。

javascript

await liff.init({ liffId: myLiffId });

// liff.init()完了後にパラメータを読み取ることができる
const params = new URLSearchParams(location.search);
const store = params.get("store");

パスやURLフラグメントも同様に、liff.init()の完了後であればlocation.pathnameやlocation.hashから読み取ることができます。

書き換えはより深刻で、resolve前にURLを変更したりサーバーサイドでリダイレクトしたりすると、LIFFアプリを正常に開けない場合があります。SPAのルーターや計測タグなど、読み込み時にURLを操作するライブラリの初期化もliff.init()の完了後に行ってください。詳しくは、『LIFF APIリファレンス』の「URLを操作する処理はliff.init()が完了してから実行する」を参照してください。