LIFF CLIとngrokを使った LIFF/LINEミニアプリの お⼿軽実機確認 クラスメソッド株式会社 リテールアプリ共創部 マッハチーム morimorikochan 

名前 morimorikochan 所属 クラスメソッド    リテールアプリ共創部    マッハチーム🚀 趣味 ゲーム X @marooon88 ⾃⼰紹介 

⽬次 1. 実機確認がわりと⼿間 2. LIFF CLI の紹介 3. ngrok の紹介 4. 設定⽅法 5. ngrokのみを⽤いた代替⽅法 6. まとめ 

開発中のLIFF/LINEミニアプリをスマホで実機確認するのはわりと⼿ 間 理想: ⼿元のコードを直したら、リアルタイムに実機に反映されて欲 しい 現実: コードを毎回デプロイして待ったり、LINE Developerコンソー ルでLIFFのURLを毎回書き換えたり、結構⾯倒😫 実機確認がわりと⼿間 

LIFF CLI + ngrok による⼀時的な外部公開 LIFF CLIとngrokを使って、ローカルPCで動作する開発⽤のLIFFアプ リを⼀時的に外部公開することができます💡 利⽤イメージ 1. ローカルPCでLIFF CLI + ngrokでプロキシを起動 2. スマホでLIFF/LINEミニアプリにアクセス 3. スマホからngrokを経由してローカルPCで動作するLIFFアプリに アクセス 

● “ngrok is a globally distributed **reverse proxy** that secures, protects and accelerates your applications and network services, no matter where you run them. You can think of ngrok as the front door to your applications” ● ローカルで動作しているサーバーを簡単に外部からアクセスでき るようにするツール ● わりと昔からあるサービス ○ 少なくとも6,7年前にはあった ○ ハッカソンで審査時のデモ⽤に使われてたイメージ ngrokとは 

LIFF CLIとは ● “LIFFアプリの開発を円滑にするCLIツール” ● 各種機能を提供 ○ LIFFアプリを作成、更新、参照、削除する ○ LIFFアプリの開発環境を作成する ○ LIFFアプリをLIFF Inspectorでデバッグする ○ ローカル開発サーバーをHTTPSで起動する ● npmで提供されている ○ インストール後、チャネルの設定をすることで各種機能が実⾏可能 https://developers.line.biz/ja/docs/liff/liff-cli/ 

LIFF CLI serve とは ● “ローカル開発サーバーをHTTPSで起動する”コマンド ● --proxy-type ngrok オプションを指定すると ○ 指定したポートがngrokで公開され、URLが発⾏される ○ LIFFアプリのURLにngrokのURLが設定される https://developers.line.biz/ja/docs/liff/liff-cli/#serve-proxy-type 

1. ngrokでアカウントを作成 ● https://ngrok.com/ ● 無料のプランで⼗分 2. authtokenをコピー ● ログイン後に表⽰される ● “brew install”は不要 設定⽅法（ngrok） 

1. LIFF CLIをインストール 2. 操作するチャンネルを設定 $ liff-cli channel add 2007821742 ? Channel Secret?: ******************************** Channel 2007821742 is now added. $ liff-cli channel use 2007821742 Channel 2007821742 is now selected. 設定⽅法（LIFF CLI） $ npm install -g @line/liff-cli 

”vite”を使っている場合、ネットワーク越しにアクセスできるように vite.config.ts を修正 設定⽅法（開発⽤サーバー） export default defineConfig({ plugins: [react()], server: { allowedHosts: true, // これを追加 }, }); ⚠他のツールを使っている場合でも類似の修正が必要のはずです⚠ 

設定⽅法（起動） NGROK_AUTHTOKEN={先ほどコピーしたauthtoken} liff-cli serve \ --liff-id {LIFFのID} \ --url {ローカルで動作してるサーバーの URL、例: http://localhost:5173}/ \ --proxy-type ngrok Successfully updated endpoint url for LIFF ID: 2007821742-yR2alRWN. → LIFF URL: https://liff.line.me/2007821742-yR2alRWN → Proxy server: https://5ff420827fd2.ngrok-free.app/ スマホで開く 

動いた！viteのホットリロードも有効になってる！ これで実機確認の⼿間を減らすことができました🤩 動いた！ 

LINEミニアプリではこの⽅法が利⽤できません LIFF CLI実⾏時のエラーメッセージ↓ 残念なお知らせ 

実はngrok単体でも簡単にLINEミニアプリの実機確認ができます。 従来 ngrokは実⾏するたびにドメインが変化する →LIFF/LINEミニアプリのURLの書き換えが都度必要 今 無料プランで1つだけドメインを固定することができる →LIFF/LINEミニアプリのURLの書き換え不要 参考: Ngrokで無料プランでドメインを固定できるようになっていた(2023/08/16 以降できたらしい) ngrokのみを使った代替案 

ngrokのみを使った代替案 これをLIFF/LINEミニアプリのURLに設定 

$ brew install ngrok $ ngrok config add-authtoken {先ほどコピーしたauthtoken} $ ngrok http \ {ローカルで動作してるサーバーの URL、例: http://localhost:5173} \ --url={先ほどコピーしたドメイン、例 : capable-secondly-owl.ngrok-free.app} ngrokのみを使った代替案 

まとめ LIFFアプリ LINEミニアプリ LIFF CLI + ngrok パターン 󰢐できた 󰢃できない ngrok + ドメイン固定パターン 󰢐できた 󰢐できた LIFFアプリ / LINEミニアプリ どちらでも簡単に動作確認できた 

ありがとうございました 🫠おわり