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

2024-10-15

山下徳光

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> # チャネルIDを指定
? Channel Secret?: ******************************** # チャネルシークレットを指定

$ liff-cli channel use <チャネルID> # チャネルIDを指定

次に、LIFF作成コマンドを実行し、表示されたLIFF IDを控えます。


$ liff-cli app create \
   --channel-id <チャネル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   # 先ほど控えた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  for more details.

  VITE v5.4.8  ready in 1311 ms

  ➜  Local:   
  ➜  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:     
→  Proxy server:

ブラウザに自己署名証明書の警告が表示されますが、詳細設定をクリックして「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  --inspect
Successfully updated endpoint url for LIFF ID: 2006453613-jKe7PYP3.

→  LIFF URL:     
→  Proxy server: 
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  --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 
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 
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

参考

‍

株式会社Grandreamでは、LINEアプリ開発事業を展開しております。 LIFFアプリやLINEミニアプリ、LINEチャットボット、外部システムとの連携などLINE上で実現できるシステムはすべて対応可能です。「LINEを使用した最適なシステムを構築したい」「LINEで実現可能かわからないが話だけでも聞きたい」などの要望があれば、お気軽にご相談ください。

株式会社グランドリームでは、AWSを駆使した開発からUI/UXデザインまで、Webアプリケーションに関するすべての要望に応えます。
まずは一度お気軽にご相談ください。

お問い合わせはこちら