はじめまして！清水です。
Social Databank Tech Blog Advent Calendar 2023の22日目です。
マーケティングツールLinyでは、LIFFアプリを活用している機能がいくつかあります。
僕自身LIFFアプリを作成する際、ややこしなと思ったり嵌ってしまったことがあるので整理していきたいとおもいます。
※LINEミニアプリは対象外です。
LIFFの動作するブラウザについて
まずはブラウザについて整理します。
LIFFアプリが動作するブラウザにより使用できないAPIがあったり、ブラウザによりユーザのログイン状態の前提が違ったりします。
LIFFブラウザ
LINEアプリ内でLIFFのURLを開いたときのブラウザのことです。
compact, tall, full の3サイズがあります。
※Linyのユーザ向けにはトーク内ブラウザと案内されているものとなります（ややこしくてすみません）
ユーザは初めからログイン状態であり、LIFFブラウザでのみ使用可能なAPI(liff.sendMessages)もあります。
LIFFブラウザ tall
LINE内ブラウザ（アプリ内ブラウザ）
LINEのアプリ内専用のWebブラウザです。トーク画面内でURLをクリックした際などにLINEアプリ内で開かれます。
進む, 戻る, リロード, 共有 などの各種ボタンが配置されたフッターが特徴です。
LINE内ブラウザ
外部ブラウザ
Chrome、SafariやFirefoxなどLINEアプリ外で開くWebブラウザです。
アプリ内のURLにopenExternalBrowser=1クエリパラメータが付いていれば外部ブラウザで開かれます。
※LIFF URLにopenExternalBrowser=1クエリパラメータを付与しても機能しません。
LIFF URL アクセス時の初期化処理について
liff.init()実行時の遷移フロー
簡単にliff.init()処理のフローを確認します。
LIFF URL --> １次リダイレクト先 --> liff.init().then(/* 実行されない */) --> ２次リダイレクト先 --> liff.init().then(/* 実行される */)
※１次リダイレクト先でのliff.init()解決後のthen()処理は実行されないという記述をどこかで見た記憶があり、実際その通りの挙動をするのですがどこに書かれていたのか見つけられませんでした...検証の際に見ていきます
LIFFアプリを動かす
今回、LIFFの挙動を確認するために簡易的なSPAアプリをつくりました。
こちらを使用してLIFFの挙動を確認していきたいと思います。
- @line/liff: 2.23.0
LIFFアプリのエントリーポイントです。
エントリーポイントで必ずliff.init()を呼び出しています。
下記コメントアウト部分をインして挙動を確認していきます。
LIFF URL にパスやパラメータを付与する場合【外部ブラウザ】
LIFFアプリの設定値
| 項目 | 値 |
|---|---|
| LIFF URL | https://liff.line.me/2002128678-lmmLrwbM/profile?key=val |
| エンドポイントURL | https://dev.radiotail.net/ |
結果
-
１次リダイレクトされました。
LIFF URLにつけたパスやクエリパラメータの情報がliff.stateパラメータに入っています。
-
２次リダイレクトされました。
エンドポイントURLにLIFF URLで指定していたパスとクエリパラメータがついた状態でリダイレクトされています。
-
liff.init()が成功しました。
-
LIFF URLにしたパスのプロフィールページが表示されました。
LIFF URL にパスやパラメータを付与しない場合【外部ブラウザ】
LIFFアプリの設定値
| 項目 | 値 |
|---|---|
| LIFF URL | https://liff.line.me/2002128678-lmmLrwbM |
| エンドポイントURL | https://dev.radiotail.net/ |
結果
- １次リダイレクトされました。
-
liff.init()が成功しました。
- ページが表示されました。
ドキュメントを見るとLIFF URLへのアクセスの場合１次->２次の遷移が行われるように見受けられます。
しかし、今回検証したところ、どうやらLIFF URLにパスやクエリパラメータ、フラグメントなどの付加情報がない場合リダイレクトが省略されるようでした。
LINEアプリ内でLIFF URLを開いた場合の処理フローが同様の結果となったので省略します。
おわりに
今回はLIFFアプリで必ずつかうliff.init()の挙動を動かしながら確認してみました。
LIFFは頻繁にアップデートされて細かく仕様が変わったりしている印象があります。キャッチアップがんばります！
アドベントカレンダー、まだまだ続きます！お楽しみに！
Discussion