地味だけど、めちゃ重要【LINE公式アカウントのパーマネントリンク実装】

LINE公式アカウント内でアプリケーションを作るときに、LIFFアプリを使うことが多々あります。

今回は、その中の「パーマネントリンク」の実装について触れていきます。

提供しているサービスがCMS機能などを使って複数のページを持っている場合パーマネントリンクを使用しないと、WEBサイトをLIFFアプリとして活用することが実質不可能になります。（不可能というよりかは、幅が狭くなる）

LIFFアプリの仕様を確認する

ユーザーにLIFFアプリを使ってもらう際、LINEログインの中で発行したLIFF URLへアクセスしていただく必要があります。

ただし、１アカウントあたり、発行できるLIFFURLの上限は30件とされています。

LIFFアプリをチャネルに追加する
LIFFアプリをチャネルに追加します。チャネルごとに、最大30件のLIFFアプリを追加できます。

https://developers.line.biz/ja/reference/liff-server/#add-liff-app

例えば、求人サイトなどを運営している方が、求人ページごとにLIFF URLを発行指定いくと、30求人しかLIFFアプリとして活用することができないということです。

これを解決するために、パーマネントリンク実装をする必要があります。

パーマネントリンクについて整理

パーマネントリンクを作成する

例として、WEBサイトでブログを運営しているとします。
多くの記事があり、下記のようなURLが存在しているとしましょう。

https://www.exampletest/blog/10001
https://www.exampletest/blog/10002
https://www.exampletest/blog/10003

もしも、一つずつLIFFURLを発行するとなると下記のような作りになります。（LIFFURLは適当です）

https://www.exampletest/blog/10001　→https://liff.line.me/123456-abcedfghttps://www.exampletest/blog/10002　→https://liff.line.me/234567-bcdefghhttps://www.exampletest/blog/10003　→https://liff.line.me/345678-cdefghi

この調子で、LIFFURLを発行してしまうと、上限の30URLにすぐ到達してしまいます。

なので、パーマネントリンクを活用して解決しましょう。
まず、下記のようなLIFF URLを発行します。

https://www.exampletest/blog/　→https://liff.line.me/123456-abcedfg

先ほどと異なる点としては、/blog/の部分までしかLIFFURLとして発行をしていない部分です。
このLIFF URLを発行したら、あとは、パーマネントリンクのURLを使う下準備が完了します。

https://liff.line.me/123456-abcedfg?10001
https://liff.line.me/123456-abcedfg?10002
https://liff.line.me/123456-abcedfg?10003

発行しているLIFF URLは1つですが、複数のページにアクセスすることができるようになりました。

オフィシャルのドキュメントに書いてあることが、実は最初よくわからなかったのですが、噛み砕くと上記のような説明になります。

オフィシャルのドキュメントから引用

WEBサイト側の準備

https://www.exampletest/blog/10001 のようなURLに対してパーマネントリンクを使用する場合、https://www.exampletest/blog/ の独立したページが必要になります。

パーマネントリンクを利用する＝2次リダイレクトを利用することをさすためです。

https://www.exampletest/blog/10001にアクセスするまでの流れは下記の通りです。

　1次リダイレクト
　2次リダイレクト
https://www.exampletest/blog/10001

1次リダイレクト先のページで必要な処理

超、忘れがち。
1次リダイレクト先のページに、LIFFを初期化する処理を入れましょう。
こいつを入れておかないと、1次リダイレクトのみで終了してしまい、目的のページに辿り着きません。

<script>
liff
  .init({
    liffId: "あなたのLIFFIDを入れてね", // Use own liffId
  });
</script>

この仕様にたどり着くまでピー時間かかり、精魂尽き果てました。

ちなみに、その詳細は公式ドキュメントにちゃんと書いてあります。

LIFF v2 APIリファレンス

正しくLIFFアプリを初期化するために、1次リダイレクト先URLと2次リダイレクト先URLで、1回ずつliff.init()メソッドを実行してください。

この1文を探す＋意味を理解するまでに、アホみたいに時間がかかりました。

まとめ

インターフェイスにLINEを活用するといろんなアイデアが比較的小コストで実装できるので便利ですよね。
この仕様は、どうしてもつくりたいものがあって、あーでもないこーでもないと彷徨いながら到達したものです。（調べ方が悪かった）
どなたかの力になれる記事になれたら嬉しいです！

PS
アイキャッチは、midjourneyに「パーマネントリンク」とだけ指示を渡して生成したものです。
何かに彷徨っている感じがしますが、パーマネントリンクの仕様を理解するまでWEBサイトを彷徨っている自分の姿を投影しているようで気に入っています。（適当）