はじめに
過去2回、LIFF CLIについての解説記事を書きました。
2025年3月19日に新たにLIFF CLI v0.3.0が発表になったので、今回もどこよりも早く機能の解説をしていきます。
LIFF CLIの概要については、1つ目の記事を参照してください。
何ができるようになったか
今回のアップデートでは、大きく分けて3つの機能が追加されました。
それぞれ詳しくみていきます。
LIFFアプリの開発環境構築
事前準備
まず、大前提としてLINE Developersコンソール上で「プロバイダーの作成」、および「LINEログインチャネルの作成」を完了させておく必要があります。
それぞれ、私が過去に書いた記事のリンクへ飛ぶようにしているので、わからない方は参考にしてみてください。
チャネルID、チャネルシークレットを使用するので控えておきます。
前提知識
LIFF CLIを扱う上で抑えておきたいのが「チャネルの追加」についてです。
ここでいう「チャネルの追加」は「チャネルの新規作成」ではありません。
作成済のチャネルをLIFF CLIで使用できるようにすることを指します。
どのLIFF CLIコマンドを扱うにも、「チャネルの追加」が前提になっていることがほとんどなので、覚えておいてください。
initコマンドの実行
以下のコマンドを実行します。
liff-cli init
後続の設定について、コマンドオプションで指定することもできますが、個人的に対話形式で入力するほうが簡単だと感じるので、対話形式の入力方法を紹介します。
オプションの詳細については、公式サイトの解説をご参照ください。
チャネルID設定
チャネルIDの入力を求められるので、先ほど控えておいたものを設定します。
LIFFアプリ名設定
次に、任意のLIFFアプリ名を入力します。
LIFFアプリの表示サイズ設定
次に、LIFFアプリのサイズを選択します。
矢印キーで選択し、Enterで決定します。
LIFFアプリエンドポイントURL設定
次に、エンドポイントURLを設定します。
何もしなければhttps://localhost:9000が設定されます。
チャネルシークレット設定
最後に、チャネルシークレットを設定します。
これで、チャネル関連の設定は完了です。
以降はCreate LIFF Appを使用したLIFFアプリの雛形作成のフェーズが開始されます。
Create LIFF APPが未導入の場合
以下のようなインストール許可が出ます。
すでに追加済のチャネルの場合
チャネルシークレットの入力は必要ありません。
以下のように、チャネルシークレット入力のプロンプトが出ません。
Create LIFF Appによる雛形作成
プロンプトに沿って入力を進めると、以下のようなパッケージマネージャー選択まで進みます。
パッケージマネージャの選択が完了すると、必要なモジュールのインストール等が進み、雛形が作成されます。
完了すると、以下のような表示になります。
Done! Now run:
で指定されているコマンドを実行します。
ローカルで起動されたLIFFアプリにアクセスすることができました。
なお、
Now do the following:
で示されている手順はLIFFアプリを外部に公開するための手順となるので、ここでは一旦割愛します。
initコマンドで得られるメリット
initコマンドの追加によるメリットを知るためには、そもそもこのコマンドで何が起きているかを理解する必要があります。
全部で3つの機能がいっぺんに実行されています。
チャネルの追加
通常、チャネルの追加のためには以下のコマンドを実行します。
liff-cli channel add channel-id
LIFFアプリの作成
通常、LIFFアプリを作るためには以下のコマンドを実行します。
なお、ここでいうLIFFアプリの作成とは、LINE Developersコンソール上にLIFFアプリを登録することを指します。
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とは別の機能によって作成できます。
npx @line/create-liff-app
このコマンドの実行後、上記で紹介したような対話形式によって様々な設定を行います。
以上のように、今までは雛形作成まで3つのステップを踏む必要がありました。
それが、一気通貫でできるようになったのはかなり使いやすくなったと感じています。
特に、Create LIFF Appは便利な反面、LIFF IDを取得するためにあらかじめLIFFアプリを仮で作成しておく必要があり、使いにくさを感じていましたがinitコマンドの登場により、その煩わしさが解消されました。
LIFFアプリの雛形作成
事前準備
コマンド実行にあたり、LIFF IDを設定するため、LINE Developersコンソール上でLIFFアプリの仮作成が必要です。
わからない方はこちらの記事をご参照ください。
なお、LIFF IDなしでもコマンド実行自体はできますが、最終的にLIFF IDは設定する必要があるので、先に設定しておくほうが楽です。
scaffoldコマンドの実行
以下のコマンドを実行します。
liff-cli scaffold アプリ名 --liff-id LIFF ID
アプリ名は任意のもので構いません。
LIFF IDは事前準備で取得したLIFF IDを設定します。
コマンドを実行すると、以下のような表示になります。
以降は先ほどinitで確認した手順とほぼ同じなので割愛します。
なお、LIFF IDは対話形式で入力することも可能です。
--liff-idオプションを省略したscaffoldコマンドを実行すると、以下のようにLIFF IDの入力を求められます。
scaffoldで得られるメリット
正直なところ、initコマンドが便利すぎるので、scaffoldコマンドのメリットが思いつきません。
LIFF IDは確実に必要になるので、scaffold単体では私の思いつく範囲での有効なユースケースがありません。
scaffoldの代わりに単純にCreate LIFF Appのほうがいいのでは？と感じています。
Create LIFF Appはアプリ名を対話形式で入力可能で、省略時にはデフォルトのアプリ名my-appが設定されます。
scaffoldではアプリ名を省略するとエラーになります。
そういった意味でも、scaffoldがどのような場面で有用になるのかが現時点では理解できていません。
もしおわかりになる方がいらっしゃいましたら、ご教示ください。
ローカルサーバーの外部への公開
v0.2.0で追加されたserveコマンドに新しく追加された--proxy-typeを指定して実行します。
しかし、結論から申し上げると、現時点でうまく行っていません。
わかっていることとして、外部公開に当たり、ngrokを使用しているようです。
色々試してみたのですが、ngrok v1での実行方法がわからず、試せていません。
現在、ngrokのバージョンは3であり、v1はかなり古いものです。
現状、公式サイトで提示されている方法だと、正しくngrokのURLが取得できず、タイムアウトエラーになります。
serveコマンド自体は正しく実行できるのですが、--proxy-typeにngrok-v1を指定するとうまくいきません。
タイムアウトエラーになるソースについて、生成AIの力も借りて修正したところ、正しく表示することができましたが、正攻法ではないはずなので、こちらは調査を続けたいと思います。
気になったこと
scaffoldの使い道も気になるのですが、それよりもLIFF CLIの今後の立ち位置が気になりました。
こちらのニュースにあるとおり、現状LIFFアプリは非推奨になっています。
今後はミニアプリでの作成が求められますが、現時点でLIFF CLIはミニアプリに対応していません。
これからの機能追加で充実していくのではないかと推察していますが、どうなんでしょうね。
まとめ
すべての解説はできませんでしたが、現時点において手元で試すことができる部分について、詳細に解説したつもりです。
initコマンドは確実にLIFF CLIの今までのコマンドで一番使い勝手がよく、いいコマンドだと感じました。
一番初めに書いた記事でも触れていますが、チャネルIDそれ自体を取得できるともっといいのになと思っています。
でもそのためにはLINE Developersコンソールへのログインが必要になってくるので、CLI上では難しいのかなとも思っています。
これからも色々機能が追加されていくと思うので、引き続きウォッチしていきたいです。
あと、外部公開の方法については早急に調査してまとめたいと思っています。