LIFF CLI v0.2.0 の新機能 liff-cli serveとInspectorを解説

2024/9/24 にLIFF CLI v0.2.0がリリースされ、LIFFをHTTPSで起動したり、LIFF Inspectorでデバッグしたりできる serve コマンドが利用可能になりました。

https://developers.line.biz/ja/news/2024/09/24/liff-cli-0-2-0/

この記事では、LINEログインチャネルの作成、LIFFアプリの作成、およびテスト用LIFFアプリの作成を通して、LIFF CLIの serve 機能の動作を順を追って確認します。

環境

• Node.js v20.17.0
• macOS Sequoia 15.0.1

ライブラリインストール

今回使用するLIFF CLIとCreate LIFF Appをインストールします。

npm i -g @line/liff-cli
npm i -g @line/create-liff-app

‍


LINEログインチャネルの作成

公式ドキュメントの 「Step 1: LINEログインのチャネルを作成する」に従い、LINEログインチャネルを作成します。

作成したチャネルの「チャネル基本設定」から「チャネルID」と「チャネルシークレット」を控えます。

LIFFの作成

LIFF CLIを使い、作成したチャネルの情報を設定します。

$ liff-cli channel add  # チャネルIDを指定
? Channel Secret?: ******************************** # チャネルシークレットを指定

$ liff-cli channel use  # チャネルIDを指定
次に、LIFF作成コマンドを実行し、表示されたLIFF IDを控えます。

$ liff-cli app create \
   --channel-id  \ # チャネルIDを指定
   --name "LIFF CLI Test" \
   --endpoint-url https://example.com \
   --view-type full

Successfully created LIFF app:  # 実行後、LIFF IDが表示されます
‍
LIFFアプリのテンプレートを作成Create LIFF Appを使って、簡易的にテスト用のLIFFアプリを作成します。

$ create-liff-app liff-cli-example
Welcome to the Create LIFF App
? Which template do you want to use? react # 本記事ではReact.jsを選択
? JavaScript or TypeScript? TypeScript # 本記事ではTypeScriptを選択
? Please enter your LIFF ID:
 Don't you have LIFF ID? Check out <https://developers.line.biz/ja/docs/liff/getting-started/>  # 先ほど控えたLIFF IDを指定
? Which package manager do you want to use? yarn

$ cd liff-cli-example

アプリを起動して http://localhost:5173 にアクセスし、指定したテンプレートが正しく表示されれば成功です。

$ yarn dev
yarn run v1.22.0
warning package.json: No license field
warning ../../package.json: No license field
$ vite
The CJS build of Vite's Node API is deprecated. See <https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated> for more details.

  VITE v5.4.8  ready in 1311 ms

  ➜  Local:   <http://localhost:5173/>
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

‍


SSL証明書の作成

LIFF CLIをHTTPSで起動するために必要な自己署名証明書を作成します。

$ openssl req -x509 -newkey rsa:4096 -keyout localhost-key.pem -out localhost.pem -days 365 -nodes -subj "/CN=localhost"

LIFF CLI serveの実行

別のターミナルから liff-cli serve コマンドを実行し、表示されたLIFF URLにアクセスします。

# 環境変数を読み込む
$ set -a && source .env && set +a

$ liff-cli serve --liff-id $VITE_LIFF_ID --url http://localhost:5173/
Successfully updated endpoint url for LIFF ID: 2006453613-jKe7PYP3.

→  LIFF URL:     <https://liff.line.me/2006453613-jKe7PYP3>
→  Proxy server: <https://localhost:9000/>

ブラウザに自己署名証明書の警告が表示されますが、詳細設定をクリックして「localhost にアクセスする（安全ではありません）」を選択してください。

LIFF経由でアプリにアクセスできれば成功です。

LIFF Inspectorの動作確認

LIFF InspectorをLIFFアプリに追加し、デバッグ機能を有効化します。

yarn add @line/liff-inspector

src/App.tsx を開き、以下のコードを追加してLIFF Inspectorを有効化します。

import { useEffect, useState } from "react";
import liff from "@line/liff";
import "./App.css";

// LIFF Inspectorを有効化
import LIFFInspectorPlugin from '@line/liff-inspector';
liff.use(new LIFFInspectorPlugin());

‍


• -inspect オプションを追加してLIFF CLIを起動します。

$ liff-cli serve --liff-id $VITE_LIFF_ID --url <http://localhost:5173/> --inspect
Successfully updated endpoint url for LIFF ID: 2006453613-jKe7PYP3.

→  LIFF URL:     <https://liff.line.me/2006453613-jKe7PYP3>
→  Proxy server: <https://localhost:9000/?li.origin=wss%3A%2F%2Flocalhost%3A9222>
Debugger listening on wss://192.168.0.101:9222

ブラウザでLIFF URLにアクセスし、コンソールに表示されるデバッグ用のURL (devtools://~) をクリックすると、Chrome Developer Toolsでデバッグ情報が確認できます。

付録1: 同時起動スクリプト

LIFFアプリと liff-cli serve を同時に起動するためのスクリプトです。

1. concurrently ライブラリをインストールします。

$ yarn add -D concurrently

2. スクリプトを作成します。

$ mkdir bin
$ vi bin/dev.sh

3. 以下の内容をスクリプトに記述します。

#! /bin/bash

# 環境変数を読み込む
set -a && source .env && set +a

# 自己署名証明書の生成
openssl req -x509 -newkey rsa:4096 -keyout localhost-key.pem -out localhost.pem -days 365 -nodes -subj "/CN=localhost"

# concurrentlyで両方のサーバーを同時に起動
yarn concurrently \\
  "yarn vite" \\
  "liff-cli serve --liff-id $VITE_LIFF_ID --url <http://localhost:5173/> --inspect"

4. package.json を修正してスクリプトを起動できるようにします。

  "scripts": {
    "dev": "bash ./bin/dev.sh", # devコマンドを変更

‍

5. 起動します。

$ yarn dev

付録2: エラーケース

LIFF CLIを試す際に発生する可能性のあるエラーについて記載しておきます。

1. 自己署名証明書の秘密鍵が見つからない、またはファイル名が localhost-key.pem ではない

$ liff-cli serve --liff-id $VITE_LIFF_ID --url <http://localhost:5173/>
file:///Users/Nori/.nvm/versions/node/v20.17.0/lib/node_modules/@line/liff-cli/dist/proxy/local-proxy.js:11
            throw new Error(`Key file not found: ${config.keyPath}`);

2. 自己署名証明書の証明書ファイルが見つからない、またはファイル名が `localhost.pem` ではない

$ liff-cli serve --liff-id $VITE_LIFF_ID --url <http://localhost:5173/>
file:///Users/Nori/.nvm/versions/node/v20.17.0/lib/node_modules/@line/liff-cli/dist/proxy/local-proxy.js:14
            throw new Error(`Cert file not found: ${config.certPath}`);

3. liff channel add または liff channel use コマンドでチャネルを指定していない

Error: Access token not found.
        Please set the current channel first.

4. LINEミニアプリに対して serve を実行している

Error: Failed to update LIFF app: 403 Forbidden

参考

• LIFF CLIの公式ドキュメント
• Create LIFF Appの公式ドキュメント

‍