# LIFF CLI

# LIFF CLIとは

LIFF CLIとは、LIFFアプリの開発を円滑にするCLIツールです。

LIFF CLIでできることは次のとおりです。

  • LIFFアプリを作成、更新、参照、削除する
  • LIFFアプリをLIFF Inspectorでデバッグする
  • ローカル開発サーバーをHTTPSで起動する

今後のアップデートで、Create LIFF AppLIFF Mockの機能も追加される予定です。

# LIFF CLIの動作環境

LIFF CLIはNode.jsで動作します。パッケージ管理にはnpmまたはYarnが使用可能ですが、このページではnpmを使います。このページの内容は次の各バージョンで動作を確認しています。

名前 バージョン
LIFF CLI (opens new window) 0.2.0
LIFF SDK (opens new window) 2.24.0
Node.js (opens new window) 22.2.0
npm (opens new window) 10.7.0

# LIFF CLIのインストール

ターミナルまたはコマンドラインツール(以下「ターミナル」と言います)を開き、次のコマンドを実行します。

$ npm install -g @line/liff-cli

コマンドを実行すると、LIFF CLIがインストールされ、liff-cliコマンドを実行できるようになります。

# チャネルの管理

channelコマンドを使うと、LIFF CLIで管理するチャネルを追加したり、デフォルトのチャネルを設定したりできます。なお、チャネルはあらかじめLINE Developersコンソールで作成する必要があります。

# チャネルの追加

addサブコマンドを使うと、LIFF CLIで管理するチャネルを追加できます。追加したいチャネルのチャネルIDをaddサブコマンドに渡すと、チャネルシークレットを入力するプロンプトが表示されます。チャネルシークレットを入力すると、チャネルが追加されます。

$ liff-cli channel add 1234567890
? Channel Secret?: ********************************
Channel 1234567890 is now added.

LIFF CLIの各コマンドにチャネルIDを渡す際は、上記のように、あらかじめaddサブコマンドでそのチャネルIDを持つチャネルを追加しておく必要があります。

# デフォルトのチャネルの設定

useサブコマンドを使うと、LIFF CLIのデフォルトのチャネルを設定できます。設定したいチャネルのチャネルIDをuseサブコマンドに渡します。

$ liff-cli channel use 1234567890
Channel 1234567890 is now selected.

デフォルトのチャネルは、LIFF CLIの各コマンドでチャネルIDを省略した場合に使われます。

# LIFFアプリの管理

appコマンドを使うと、LIFFアプリの作成、更新、参照、削除ができます。

# LIFFアプリの作成

createサブコマンドを使うと、LIFFアプリを作成できます。LIFFアプリの作成に成功すると、LIFF IDがターミナルに表示されます。

$ liff-cli app create \
   --channel-id 1234567890 \
   --name "Brown Coffee" \
   --endpoint-url https://example.com \
   --view-type full
Successfully created LIFF app: 1234567890-AbcdEfgh

# オプション

createサブコマンドでは、以下のオプションを利用できます。

オプション 必須 説明
--channel-id LIFFアプリを作成したいチャネルのチャネルIDを指定します。省略すると、デフォルトのチャネルのチャネルIDが指定されます。
--name LIFFアプリ名を指定します。LIFFアプリ名には、「LINE」またはそれに類する文字列、不適切な文字列は含めることができません。
--endpoint-url

