最速でLIFF CLI v0.3.0を徹底解説する

## はじめに
過去2回、LIFF CLIについての解説記事を書きました。

https://qiita.com/course_k/items/cdc67650601e8b137389

https://qiita.com/course_k/items/5df2206a5c783c61a911

2025年3月19日に新たにLIFF CLI v0.3.0が発表になったので、今回もどこよりも早く機能の解説をしていきます。

LIFF CLIの概要については、1つ目の記事を参照してください。

## 何ができるようになったか
今回のアップデートでは、大きく分けて3つの機能が追加されました。
* [LIFFアプリの開発環境構築](#liffアプリの開発環境構築)
* [LIFFアプリの雛形作成](#liffアプリの雛形作成)
* [ローカルサーバーの外部への公開](#ローカルサーバーの外部への公開)（実験的機能）

それぞれ詳しくみていきます。

## LIFFアプリの開発環境構築
### 事前準備
まず、大前提としてLINE Developersコンソール上で「[プロバイダーの作成](https://qiita.com/course_k/items/85bf9cfab971cb5b97ee#%E3%83%97%E3%83%AD%E3%83%90%E3%82%A4%E3%83%80%E3%83%BC%E3%81%AE%E4%BD%9C%E6%88%90)」、および「[LINEログインチャネルの作成](https://qiita.com/course_k/items/3d34871becf281870b5c#%E3%83%81%E3%83%A3%E3%83%8D%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90)」を完了させておく必要があります。
それぞれ、私が過去に書いた記事のリンクへ飛ぶようにしているので、わからない方は参考にしてみてください。

チャネルID、チャネルシークレットを使用するので控えておきます。

### 前提知識
LIFF CLIを扱う上で抑えておきたいのが「チャネルの追加」についてです。
ここでいう「チャネルの追加」は「チャネルの新規作成」ではありません。
作成済のチャネルをLIFF CLIで使用できるようにすることを指します。
どのLIFF CLIコマンドを扱うにも、「チャネルの追加」が前提になっていることがほとんどなので、覚えておいてください。

### initコマンドの実行
以下のコマンドを実行します。
```shell
liff-cli init
```
後続の設定について、コマンドオプションで指定することもできますが、個人的に対話形式で入力するほうが簡単だと感じるので、対話形式の入力方法を紹介します。

オプションの詳細については、[公式サイトの解説](https://developers.line.biz/ja/docs/liff/liff-cli/#init-options)をご参照ください。


#### チャネルID設定
チャネルIDの入力を求められるので、先ほど控えておいたものを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/f2029264-04cc-41d0-a4cf-120c644ae286.png)

#### LIFFアプリ名設定
次に、任意のLIFFアプリ名を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/d56b8dd6-8354-44c2-b665-92c02d00dc6b.png)

#### LIFFアプリの表示サイズ設定
次に、LIFFアプリのサイズを選択します。
矢印キーで選択し、Enterで決定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/ebd0db00-75ec-49ca-b67e-887e47d72212.png)

#### LIFFアプリエンドポイントURL設定
次に、エンドポイントURLを設定します。
何もしなければ`https://localhost:9000`が設定されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/890ec079-0730-41d8-831e-f56a3bd786a6.png)

#### チャネルシークレット設定
最後に、チャネルシークレットを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/28192572-be35-4c67-bd03-3a12cdd15f4b.png)

これで、チャネル関連の設定は完了です。
以降はCreate LIFF Appを使用したLIFFアプリの雛形作成のフェーズが開始されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/0df0a78b-4308-435b-abcd-d08c9a2168d7.png)

##### Create LIFF APPが未導入の場合
以下のようなインストール許可が出ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/7b85c3cf-c2b4-47f2-8b99-06ef64cedf2f.png)

##### すでに追加済のチャネルの場合
チャネルシークレットの入力は必要ありません。
以下のように、チャネルシークレット入力のプロンプトが出ません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/8244edc6-c688-4bad-8a61-1b7e46480ed9.png)

### Create LIFF Appによる雛形作成
プロンプトに沿って入力を進めると、以下のようなパッケージマネージャー選択まで進みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/2b28ccc1-647b-4f17-a1b6-8cf985b1c744.png)

パッケージマネージャの選択が完了すると、必要なモジュールのインストール等が進み、雛形が作成されます。
完了すると、以下のような表示になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/a51ef93b-9b2e-4bbd-8123-2cc8e298c930.png)

`Done! Now run:`
で指定されているコマンドを実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/45596eb3-63fd-4726-bef3-5bf3628cea9d.png)

ローカルで起動されたLIFFアプリにアクセスすることができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/7365310b-4685-4eac-8225-7bcc27734fc6.png)

なお、
`Now do the following:`
で示されている手順はLIFFアプリを外部に公開するための手順となるので、ここでは一旦割愛します。

### initコマンドで得られるメリット
`init`コマンドの追加によるメリットを知るためには、そもそもこのコマンドで何が起きているかを理解する必要があります。
全部で3つの機能がいっぺんに実行されています。

#### チャネルの追加
通常、チャネルの追加のためには以下のコマンドを実行します。
```shell
liff-cli channel add channel-id
```

