LIFF(LINE Front-end Framework)を使うと、LINE上でブラウザを開きLINEのログインやユーザ情報をAPIで受け取り連動させるサービスをHTML+CSS+JavaScriptといったwebコンテンツと同様の言語で作られます。
このLIFFを動作させるには、いくつか制約があります
- LINEの内蔵ブラウザでなければLIFF SDKのログインは動作しない
- LINEの内蔵ブラウザは、サーバ証明書がクリアでないとコンテンツを表示できない(推測※)
- LIFFのエンドポイントは
https
でないと登録できない
NetlifyやVercelのような、個人開発でも無料でhttps
のデプロイができるサービスを活用すれば、何とかならなくはないけれど
ちょっとした変更の確認までデプロイせねば確認できないのは、さすがに…
※http://ローカルIP/
なら表示できるので、おそらく証明書がクリーンかどうかが判定基準
完璧な自己証明書かngrok
要は、信頼されるサーバ証明書をlocalhostへ設定できれば解決するのでは?!
…openssl
でsubjectAltName
まで設定できてるオレオレ証明書を作られないか試しましたが、半日つかって辛くなったので諦めました。
https化はngrokに任せた
ngrokで発行した一時アドレスは、httpsのままLINEブラウザで開けたので
LIFFのエンドポイントURLに設定すると、動作しました!
ngrokを再起動するたび、LINE Developpers のコンソールから LIFFのエンドポイントURLを更新するのは面倒だけど
ちょっとの更新の確認でデプロイかますよりは数段マシ!!
LIFF ID は環境変数から取得
LIFFは、一つのチャネルへ複数設置することができるため
このように、外部サーバをエンドポイントに指定したものとlocalhostをエンドポイントに指定したものを両方置けます。

それぞれ、別のLIFF ID
が付与されるため、dotenvなどを使って環境変数から取得できるようにしておくと便利です。