LIFF CLI

# LIFF CLI

LIFF CLIとは
LIFF CLIの動作環境
LIFF CLIをインストールする
チャネルを管理する
- チャネルを追加する
- デフォルトのチャネルを設定する
LIFFアプリを管理する
LIFFアプリのひな形を作成する
- オプション
LIFFアプリの開発環境を作成する
- オプション
ローカル開発サーバーをHTTPSで起動する

# LIFF CLIとは

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

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

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

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

# LIFF CLIの動作環境

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

名前	バージョン
LIFF CLI (opens new window)	0.4.1
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サブコマンドでは、以下のオプションを利用できます。

オプション	必須	説明
`-c`、`--channel-id`		LIFFアプリを作成したいチャネルのチャネルIDを指定します。省略すると、デフォルトのチャネルのチャネルIDが指定されます。
`-n`、`--name`	✅	LIFFアプリ名を指定します。LIFFアプリ名には、「LINE」またはそれに類する文字列、不適切な文字列は含めることができません。
`-e`、`--endpoint-url`	✅	LIFFアプリのエンドポイントURLを指定します。LIFFアプリを実装したウェブアプリのURLです（例：`https://example.com`）。LIFF URLを利用してLIFFアプリを起動した際に、このURLが利用されます。 URLスキームはhttpsである必要があります。なお、URLフラグメント（#URL-fragment）は指定できません。
`-v`、`--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が指定されます。

# LIFFアプリのひな形を作成する

scaffoldコマンドを使うと、Create LIFF Appを通じてLIFFアプリのひな形を作成できます。LIFFアプリのプロジェクト名をscaffoldコマンドに渡すと、そのプロジェクト名を使ってCreate LIFF Appを実行します。

$ liff-cli scaffold my-app --liff-id 1234567890-AbcdEfgh

Create LIFF Appについて詳しくは、「Create LIFF AppでLIFFアプリの開発環境を構築する」を参照してください。

# オプション

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

オプション	必須	説明
`-l`、`--liff-id`		LIFFアプリのLIFF IDを指定します。

# LIFFアプリの開発環境を作成する

initコマンドを使うと、LIFFアプリの開発環境を作成できます。initコマンドでは、以下の3つの処理を順に行います。

チャネルの追加
LIFFアプリの作成
LIFFアプリのひな形を作成する

$ liff-cli init \
   --channel-id 1234567890 \
   --name "Brown Coffee" \
   --view-type full \
   --endpoint-url https://example.com

たとえば、上記のコマンドを実行すると、チャネルIDが「1234567890」のチャネルを追加します。次に、そのチャネルに、LIFFアプリ名が「Brown Coffee」、エンドポイントURLが「https://example.com」、画面サイズが「Full」のLIFFアプリを作成します。最後に、作成したLIFFアプリのLIFF IDを設定したひな形を作成します。

liff-cli init \
   --channel-id 1234567890 \
   --name "Brown Coffee" \
   --view-type full \
   --endpoint-url https://example.com

? Channel Secret?: ********************************
Channel 1234567890 is now added.
Welcome to the Create LIFF App
? Which template do you want to use? vanilla
? JavaScript or TypeScript? JavaScript
? Which package manager do you want to use? npm

Installing dependencies:
- @line/liff


removed 10 packages in 944ms

22 packages are looking for funding
  run `npm fund` for details

Installing devDependencies:
- vite


added 10 packages in 7s

25 packages are looking for funding
  run `npm fund` for details


Done! Now run:

  cd Brown Coffee
  npm run dev


App 1234567890-AbcdEfgh successfully created.

Now do the following:
  1. go to app directory: `cd Brown Coffee`
  2. create certificate key files (e.g. `mkcert localhost`, see: https://developers.line.biz/en/docs/liff/liff-cli/#serve-operating-conditions )
  3. run LIFF app template using command above (e.g. `npm run dev` or `yarn dev`)
  4. open new terminal window, navigate to `Brown Coffee` directory
  5. run `liff-cli serve -l 1234567890-AbcdEfgh -u http://localhost:${PORT FROM STEP 3.}/`
  6. open browser and navigate to http://localhost:${PORT FROM STEP 3.}/

# オプション

initコマンドでは、以下のオプションを利用できます。なお、オプションを省略すると、initコマンドを実行した際に、そのオプションを入力するプロンプトが表示されます。

$ liff-cli init
? Channel ID? 1234567890
? App name? Brown Coffee
? View type? full
? Endpoint URL? (leave empty for default 'https://localhost:9000') https://example.com

