概要
業務の中でLIFF URL(https://liff.line.me で始まるURL)にクエリパラメータを付与して処理を行う、というケースがありました。
そこで困ったことがあったので共有しようと思った次第です。
#結論
LIFF URLにクエリパラメータを付ける場合、liff.initのあとにsetTimeoutなどのsleep処理を入れると動作する。（根本原因は不明です、、）
動作環境
LIFF： v2.4.1
クライアント： Nuxt.js（SPAモード）
LIFFでクエリパラメータを使えるようになった
LIFF v2.3.0からhttps://liff.line.me?hoge=hoge のようにLIFF URLに対してクエリパラメータを使えるようになりました。
詳しくは以下をご覧ください。
https://developers.line.biz/ja/docs/liff/opening-liff-app/
困る前のクライアントのソース
liffのSDKを使用するには「liff.init」という関数を実行する必要があります。
今回はNuxtを使用していたので、pluginsにliff.initを実行する関数を書いて実行しました。
この段階では正常に動作することが確認されました。
import liff from '@line/liff'
const liffConfig = async (_) => {
await liff.init( { liffId:'xxxxxxxxxxxx' } )
}
export default liffConfig
困ったこと
要件の都合上、LIFF URLに対してクエリパラメータを付与してアクセスする必要があったため、LINE DevelopersコンソールでLIFF URLを作成しhttps://liff.line.me?hoge=hoge の形でアクセスしました。
するとliff.init前後の処理が無限ループされる現象が起きました。
原因を探す
liffのSDKはローカルホストでは動作しないため、chromeのデベロッパーツール等でデバッグすることが出来ません（ここが一番つらかった）。
そのため開発環境にひたすらalert関数を入れて、どこまで処理が走っているのか検証しました。
原因を発見（？）
alert関数を入れて打鍵しながらデバッグした結果、liff.init後のalertで数秒待ったのちに処理を続けると、以前と同様に動作することが確認できました。
import liff from '@line/liff'
const liffConfig = async (_) => {
alert('initする前')
await liff.init( { liffId:'xxxxxxxxxxxx' } )
// 打鍵時にここで数秒待つと動いた、、、
alert('initした後')
}
export default liffConfig
最終的に
数秒待ったのちに動作するのであれば、そのような処理を追加したら良いのでは？と思い、setTimeoutを使用してsleep処理を追加しました。
根本原因は不明ですが、動くものを目指すという意味ではとりあえず良しとしました。
import liff from '@line/liff'
const liffConfig = async (_) => {
await liff.init( { liffId:'xxxxxxxxxxxx' } )
await sleep(1000)
}
// setTimeoutをそのまま使うのはイケてないと思ったので、Promiseでラップしています。
const sleep = (msec) =>
new Promise((resolve) => setTimeout(resolve, msec))
export default liffConfig
最後に
根本原因を突き止めれなかったのは悔しいですが、何とか動くものが出来て良かったのかなと思います。
少しでも同じ現象に出くわした方の助けになれれば幸いです。
こうしたほうが良いのではなどのコメントがあれば、ぜひよろしくお願いします！