はじめに
前回の記事で、新しく発表されたLIFF CLIについての解説記事を書きました。
それから約2ヶ月、待望のアップデートが来たので、その中身について解説していきます。
リリースから5日経過していますが、Qiita上では現時点で解説記事は存在していないようなので、今回も本記事が最速での解説になるかと思います。
前提条件
本記事では以下の2つを前提として進めます。
新機能 serveコマンド
概要
今回のリリースで新しく追加されたのはserveコマンドです。
このコマンドを使用することで、以下の2点が可能になりました。
- ローカル開発環境をhttpsで起動する
- LIFFアプリのデバッグを行う
リリースの詳細は以下から確認できます。
実行するのはお試し用のLIFFアプリにしてください。
serveコマンドを実行するとLIFFアプリのエンドポイントURLが書き換わり、正しくアクセスできなくなるためです。
実行前
実行後
ローカル開発環境をhttpsで起動
事前準備
httpsで起動するにはSSL証明書が必要なので、まずはその準備をします。
https、およびsslについてあまり詳しくないため、表現に誤りがあるかもしれません。
あくまでもローカルでお試しするための方法としてお使いください。
SSL証明書の生成のために、mkcertを使用します。
私の環境ではMacを使用しているので、homebrewを使用して以下の通り導入しました。
brew install mkcert
その他の環境でのmkcertの導入方法は以下を参考にしてください。
次に、mkcertを使用してローカルの認証局を作成します。
mkcert --install
管理者パスワードを求められます。
作成が完了すると、以下のように表示されます。
これで、証明書の生成ができるようになりました。
liffアプリのルートディレクトリに移動し、localhostの証明書と秘密鍵を生成します。
cd liffアプリのルートディレクトリ
mkcert localhost
コマンドを実行したディレクトリに証明書（localhost.pem）と秘密鍵（localhost-key.pem）が生成されました。
以下の通り、ファイルが生成されているのがわかります。
ここまでで事前準備は完了です。
serveコマンドの実行
実行方法は2つあります。
以下のように、urlを指定する方法と
liff-cli serve --liff-id liffId --url http://localhost:5173/
以下のようにhostとportを指定する方法です。
liff-cli serve --liff-id 2005506682-7Am0vbZQ --host localhost --port 5173
どちらも実行結果は変わりません。
それぞれオプションについて確認します。
liff-id
LIFFアプリのLIFF IDを指定します。
注意点が1つあり、指定するのはデフォルトチャネルに紐づくLIFFアプリのLIFF IDである必要があります。
デフォルトチャネルと対応方法
デフォルトチャネルとは、LIFF CLIのコマンドを実行するうえで、チャネルIDを省略した際に使用されるチャネルを指します。
appコマンドでは、オプションでchannel-idが用意されていますが、serveコマンドにはありません。
よって、serveコマンド実行時には、デフォルトチャネルが使用されるようです。
2024/9/29現在、デフォルトチャネルが何かを確認する手段がありません。
よって、指定するLIFF IDが適切なものか判定するには、以下の2つのいずれかがよいでしょう。
(1) デフォルトチャネルを指定する
どれがデフォルトかわからないので、serveコマンド実行前に指定したいLIFFアプリが紐づいているチャネルを登録します。
以下のように、channel useコマンドを使うことで指定できます。
liff-cli channel use channelID
デフォルトチャネルに指定するためには、まずchannel addコマンドでチャネルを登録しておく必要があります。
(2) LIFFアプリの一覧を確認する
app listコマンドをチャネルIDを省略して実行することで、デフォルトチャネルに紐づくLIFFアプリの一覧を確認することができます。
liff-cli app list
これにより、serveコマンドで指定したいLIFF IDが表示されればOKということになります。
もし表示されないようなら、デフォルトチャネルが別のチャネルであるので、先ほどのchannel useコマンドでデフォルトチャネルを変更します。
url
ローカルで起動するLIFFアプリのURLです。
host
ローカルで起動するLIFFアプリのホストです。
基本的にローカルで実行しているので、localhostで固定になるかと思います。
port
ローカルで起動するLIFFアプリのポート番号です。
私はViteを使用しているので5173ですが、各々の環境によって異なると思います。
urlまたはhost、portの組み合わせによって、httpsで起動したいローカルのLIFFアプリを指定します。
local-proxy-port
省略可能なオプションです。
httpsで起動するローカルのアプリのポート番号を指定できます。
省略した場合は9000になります。
もう一つ省略可能なオプションがありますが、デバッグの解説時に扱います。
実行結果
コマンドを実行すると、LIFFアプリのURLと、httpsでアクセスできるローカル用のURLが表示されます。
ローカル用のURLにアクセスすると、以下のように表示されました。
httpsで起動できています。
参考までに、以下は通常のローカル起動の例です。
serveコマンドを使うことで、httpsでローカル上にアプリを立ち上げることができました。
LIFFアプリのデバッグ
serveコマンドには省略可能なオプションがもう一つあります。
それがinspectです。
これを指定することで、LIFF Inspectorが起動します。
LIFF InspectorはLIFFアプリをデバッグするためのLIFFプラグインで、未導入の場合にはinspectオプション指定時に上記のようにインストールするか確認してくれます。
インストールが完了すると、以下のようにデバッグが可能になります。
LIFF URLにアクセスすると、serveコマンドを実行したターミナルにdevtools://devtools/から始まるURLが表示されます。このURLをGoogle Chromeで開くと、LIFFアプリをGoogle Chrome上でデバッグできます。
と公式サイトには記載がありましたが、現時点で私はうまく動かすことができませんでした。
以下のように、ワーニングが表示されています。
各ツールのバージョンはLIFF CLIの推奨バージョンであることは確認しているんですが、おそらく私の環境起因かと思いますので、ここについては再度検証してから追記します。
適切な挙動については以下の公式サイトから確認できます。
まとめ
最後の部分について、現時点で最後まで解説することができませんでしたが、serveについて学ぶことができました。
おそらく、最後のLIFF Inspectorのために用意された機能なのかなと思いました。
LIFF InspectorはSSL/TLSで暗号化されている必要があるらしく、serveコマンドによりhttpsで起動できるため、LIFF Inspectorの導入がスムーズになるな、と感じました。
詳細はLIFF InspectorのREAD MEに記載があります。
LIFFのプラグインであるLIFF Inspectorについては全然触れてきていなかったので、うまくいかなかった部分の検証も含めて、別途記事を書きたいなと思っています。