#### LIFFアプリの作成
通常、LIFFアプリを作るためには以下のコマンドを実行します。
なお、ここでいうLIFFアプリの作成とは、LINE Developersコンソール上にLIFFアプリを登録することを指します。
```shell
liff-cli app create \
--channel-id channel-id \
--name "app name" \
--endpoint-url url \
--view-type full/tall/compact
```
これらのオプションは明示的に指定する必要があります。
※`liff-cli init`のようにオプションを省略して対話形式で入力することができません。

#### LIFFアプリの雛形の作成
LIFFアプリの雛形はLIFF CLIとは別の機能によって作成できます。
```shell
npx @line/create-liff-app
```
このコマンドの実行後、上記で紹介したような対話形式によって様々な設定を行います。

以上のように、今までは雛形作成まで3つのステップを踏む必要がありました。
それが、一気通貫でできるようになったのはかなり使いやすくなったと感じています。

特に、Create LIFF Appは便利な反面、LIFF IDを取得するためにあらかじめLIFFアプリを仮で作成しておく必要があり、使いにくさを感じていましたが`init`コマンドの登場により、その煩わしさが解消されました。

## LIFFアプリの雛形作成
### 事前準備
コマンド実行にあたり、LIFF IDを設定するため、LINE Developersコンソール上でLIFFアプリの仮作成が必要です。
わからない方は[こちらの記事](https://qiita.com/course_k/items/3d34871becf281870b5c#liff%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E4%BB%AE%E7%99%BB%E9%8C%B2)をご参照ください。

なお、LIFF IDなしでもコマンド実行自体はできますが、最終的にLIFF IDは設定する必要があるので、先に設定しておくほうが楽です。

### scaffoldコマンドの実行
以下のコマンドを実行します。
```shell
liff-cli scaffold アプリ名 --liff-id LIFF ID
```
アプリ名は任意のもので構いません。
LIFF IDは事前準備で取得したLIFF IDを設定します。

コマンドを実行すると、以下のような表示になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/c83ec192-4efd-4cf8-b4d1-a5469cf57803.png)

以降は[先ほどinitで確認した手順](#create-liff-appによる雛形作成)とほぼ同じなので割愛します。

なお、LIFF IDは対話形式で入力することも可能です。
`--liff-id`オプションを省略した`scaffold`コマンドを実行すると、以下のようにLIFF IDの入力を求められます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/6d9cba16-9036-45c4-8bbc-bc1a1e2ce88f.png)

### scaffoldで得られるメリット
正直なところ、`init`コマンドが便利すぎるので、`scaffold`コマンドのメリットが思いつきません。
LIFF IDは確実に必要になるので、`scaffold`単体では私の思いつく範囲での有効なユースケースがありません。

`scaffold`の代わりに単純にCreate LIFF Appのほうがいいのでは？と感じています。
Create LIFF Appはアプリ名を対話形式で入力可能で、省略時にはデフォルトのアプリ名`my-app`が設定されます。

`scaffold`ではアプリ名を省略するとエラーになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/596e80fb-cd6b-4817-973d-dd8ed63284ca.png)

そういった意味でも、`scaffold`がどのような場面で有用になるのかが現時点では理解できていません。
もしおわかりになる方がいらっしゃいましたら、ご教示ください。

## ローカルサーバーの外部への公開
v0.2.0で追加された`serve`コマンドに新しく追加された`--proxy-type`を指定して実行します。

しかし、結論から申し上げると、現時点でうまく行っていません。

わかっていることとして、外部公開に当たり、ngrokを使用しているようです。
色々試してみたのですが、ngrok v1での実行方法がわからず、試せていません。
現在、ngrokのバージョンは3であり、v1はかなり古いものです。

現状、[公式サイトで提示されている方法](https://developers.line.biz/ja/docs/liff/liff-cli/#serve-proxy-type)だと、正しくngrokのURLが取得できず、タイムアウトエラーになります。

`serve`コマンド自体は正しく実行できるのですが、`--proxy-type`に`ngrok-v1`を指定するとうまくいきません。

タイムアウトエラーになるソースについて、生成AIの力も借りて修正したところ、正しく表示することができましたが、正攻法ではないはずなので、こちらは調査を続けたいと思います。

## 気になったこと
`scaffold`の使い道も気になるのですが、それよりもLIFF CLIの今後の立ち位置が気になりました。
こちらのニュースにあるとおり、現状LIFFアプリは非推奨になっています。

https://developers.line.biz/ja/news/2025/02/12/line-mini-app/

今後はミニアプリでの作成が求められますが、現時点でLIFF CLIはミニアプリに対応していません。
これからの機能追加で充実していくのではないかと推察していますが、どうなんでしょうね。

## まとめ
すべての解説はできませんでしたが、現時点において手元で試すことができる部分について、詳細に解説したつもりです。
`init`コマンドは確実にLIFF CLIの今までのコマンドで一番使い勝手がよく、いいコマンドだと感じました。

一番初めに書いた記事でも触れていますが、チャネルIDそれ自体を取得できるともっといいのになと思っています。
でもそのためにはLINE Developersコンソールへのログインが必要になってくるので、CLI上では難しいのかなとも思っています。

これからも色々機能が追加されていくと思うので、引き続きウォッチしていきたいです。
あと、外部公開の方法については早急に調査してまとめたいと思っています。