LIFFアプリのエンドポイントURLを指定します。LIFFアプリを実装したウェブアプリのURLです(例:https://example.com)。LIFF URLを利用してLIFFアプリを起動した際に、このURLが利用されます。

URLスキームはhttpsである必要があります。なお、URLフラグメント(#URL-fragment)は指定できません。

--view-type

LIFFアプリの画面サイズ。以下のいずれかの値を指定します。

  • full
  • tall
  • compact
詳しくは、「LIFFブラウザの画面サイズ」を参照してください。

# LIFFアプリの更新

updateサブコマンドを使うと、LIFFアプリの設定を更新できます。

$ liff-cli app update \
   --liff-id 1234567890-AbcdEfgh \
   --channel-id 1234567890 \
   --name "Brown Cafe"
Successfully updated LIFF app: 1234567890-AbcdEfgh

# オプション

updateサブコマンドでは、以下のオプションを利用できます。

オプション 必須 説明
--liff-id 更新したいLIFFアプリのLIFF IDを指定します。
--channel-id LIFFアプリが属するチャネルのチャネルIDを指定します。省略すると、デフォルトのチャネルのチャネルIDが指定されます。
--name LIFFアプリ名を指定します。LIFFアプリ名には、「LINE」またはそれに類する文字列、不適切な文字列は含めることができません。
--endpoint-url

LIFFアプリのエンドポイントURLを指定します。LIFFアプリを実装したウェブアプリのURLです(例:https://example.com)。LIFF URLを利用してLIFFアプリを起動した際に、このURLが利用されます。

URLスキームはhttpsである必要があります。なお、URLフラグメント(#URL-fragment)は指定できません。

--view-type

LIFFアプリの画面サイズ。以下のいずれかの値を指定します。

  • full
  • tall
  • compact
詳しくは、「LIFFブラウザの画面サイズ」を参照してください。

# LIFFアプリの参照

listサブコマンドを使うと、LIFFアプリを参照できます。LIFF IDとLIFFアプリ名が一覧で表示されます。

$ liff-cli app list --channel-id 1234567890
LIFF apps:
1234567890-AbcdEfgh: Brown Coffee
1234567890-IjklMnop: Brown Cafe

# オプション

listサブコマンドでは、以下のオプションを利用できます。

オプション 必須 説明
--channel-id LIFFアプリを参照したいチャネルのチャネルIDを指定します。省略すると、デフォルトのチャネルのチャネルIDが指定されます。

# LIFFアプリの削除

deleteサブコマンドを使うと、LIFFアプリを削除できます。

$ liff-cli app delete \
   --liff-id 1234567890-AbcdEfgh \
   --channel-id 1234567890
Deleting LIFF app...
Successfully deleted LIFF app: 1234567890-AbcdEfgh

# オプション

deleteサブコマンドでは、以下のオプションを利用できます。

オプション 必須 説明
--liff-id 削除したいLIFFアプリのLIFF IDを指定します。
--channel-id LIFFアプリの属するチャネルのチャネルIDを指定します。省略すると、デフォルトのチャネルのチャネルIDが指定されます。

# ローカル開発サーバーをHTTPSで起動する

serveコマンドを使うと、ローカル開発サーバーをHTTPSで起動できます。

serveコマンドにLIFFアプリが動いているローカル開発サーバーを指定すると、ローカル開発サーバーを対象とするローカルプロキシサーバーをHTTPSで起動し、LIFFアプリのエンドポイントURLをローカルプロキシサーバーのURLで書き換えます。これにより、開発者はより簡単にローカル開発サーバーをHTTPSで起動できます。

公開済みのLIFFアプリではserveコマンドを実行しないでください

serveコマンドを実行すると、LIFFアプリのエンドポイントURLがローカルプロキシサーバーのURLで書き換えられるため、ユーザーがLIFFアプリにアクセスできなくなります。そのため、公開済みのLIFFアプリではserveコマンドを実行しないでください。

# ローカル開発サーバーをURLで指定する場合
$ liff-cli serve \
   --liff-id 1234567890-AbcdEfgh \
   --url http://localhost:3000/

Successfully updated endpoint url for LIFF ID: 1234567890-AbcdEfgh.

→  LIFF URL:     https://liff.line.me/1234567890-AbcdEfgh
→  Proxy server: https://localhost:9000/
# ローカル開発サーバーをホストとポート番号で指定する場合
$ liff-cli serve \
   --liff-id 1234567890-AbcdEfgh \
   --host localhost \
   --port 3000

Successfully updated endpoint url for LIFF ID: 1234567890-AbcdEfgh.

→  LIFF URL:     https://liff.line.me/1234567890-AbcdEfgh
→  Proxy server: https://localhost:9000/

# LIFFアプリをLIFF Inspectorでデバッグする

serveコマンドに--inspectオプションを指定すると、LIFFアプリをLIFF Inspectorでデバッグできます。

--inspectオプションは、LIFF InspectorのLIFF Inspector ServerをHTTPSで起動するため、開発者はLIFFアプリにLIFF Inspector PluginをインストールするだけでLIFFアプリをデバッグできます。詳しくは、LIFF InspectorのREADME (opens new window)を参照してください。

$ liff-cli serve \
   --liff-id 1234567890-AbcdEfgh \
   --url http://localhost:3000/ \
   --inspect

Successfully updated endpoint url for LIFF ID: 1234567890-AbcdEfgh.

→  LIFF URL:     https://liff.line.me/1234567890-AbcdEfgh
→  Proxy server: https://localhost:9000/?li.origin=wss%3A%2F%2Flocalhost%3A9222
Debugger listening on wss://192.168.1.6:9222

You need to serve this server over SSL/TLS
For help, see: https://github.com/line/liff-inspector#important-liff-inspector-server-need-to-be-served-over-ssltls

LIFF URLにアクセスすると、serveコマンドを実行したターミナルにdevtools://devtools/から始まるURLが表示されます。このURLをGoogle Chromeで開くと、LIFFアプリをGoogle Chrome上でデバッグできます。

connection from client, id: 1234567890-AbcdEfgh
DevTools URL: devtools://devtools/bundled/inspector.html?wss=localhost:9222/?hi_id=1234567890-AbcdEfgh

# serveコマンドの動作条件

serveコマンドが動作するには、次の条件をすべて満たす必要があります。

  • localhostに対して有効な証明書(localhost.pem)と秘密鍵(localhost-key.pem)を作成する。
  • localhost.pemlocalhost-key.pemを作成した場所(例:LIFFアプリのプロジェクトのルートディレクトリ)でserveコマンドを実行する。

次の手順に従って、localhostに対して有効な証明書(localhost.pem)と秘密鍵(localhost-key.pem)を作成してください。ここではmkcert (opens new window)を使います。mkcertについて詳しくは、mkcertのREADME (opens new window)を参照してください。

  1. 次のコマンドを実行し、mkcertをインストールします。
# macOSの場合(Homebrewを使用)
$ brew install mkcert

# Windowsの場合(Chocolateyを使用)
$ choco install mkcert
  1. mkcert -installを実行し、ローカル認証局を作成します。
$ mkcert -install
  1. mkcert localhostを実行し、localhostに対して有効な証明書(localhost.pem)と秘密鍵(localhost-key.pem)を作成します。
$ mkcert localhost
Note: the local CA is not installed in the Firefox trust store.
Run "mkcert -install" for certificates to be trusted automatically ⚠️

Created a new certificate valid for the following names 📜
 - "localhost"

The certificate is at "./localhost.pem" and the key at "./localhost-key.pem"

# オプション

serveコマンドでは、以下のオプションを利用できます。

# ローカル開発サーバーをURLで指定する場合

オプション 必須 説明
-l--liff-id ローカル開発サーバーのLIFFアプリのLIFF IDを指定します。デフォルトのチャネルのLIFFアプリのLIFF IDのみを指定できます。
-u--url ローカル開発サーバーのURLを指定します。
-i--inspect 指定すると、LIFF Inspectorを起動します。
--local-proxy-port ローカルプロキシサーバーが待ち受けるポート番号を指定します。デフォルト値は9000です。

# ローカル開発サーバーをホストとポート番号で指定する場合

オプション 必須 説明
-l--liff-id ローカル開発サーバーのLIFFアプリのLIFF IDを指定します。デフォルトのチャネルのLIFFアプリのLIFF IDのみを指定できます。
--host ローカル開発サーバーのホストを指定します。
--port ローカル開発サーバーのポート番号を指定します。
-i--inspect 指定すると、LIFF Inspectorを起動します。
--local-proxy-port ローカルプロキシサーバーが待ち受けるポート番号を指定します。デフォルト値は9000です。