8
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

最速でLIFF CLIを試す

Last updated at Posted at 2024-07-23

はじめに

本日、2024/7/23にLIFFの新しい機能「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

インストール

ターミナルで、以下のコマンドを実行します。

npm install -g @line/liff-cli

image.png

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

インストール時の注意

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

image.png

チャネルの設定

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

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

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

チャネルはあらかじめLINE Developersコンソールで作成しておく必要があります。
過去に書いたこちらの記事が参考になるかと思います。

チャネルの追加

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

liff-cli channel add channel-id

登録したいチャネルIDを指定すると、以下のようにシークレットIDの入力を求められます。
image.png

適切なシークレットIDを入力することで、チャネルの登録が完了します。
image.png

デフォルトチャネルの設定

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

liff-cli channel use channel-id

デフォルトチャネルの登録が完了しました。
image.png

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

アプリの設定

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

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

アプリの新規作成

早速、登録したチャネルにLIFFアプリを新しく作っていきます。
アプリを新しく作るにあたって、以下の3つが必須になります。

  • アプリの名前
  • LIFFアプリのエンドポイントURL(自身で作成したWebアプリ)
  • LIFFアプリの画面サイズ
    上記のほか、チャネルIDの指定が可能ですが、これは省略可です。
    省略した場合はデフォルトのチャネルが使用されます。

コマンドは以下のとおりです。

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

正しく設定できると以下のようになります。
image.png

LINE Developersコンソール上でも確認してみましょう。
image.png

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

アプリの更新

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

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

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

コンソールからも変更されているのが確認できます。
image.png

アプリの一覧

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

liff-cli app list --channel-id channel-id

アプリの一覧が表示されます。
image.png
※一覧表示がわかりやすいよう、手順外で「another app」というアプリを追加しておきました。

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

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

上記ページより抜粋

LIFFアプリを参照したいチャネルのチャネルIDを指定します。省略すると、デフォルトのチャネルのチャネルIDが指定されます。

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

ドキュメントが修正される以前の検証結果については、念の為以下に折りたたみとして残しておきます。

修正以前の記載 ~~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」も表示されるはずです。~~

ここは別途確認が必要そうですね……

アプリの削除

LIFF IDを指定することで、作成したアプリを削除することが可能です。
チャネルIDの指定も必要ですが、デフォルトチャネルのLIFFアプリを削除する場合には、指定は不要です。

liff-cli app delete \
--liff-id liff-id \
--channlel-id channel-id

以下のように実行することで、削除することができました。
image.png

まとめ

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

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

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

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

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

8
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?