LIFF Inspectorを触ってみた

LIFF Inspectorが2022/04/25にリリースされたので早速触ってみました。
↓リリース記事

https://developers.line.biz/ja/news/2022/?month=04&day=25&article=liff-plugin

LIFF Inspectorとは

LINEアプリ上でLIFFアプリの動作確認する時に、PCのChromeの開発者ツールを使えるようにするLIFFプラグインです。

厳密にはブラウザでLIFFアプリを開いた時も使えるのですが、その場合普通にChromeの開発者ツールが使えるのであまり意味はないでしょう。

これまでLINEアプリ上での動作確認をする場合はvConsoleを使って、LIFFアプリ内に開発者ツールを表示することが一般的でした。下記はvConsoleの導入方法です。

https://qiita.com/sumihiro3/items/9f4f1adb5d8883d9ceeb

ただ、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 をインポートして、

index.js

import liff from "@line/liff";
+ import LIFFInspectorPlugin from "@line/liff-inspector";

初期化の前に、下記のコードでLIFF Inspectorを導入します。

index.js

+ 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以外の方法も記載されてはいましたが、ちょっと情報が少なめでした。
情報が追加され次第、試そうかな。