最速でLIFF CLIを試す

## はじめに
本日、2024/7/23にLIFFの新しい機能「LIFF CLI」が発表されました。

https://developers.line.biz/ja/news/2024/07/23/liff-cli/

この「LIFF CLI」について扱っているQiitaの記事は現在執筆時点で存在しないので、お試ししてみた結果を最速で紹介する記事となります。

## LIFF CLIとは
公式サイトの説明をそのまま引用します。

> LIFF CLIとは、LIFFアプリの開発を円滑にするCLIツールです。LIFF CLIを使うと、LIFFアプリの作成、更新、参照、削除をコマンドラインで行うことができます。

通常、LIFFアプリを作成するにはLINE Developersコンソールから操作をする必要があります。
それがコマンドラインから実施できるようになる、とのことなのでかなり便利になるのでは？と感じています。

## LIFF CLIの導入

### 前提
Node.js上で動作するツールのようなので、あらかじめNode.jsをインストールしておく必要があります。

また、各ツールについて次のバージョン以上を求められるようです。
| ツール | バージョン|
|:-:|:-:|
| Node.js | 22.2.0 |
| npm | 10.7.0 |


### インストール
ターミナルで、以下のコマンドを実行します。
```bash
npm install -g @line/liff-cli
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/34e00513-7c12-486a-bb8d-e985cc98cc71.png)

正常にインストールができました。
これで
`liff-cli`コマンドが使えるようになります。

### インストール時の注意
ツールのバージョンが規定に満たない場合、以下のような警告が出ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/89763d93-132a-2d03-3d72-e6c86ea07b0d.png)

## チャネルの設定
LIFFアプリを登録するチャネルの設定を行います。

チャネル関連のコマンドは
`liff-cli channel`
です。
これにサブコマンドを指定して、チャネルの管理を行います。

なお、チャネルIDとチャネルシークレットが必要になるので、控えておきます。

:::note warn
チャネルはあらかじめLINE Developersコンソールで作成しておく必要があります。
過去に書いた[こちらの記事](https://qiita.com/course_k/items/85bf9cfab971cb5b97ee#%E3%83%81%E3%83%A3%E3%83%8D%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90)が参考になるかと思います。
:::

### チャネルの追加
LIFFアプリを作成するためには、必ずチャネルの登録をする必要があります。
サブコマンドの`add`を使用してチャネルの追加を行います。

```bash
liff-cli channel add channel-id
```

登録したいチャネルIDを指定すると、以下のようにシークレットIDの入力を求められます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/fc6645a4-6b21-4a61-f9b3-e4082d18bd3e.png)

適切なシークレットIDを入力することで、チャネルの登録が完了します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/0af0d214-b51c-78fb-9cb8-8f1f91ef7208.png)

### デフォルトチャネルの設定
チャネルは複数登録することが可能です。
後ほど紹介しますが、LIFFアプリ登録時には登録先のチャネルを指定する必要があります。
チャネルの指定を省略した場合、ここで登録したデフォルトチャネルが登録先になります。


```bash
liff-cli channel use channel-id
```

デフォルトチャネルの登録が完了しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/5d00b9a0-db46-7924-cbc3-a85f1215ff9d.png)

チャネルの設定は以上です。

## アプリの設定
アプリ関連のコマンドは
`liff-cli app`
となります。

ここにサブコマンドを指定します。

### アプリの新規作成
早速、登録したチャネルにLIFFアプリを新しく作っていきます。
アプリを新しく作るにあたって、以下の3つが必須になります。
* アプリの名前
* LIFFアプリのエンドポイントURL（自身で作成したWebアプリ）
* LIFFアプリの画面サイズ
上記のほか、チャネルIDの指定が可能ですが、これは省略可です。
省略した場合はデフォルトのチャネルが使用されます。

コマンドは以下のとおりです。
```bash
liff-cli app create \
--channel-id channel-id \
--name "app name" \
--endpoint-url url \
--view-type full/tall/compact
```

正しく設定できると以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/8b6283d0-d3e6-dbbd-567c-45e6f136bfe4.png)

LINE Developersコンソール上でも確認してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/6dea517b-2e68-5fae-3de2-34b2744f5190.png)

設定した情報でLIFFアプリが登録されているのがわかります。
いちいちDevelopersコンソールへアクセスせずに作成できるので、かなり便利ですね。

### アプリの更新
先ほど作成したアプリの情報を更新できます。
更新可能なのはアプリ名、エンドポイントURL、画面サイズの3つです。

更新したい情報と、LIFFアプリID、チャネルIDを指定します。
チャネルIDは省略可能です。

```bash
liff-cli app update \
--liff-id liff-id \
--channel-id channel-id \
--name "app name" \
--endpoint-url url \
--view-type full/tall/compact
```

LIFFアプリのサイズのみを変更することとします。
以下のように指定することで、変更ができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/39a2b4df-0ceb-077d-28c5-d75d64651a32.png)

コンソールからも変更されているのが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/48bf0fc6-da80-6de1-aa83-949d12ec7497.png)


### アプリの一覧
指定したチャネルIDに登録されているLIFFアプリの一覧を表示できます。

```bash
liff-cli app list --channel-id channel-id
```

アプリの一覧が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/5bd63f32-c0c7-bd15-5c57-68dd3b99b834.png)
※一覧表示がわかりやすいよう、手順外で「another app」というアプリを追加しておきました。





:::note warn
~~公式サイトでは、チャネルIDを省略したときの挙動を以下のように記載していますが、実際の挙動は期待と異なるようです。~~
~~> LIFFアプリを参照したいチャネルのチャネルIDを指定します。省略すると、LIFF CLIで追加しているすべてのチャネルのLIFFアプリを参照します。~~
:::

:::note info
2024年8月6日追記
上記のチャネルIDを省略した際の挙動について、ドキュメントが修正されました。
:::

https://developers.line.biz/ja/docs/liff/liff-cli/#manage-liff-apps-list-options

**上記ページより抜粋**
> LIFFアプリを参照したいチャネルのチャネルIDを指定します。省略すると、デフォルトのチャネルのチャネルIDが指定されます。

他のコマンド同様、チャネルIDを省略した場合はデフォルトのチャネルIDが使用されるとのこと。

ドキュメントが修正される以前の検証結果については、念の為以下に折りたたみとして残しておきます。
<details><summary>修正以前の記載</summary>
~~1回目の実行はデフォルトチャネルではないチャネルIDを指定しました。
2回目の実行はチャネルIDを省略しています。~~
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/3dd7e8ba-4a66-6db2-0920-e40f8ec50d03.png)
~~表示されているのは「another app」と「demo app」のみです。
公式サイトの説明が正しければ、すべてのチャネルのLIFFアプリが表示されるはずなので「channel app」も表示されるはずです。~~

~~ここは別途確認が必要そうですね……~~
</details>

### アプリの削除
LIFF IDを指定することで、作成したアプリを削除することが可能です。
チャネルIDの指定も必要ですが、デフォルトチャネルのLIFFアプリを削除する場合には、指定は不要です。
```bash
liff-cli app delete \
--liff-id liff-id \
--channlel-id channel-id
```

以下のように実行することで、削除することができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/595da607-fcf9-d7ee-6938-7b709723199a.png)


## まとめ
ざっと公式サイトにある機能を試してみましたが、結構便利だなと感じました。
ただそれだけに、もうちょっとこうなればいいのにな、というのもいくつか感じました。

例えば、登録したチャネルの削除、また現在登録しているチャネルの一覧表示は本記事執筆時点ではできないようです。

アプリの登録や更新、一覧表示、削除にはチャネルIDが必要な場合もあります。
現状、チャネルの一覧表示ができないので、いちいちコンソールから確認しないといけないのは不便だと感じました。

また、アプリの一覧のときに表示されるのはLIFF IDとアプリ名だけなので、エンドポイントURLやアプリのサイズも表示されるとよいなと感じました。

ただ、これからCreate LIFF App、LIFF Inspector、LIFF Mockなどの機能が追加されていくようなので、もっと便利になることを期待しています。