オプション	必須	説明
`-c`、`--channel-id`	✅ ※1	LIFFアプリを作成したいチャネルのチャネルIDを指定します。
`-n`、`--name`	✅ ※2	LIFFアプリ名を指定します。LIFFアプリ名には、「LINE」またはそれに類する文字列、不適切な文字列は含めることができません。
`-v`、`--view-type`	✅ ※2	LIFFアプリの画面サイズ。以下のいずれかの値を指定します。 `full` `tall` `compact` 詳しくは、「LIFFブラウザの画面サイズ」を参照してください。
`-e`、`--endpoint-url`		LIFFアプリのエンドポイントURLを指定します。LIFFアプリのデプロイ先のURLです（例：`https://example.com`）。LIFF URLを利用してLIFFアプリを起動した際に、このURLが利用されます。 URLスキームはhttpsである必要があります。なお、URLフラグメント（#URL-fragment）は指定できません。

※1 デフォルトのチャネルを設定していない場合、オプションかプロンプトのいずれかで指定する必要があります。
※2 オプションかプロンプトのいずれかで指定する必要があります。

# ローカル開発サーバーを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

# ローカル開発サーバーを外部に公開する

LIFF CLIでは、プロキシとしてngrok (opens new window)をサポートしています。ngrokを使用するには、serveコマンドの--proxy-typeオプションに以下のいずれかの値を指定します。

ngrok
ngrok-v1（非推奨）

# プロキシの種類：`ngrok`

--proxy-typeオプションにngrokを指定すると、ローカルプロキシサーバーの代わりにngrok (opens new window)を使うことができます。これにより、ローカルの開発サーバーを外部に公開できます。ngrokを使用する際は、環境変数としてNGROK_AUTHTOKENにngrokの認証トークンを設定してください。

$ NGROK_AUTHTOKEN={認証トークン} liff-cli serve \
  --liff-id 1234567890-AbcdEfgh \
  --url http://localhost:3000/ \
  --proxy-type ngrok

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

→  LIFF URL:     https://liff.line.me/1234567890-AbcdEfgh
→  Proxy server: https://1234abcd.ngrok.example.com/

# プロキシの種類：`ngrok-v1`（非推奨）

ngrok-v1は非推奨です

ngrok v1はすでに開発やメンテナンスを終了しているため、ngrok-v1は非推奨です。ngrokを使用する際は、プロキシの種類にngrokを指定してください。

--proxy-typeオプションにngrok-v1を指定すると、ローカルプロキシサーバーの代わりにngrok v1 (opens new window)を使うことができます。これにより、ローカル開発サーバーを外部に公開できます。なお、この機能を使うには、ngrok v1 (opens new window)とnode-pty (opens new window)を別途インストールする必要があります。

$ liff-cli serve \
  --liff-id 1234567890-AbcdEfgh \
  --url http://127.0.0.1:3000/ \
  --proxy-type ngrok-v1

ngrok-v1 is experimental feature.
Successfully updated endpoint url for LIFF ID: 1234567890-AbcdEfgh.

→  LIFF URL:     https://liff.line.me/1234567890-AbcdEfgh
→  Proxy server: https://1234abcd.ngrok.example.com/

# `serve`コマンドの動作条件

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

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

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

次のコマンドを実行し、mkcertをインストールします。

# macOSの場合（Homebrewを使用）
$ brew install mkcert

# Windowsの場合（Chocolateyを使用）
$ choco install mkcert

mkcert -installを実行し、ローカル認証局を作成します。

$ mkcert -install

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コマンドでは、以下のオプションを利用できます。

オプション	必須	説明
`-l`、 `--liff-id`	✅	ローカル開発サーバーのLIFFアプリのLIFF IDを指定します。デフォルトのチャネルのLIFFアプリのLIFF IDのみを指定できます。
`-u`、 `--url`	✅ ※1	ローカル開発サーバーのURLを指定します。
`--host`	✅ ※2	ローカル開発サーバーのホストを指定します。
`--port`	✅ ※2	ローカル開発サーバーのポート番号を指定します。
`-i`、 `--inspect`		指定すると、LIFF Inspectorを起動します。
`--proxy-type`		使用するプロキシの種類。以下のいずれかの値を指定します。 `local-proxy`：ローカルプロキシ `ngrok`：ngrok (opens new window) `ngrok-v1`：ngrok v1 (opens new window)（非推奨）デフォルト値は`local-proxy`です。
`--ngrok-command`		ngrok v1を実行するコマンドを指定します。デフォルト値は`ngrok`です。
`--local-proxy-port`		ローカル開発サーバーを対象とするローカルプロキシサーバーが待ち受けるポート番号を指定します。デフォルト値は`9000`です。
`--local-proxy-inspector-port`		LIFF Inspector Serverを対象とするローカルプロキシサーバーが待ち受けるポート番号を指定します。デフォルト値は`9223`です。