# LIFF CLI
# LIFF CLIとは
LIFF CLIとは、LIFFアプリの開発を円滑にするCLIツールです。
LIFF CLIでできることは次のとおりです。
- LIFFアプリを作成、更新、参照、削除する
- LIFFアプリをLIFF Inspectorでデバッグする
- ローカル開発サーバーをHTTPSで起動する
今後のアップデートで、Create LIFF App、LIFF 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です(例: URLスキームはhttpsである必要があります。なお、URLフラグメント(#URL-fragment)は指定できません。 |
--view-type | ✅ | 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です(例: URLスキームはhttpsである必要があります。なお、URLフラグメント(#URL-fragment)は指定できません。 | |
--view-type | 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で起動できます。
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.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
コマンドでは、以下のオプションを利用できます。
# ローカル開発サーバーを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 です。 |