LIFF InspectorでLIFFアプリのデバッグ環境を構築する

こんにちは、RECJob開発チームエンジニアの佐藤(@r_sato1201)です。
この度、業務でLIFFを触ることになり、開発する上でデバッグできる環境を構築したのでやり方をまとめていきたいと思います。

LIFFとは？

LINE Front-end Frameworkの略で、LINEが提供するウェブアプリのプラットフォームです。
LINEのユーザー情報を取得しユーザー情報を活用した機能を提供することができます。

developers.line.biz

LIFF Inspectorとは？

LIFF InspectorはLIFF専用のDevToolsです。
LIFF Inspectorを使えばLINE上でLIFFアプリを動かしている際にChromeのDevToolsのElements, Console, Networkタブを使いデバッグすることができます。

LIFF Inspectorは

  • LIFF Inspector Server （LIFFアプリとChromeDevtoolsの通信を中継するサーバー）
  • LIFF Inspector Plugin（LIFF Inspectorを利用可能にするLIFFプラグイン）

の2つのコンポーネントから構成されています。

github.com

デバッグ環境の構築

ここからはデバッグ環境の構築方法と、実際にデバッグする方法を説明していきます。
RECJobではLaravel + Nextを採用しているので大まかな流れは以下です。

  1. LIFF Inspectorサーバーを起動する
  2. LIFF Inspector PluginをLIFFアプリにインストールする
  3. ngrokでローカルサーバーをSSL化し公開
  4. LIFFアプリのエンドポイントURLに設定
  5. Next側のenvの値を変更
  6. Chromeで開発者ツールを表示

1. LIFF Inspectorサーバーの起動

以下のコマンドを実行してLIFF Inspectorサーバーを起動します。

npx @line/liff-inspector

実行するとDebugger listening on ws://XXX.X.X.X:9222というWebSocketのURLが表示されます。 これがLIFF InspectorサーバーのURLになります。

2. LIFF Inspector PluginをLIFFアプリにインストールする

LIFF Inspectorを利用可能にするためにLIFF Inspector Pluginをインストールします。

yarn add --dev @line/liff-inspector

次に、liff.initしているファイルでLIFF Inspector Pluginをliff.useしてプラグインを使えるようにします。

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


+ liff.use(new LIFFInspectorPlugin())
await liff.init({ liffId: LIFF_ID })

LIFF Inspector Pluginは、実際のliff.initが動作する前に、LIFF Inspector Server に接続を試みるようです。
接続が成功し、liff.initが完了すると、LIFF Inspectorを使ったデバッグができるようになります。

3. ngrokでローカルサーバーをHTTPSで公開

LIFFアプリはHTTPSでホストされているため、LIFF Inspector ServerがHTTPSでホストされていないと、mixed contentとなり接続することができません。
そのため、LIFF Inspector ServerをHTTPSでホストする必要があります。
また、LIFFアプリをLINEアプリがはいっている端末上で動かすため、ローカルサーバーを外部公開する必要があります。

そこで、ngrokでフロント側、サーバー側、LIFF Inspector Serverの3つをHTTPSで公開します。

3-1. ngrokをHomebrewでインストール

ngrok公式サイトでアカウント登録してメール認証を済ませ、下記のコマンドでngrokをインストールしてください。

brew install ngrok/ngrok/ngrok

3-2. 認証トークンの設定

ngrok公式サイト管理画面の「Getting Started > setup & installation」で認証トークンを取得して以下のコマンドを実行します。

ngrok config add-authtoken <token>

3-3. ngrokのconfigファイルを書き換える

3つのポートを公開するために、ngrokの設定ファイルを書き換えます。
configファイルは以下にあります。

Linux: "~/.config/ngrok/ngrok.yml"
MacOS (Darwin): "~/Library/Application\ Support/ngrok/ngrok.yml"
Windows: "%HOMEPATH%\AppData\Local\ngrok\ngrok.yml"

ngrok.com

公開したいそれぞれのportをngrok.ymlに追加します。

ngrok.yaml

version: "2"
authtoken: <token>
tunnels:
  api:
    addr: 8080
    proto: http
  front:
    addr: 3000
    proto: http
  liff-inspector:
    addr: 9222
    proto: http

3-3. ngrokで3つのポートを公開する

以下のコマンドを実行し3つのポートをHTTPSで公開します。

ngrok start api front liff-inspector

4. LIFFアプリのエンドポイントURLに設定

LIFFアプリのエンドポイントURLを変更します。
LIFFアプリに設定しているエンドポイントにli.origin=wss://xxxx-xxx-xxx.ngrok.ioというクエリをつけてURLを設定してください。
{frontのngrok公開URL}/?li.origin=wss://{LIFF Inspector Serverのngrok公開URL}

例) http://localhost:3000をエンドポイントに設定したい場合で、ngrokで公開したURLが以下の場合

localhost ngrokで発行したURL
localhost::3000 https://front.jp.ngrok.io
localhost::9222 https://line-inspector.jp.ngrok.io 
https://front.jp.ngrok.io/?wss://line-inspector.jp.ngrok.io

になります。
※ front, line-inspectorの部分はご自身で実際ngrokで公開したURLに置換してください。（xxxx-xxx-xxx-xxx-xみたいなやつです）

5. Next側のenvの値を変更

Next側のenvのAPI_ROOTをngrokで発行したURLに変更します。

- NEXT_PUBLIC_API_ROOT=http://localhost:8080/api
+ NEXT_PUBLIC_API_ROOT=https://api.jp.ngrok.io/api

※ apiの部分はご自身で実際ngrokで公開したURLに置換してください

6. Chromeで開発者ツールを表示

LINEアプリに端末からアクセスすると、起動したLIFF Inspectorサーバーのログに下記のようなログが表示されます。

connection from client, id: 1234567890-xxxxxxxx
DevTools URL: devtools://devtools/bundled/inspector.html?wss=xxxx-xx-xxx-xxx-xxx.jp.ngrok.io/?hi_id=1234567890-xxxxxxxx

このdevtools://devtools/bundled/inspector.html?wss=xxxx-xx-xxx-xxx-xxx.jp.ngrok.io/?hi_id=1234567890-xxxxxxxxをChromeのアドレスバーに入力することで開発者ツールが表示され、デバックができるようになります。

最後に

LIFF InspectorでLIFFアプリのデバッグ環境を構築する方法を書いてみました。
ngrokのは無料プランだと公開URLが毎回変わるため、公開するたびにURLを変更しなくてはいけませんが、有料プランにすることでURLを固定できるので
毎回、URLを変更するのが面倒な方は有料プランを検討したほうが良いと思います。

現在株式会社ROXXは一緒にはたらく仲間を募集中です。 herp.careers

herp.careers

herp.careers