Liffをローカルで開発する方法

目次

• 手順1 ローカルサーバーをSSLで立てる
• 手順2 LINE Developersでlocalhostを登録する
• 手順3 Liff initする

LIFFがローカルで開発できなくて辛い的な意見や記事が散見されるが、ローカルで普通に開発できたので一応情報を共有する目的で書いておく。（『LIFFがLocalで開発できない』がこの記事のような意味合いでなければすみません）

手順1 ローカルサーバーをSSLで立てる

自己証明は mkcert というライブラリを使うと楽なのでそうする。

$ brew install mkcert nss && mkdir ~/Desktop/certs && cd ~/Desktop/certs && mkcert -install && mkcert localhost 127.0.0.1

上のコマンドでデスクトップ上にローカルホストに対する自己証明書の入ったディレクトリを用意できる。このcertsディレクトリをプロダクトのルート直下に移動させればhttps://localhostを立てることができる。（Next.jsなどFWを使用している場合は適宜設定が必要）

手順2 LINE Developersでlocalhostを登録する

http://localhostではLINE Developersにエンドポイントとして登録できないが手順1で行ったSSL対応で可能になる。

※ チャネルは削除済みなので実際に上GifのURLにアクセスしてもエラーなります

手順3 Liff initする

await liff.init({
  liffId: "LIFFのID",
})

これでLiff自体は使えるようになる。liff.getProfile()とかLINEバージョン取得するやつとかgetOS()とか(?)も一応実行できるが、確かnullが入ったりしたような気がする。localhost上でログインすれば行けるかも？