LIFF Inspectorが2022/04/25にリリースされたので早速触ってみました。
↓リリース記事
LIFF Inspectorとは
LINEアプリ上でLIFFアプリの動作確認する時に、PCのChromeの開発者ツールを使えるようにするLIFFプラグインです。
厳密にはブラウザでLIFFアプリを開いた時も使えるのですが、その場合普通にChromeの開発者ツールが使えるのであまり意味はないでしょう。
これまでLINEアプリ上での動作確認をする場合はvConsoleを使って、LIFFアプリ内に開発者ツールを表示することが一般的でした。下記はvConsoleの導入方法です。
ただ、LIFFアプリの中に表示されてしまうというデザイン面の問題、開発者ツールに表示されたエラーをコピペしたいときに面倒である問題など、課題がありました。
今回のLIFF Inspectorの登場でvConsoleの課題も解決して快適に実機テストすることができそうですね。
LIFF Inspectorの導入
公式サイトに沿って、LIFF Inspectorを導入していきます。
LIFF Inspectorサーバーの起動
下記のコマンドでLIFF Inspectorサーバーを起動します。
$ npx @line/liff-inspector
Debugger listening on ws://192.168.1.7:9222
表示されるws://192.168.1.7:9222というWebSocketのURLがLIFF InspectorサーバーのURLになります。環境によってIPは変わると思います。
LIFFアプリにLIFF Inspectorを導入
まず、LIFF SDKがv2.19.0以降であることを確認します。
次にLIFF Inspectorのパッケージをインストールします。
$ npm install @line/liff-inspector
liffを初期化するファイルで、@line/liff-inspector をインポートして、
import liff from "@line/liff";
+ import LIFFInspectorPlugin from "@line/liff-inspector";
初期化の前に、下記のコードでLIFF Inspectorを導入します。
+ liff.use(new LIFFInspectorPlugin())
await liff.init({liffId})
これで、LIFFアプリ側でLIFF Inspectorを使う準備が整いました。
適宜、ビルドなど行ってください。
ngrokでSSL化
LIFFアプリは暗号化されていない通信ができないという制約があるので、先ほど発行したLIFF Inspectorサーバーのws://xxx.xxx.xxx.xxx:9222というURLに直接アクセスできないという問題があります。
そこで、ngrokというサービスを利用し、その問題を解決します。
ngrokを使うと簡単にローカルの暗号化されていないサービスを暗号化されたサービスとして公開することができます。
ngrokのインストール
ngrokをインストールしていない場合はインストールします。
下記は、macの場合です。
$ brew install ngrok/ngrok/ngrok
ngrokの起動
ngrokを9222ポートで起動します。
ngrok http 9222
起動すると、下記のような表示になります。
ngrok by @inconshreveable (Ctrl+C to quit)
Session Status online
Session Expires 1 hour, 59 minutes
Update update available (version 2.3.40, Ctrl-U to update)
Version 2.3.35
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://d252-133-114-13-252.ngrok.io -> http://localhost:9222
Forwarding https://d252-133-114-13-252.ngrok.io -> http://localhost:9222
Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00
ngrokの公開URLの発行
別のターミナルを開いて、下記のコマンドで公開URLを発行してください。
$ node -e "const res=$(curl -s -sS http://127.0.0.1:4040/api/tunnels); const url=new URL(res.tunnels[0].public_url); console.log('wss://'+url.host);"
wss://xxxx-xxx-xxx.ngrok.io
最後に表示される、wss://xxxx-xxx-xxx.ngrok.ioがあなたの公開URLです。(xxxの部分は毎回変わります)
wsからwssになっていることでSSL化(暗号化)されていることがわかりますね。
これで、SSL化されたLIFF InspectorサーバーのURLが手に入りました。
LIFFアプリのデバッグ
LIFFアプリに設定しているエンドポイントにli.originというクエリをつけてngrokで発行したURLを設定してください。
設定しているエンドポイントがhttps://sample.comであれば、https://sample.com?li.origin=wss://xxxx-xxx-xxx.ngrok.ioに変更することになります。
その後、LIFFアプリにアクセスすると、LIFF Inspectorサーバーのログに下記のようなログが表示されるはずです。
connection from client, id: 1111111111-xxxxxxxx
DevTools URL: devtools://devtools/bundled/inspector.html?ws=4a08-240d-1a-bb3-3a00-c9c6-132-974b-6f00.ngrok.io/?hi_id=1111111111-xxxxxxxx
このdevtools://devtools/bundled/inspector.html?ws=xxxx-xxx-xxx.ngrok.io/?hi_id=1111111111-xxxxxxxxという部分をChromeのアドレスバーに入力すると、開発者ツールが表示されます。
これで、LINE上で動くLIFFアプリをPC側の開発者ツールでデバッグできるようになりました！
LIFFアプリ上で実行されるconsole.logやDOMの情報が確認できるようになっています。
おわりに
LIFF InspectorのおかげでLIFFアプリのデバッグがはかどりそうですね。
ただ、ngrokのURLの発行を毎回するのがちょっと面倒なので今度はngrokを使わない方法も試してみたいです。
公式サイトにngrok以外の方法も記載されてはいましたが、ちょっと情報が少なめでした。
情報が追加され次第、試そうかな。
Discussion