-*''.PDL࢖ͬͯ·͔͢ʁ -*/&%$'SPOUFOE.FFUVQ d8FCΞϓϦ։ൃͰ੝Γ্͕Ζ͏ʂฤd 2024.2.16 Sumihiro Kagawa

⾃⼰紹介

⾃⼰紹介 n 加川 澄廣（かがわ すみひろ） l LINE API Expert (2019.04〜) l 経歴 Ø 経理→プログラマー→アーキテクト→PM→ITコンサル →現職 l 所属 Ø 株式会社ブレイブテクノロジー - LINE Technology Partner（ミニアプリ部⾨） 2022 - 23 - LINE ミニアプリを利⽤した順番待ち関連サービスの開発・運⽤をしています - 開発部⾨統括 l 趣味 Ø 開発コンテストへの参加 Ø e-bike でゆるゆる⾛る - 時には 100km 超えの⻑距離（アワイチ、ビワイチ など）も⾛ります sumihiro3 sumihiro.kagawa 3

今⽇のテーマ “LIFF Mock”

“LIFF Mock” とは “LIFF Mockは、LIFFアプリのテストを簡単にするため のLIFFプラグインです。LIFF Mockを使うと、LIFF SDKにモックモードを追加できます。 モックモードでは、LIFFアプリがLIFFサーバーから独⽴ し、LIFF APIがモックデータを返すため、単体テストや 負荷テストをより簡単に⾏うことができます。” https://developers.line.biz/ja/docs/liff/liff-plugin/#liff-mock

“LIFF Mock” とは “LIFF Mockは、LIFFアプリのテストを簡単にするため のLIFFプラグインです。LIFF Mockを使うと、LIFF SDKにモックモードを追加できます。 モックモードでは、LIFFアプリがLIFFサーバーから独⽴ し、LIFF APIがモックデータを返すため、単体テストや 負荷テストをより簡単に⾏うことができます。” https://developers.line.biz/ja/docs/liff/liff-plugin/#liff-mock

つまり

“LIFF Mock” が無い時 n liff.init() したら LIFFサーバーから本番環境へリダイレクトされてしまい ローカル環境でテストできない -*''αʔόʔ ຊ൪αʔόʔʢzΤϯυϙΠϯτ63-zʣ ΁ϦμΠϨΫτ ຊ൪αʔόʔ͔Β Ϩεϙϯε͕ฦΔ ϩʔΧϧαʔόʔ ຊ൪αʔόʔ OHSPL ͳͲΛ࢖ͬͯϩʔΧϧαʔόʔΛ ΤϯυϙΠϯτʹઃఆͰ͖Δ͕ɺ ςετͷ౓ʹઃఆ͢Δͷ͸໘౗

“LIFF Mock” がある時 n liff.init() してもローカル環境で完結するのでテストがしやすい ϩʔΧϧαʔόʔ ຊ൪αʔόʔ -*''αʔόʔ ϩʔΧϧαʔόʔ͔ΒϨεϙϯε͕ฦΔ

“LIFF Mock” がある時 n LIFF API のレスポンスに任意データを返せるので更にテストが容易に︕ ϩʔΧϧαʔόʔ ຊ൪αʔόʔ -*''αʔόʔ ϩʔΧϧαʔόʔ͔ΒϨεϙϯε͕ฦΔ -*''"1*ͷϞοΫσʔλΛ ಠࣗʹઃఆͯ͠ฦ͢͜ͱ͕Ͱ͖Δ

“LIFF Mock” の基本的な使い⽅ n npm パッケージを導⼊して、モックモードを有効にするだけ︕ https://github.com/line/liff-mock “LIFF Mock” の plugin を導⼊ モックモードを有効にする 予め設定された モックデータが返る

“LIFF Mock” に任意のモックデータを設定する n `liff.$mock.set` でテストに応じたモックデータを設定できる https://github.com/sumihiro3/liff-mock-sample 環境変数などからテスト種別（例ではユーザーID）を取得 `liff.$mock.set` でモックデータを設定する 各 LIFF API に対して テストに応じたモックデータを設定する ಠࣗؔ਺ͰϞοΫσʔλΛઃఆ ͢Δ͜ͱ΋Ͱ͖Δʢ࣍ϖʔδʣ

“LIFF Mock” に任意のモックデータを設定する n独⾃関数でモックデータを設定することもできる https://github.com/sumihiro3/liff-mock-sample ϞοΫσʔλΛ֎෦ϑΝΠϧͰ ఆ͓͚ٛͯ͠͹ɺߋʹςετ͕؆୯ʹʂ

“LIFF Mock” で e2e テストなど フロントエンドのテストが簡単に︕

“LIFF Mock” で e2e テスト n 例えば Profile に応じた画⾯表⽰のテスト Ø QR コードのスキャン結果も併せてテスト https://github.com/sumihiro3/liff-mock-sample 1SPGJMFը૾͕͋Δ࣌ 1SPGJMFը૾͕ແ͍࣌

“LIFF Mock” で e2e テスト https://github.com/sumihiro3/liff-mock-sample 1SPGJMFը૾͕ઃఆ͞Ε͍ͯΔ࣌͸ ը૾͕දࣔ͞Ε͍ͯΔ͔Λςετ -*''.PDLʹઃఆͨ͠ ϞοΫσʔλΛऔಘ ϞοΫͷ1SPGJMFσʔλ͕දࣔ͞Εͯ ͍Δ͔Λςετ ςετͮ͠Β͍23ίʔυͷ εΩϟϯ݁Ռ΋؆୯ʹςετͰ͖Δ

“LIFF Mock” で フロントエンドのテストを より便利に︕

今回紹介したサンプル実装を 公開しています︕ https://github.com/sumihiro3/liff-mock-sample

ご清聴 ありがとうございました︕

SNS アカウントなど @sumihiro3 Sumihiro.Kagawa LINE API Expert 20

E.O.C.