LIFF Deep Dive 2022

下記イベントの登壇資料です。

●【LINEミニアプリ】LIFF Deep Dive【LIFFプラグインリリース記念】
https://linedevelopercommunity.connpass.com/event/242678/

＜登壇者＞
LINE株式会社 / Developer Product Management Team / Technical Product Manager 岡本 拓也
LINE株式会社 / Kyoto K3 / Frontend Engineer 李致賢 (Jason Lee)
LINE株式会社 / Front-end Dev2 / Frontend Engineer 池田 泰樹
LINE株式会社 / Front-end Dev9 team / Front-end Engineer 上野 康平
LINE株式会社 / Front-end Dev2 / Engineering Manager and Software Developer 佐藤 信吾

Transcript

1. LIFF Deep Dive LIFF Development Team 2022.05
2. ཥகݡ ஑ా ହथ ্໺ ߁ฏ ࠤ౻ ৴ޗ Sato Shingo LIFF FE Lead Ueno Kohei LIFF FE Ԭຊ ୓໵ Okamoto Takuya LIFF Tech PdM Jason Lee LIFF FE Ikeda Taiki LIFF FE
3. ొஃऀ঺հ Webۀքʹͯडୗ։ൃاۀ౳Λసʑͱͨ͠ޙɺLINE ʹೖࣾ͠ɺݱࡏ͸LINE Login΍LIFF SDKͱ͍ͬͨ։ ൃऀ޲͚ϓϩμΫτͷTechnical Product Managerͱ͠ ͯैࣄ͍ͯ͠·͢ɻVueΛ޷Έ·͢ɻ Ԭຊ ୓໵ LINEגࣜձࣾʗDeveloper Product Management νʔϜ / Technical Product Manager
4. ొஃऀ঺հ 2019೥ʹདྷ೔͠ɺLINEגࣜձࣾʹೖࣾ͠·ͨ͠ɻ དྷ೔લ͸୆࿷ͷϑΟϯςοΫձࣾͰ։ൃ୲౰Λ͍ͯ͠·ͨ͠ɻ ࠓ͸LINE MUSICϑϩϯτΤϯυͷςοΫϦʔυΛ୲౰͍ͤͯͨͩ͞ ͍͓ͯΓɺɺLIFF SDKͷ։ൃ΋͍ͯ͠·͢ɻ Jason Lee LINEגࣜձࣾʗژ౎ K3 (UIT) ιϑτ΢ΣΞΤϯδχΞ
5. ೥݄ʹ-*/&גࣜձࣾʹೖࣾɻ -*''
   4%,ͱ-%4(ʢ-*/&ͷσβΠϯγεςϜʣٴͼ -*/&ϚϯΨͷ։ൃʹैࣄ͍ͯ͠·͢ɻ 5BJLJ
   *LFEB -*/&ʗ'SPOUFOE
   &OHJOFFS
6. ొஃऀ঺հ 2019೥11݄ʹLINEגࣜձࣾʹ৽ଔೖࣾ ͦΕҎ߱ LINEόΠτͷϑϩϯτΤϯυ։ൃɺLIFF SDKͷ։ൃʹैࣄ LIFF Mock, LIFF Inspectorͷϝϯςφʔ ্໺ɹ߁ฏ LINEגࣜձࣾʗUIT Dev9 ιϑτ΢ΣΞΤϯδχΞ
7. ొஃऀ঺հ גࣜձࣾϝϧΧϦ΍͍͔ͭ͘ͷελʔτΞοϓͰιϑ τ΢ΣΞ։ൃʹैࣄ͠ɺͦͷޙ2018೥ʹιϑτ΢Σ Ξͷઃܭɺ։ൃɺ͓ΑͼͦΕΒͷࢧԉΛߦ͏Πϯελ ϯεθϩגࣜձࣾΛڞಉ૑ۀɻ2020೥ʹLINEגࣜձ ࣾʹೖࣾɻLIFF SDKΛ୲౰͍ͯ͠·͢ɻ ࠤ౻ɹ৴ޗ LINEגࣜձࣾʗUIT Dev2 Τϯδ χΞϦϯάϚωʔδϟʗιϑτ ΢ΣΞΤϯδχΞ
8. ࠓ೔ͷϓϨθϯͷྲྀΕ
9. LIFFʹڵຯΛ࣋ͬͨͱ͋Δ։ൃऀ໨ઢͰ
 LIFFΛ঺հ ͱ͋Δ։ൃऀ A ͞Μ
10. A͞Μ͸։ൃͷͳ͔Ͱ௚໘͢Δग़དྷࣄΛ ػೳ΍πʔϧΛ͔ͭͬͯ೉ͳ͘ղܾ πʔϧΛۦ࢖͢Δ ։ൃऀ A ͞Μ ։ൃऀମݧ(DeX)͕ ྑ͍ঢ়ଶ
11. ࠓ೔͸ػೳ΍πʔϧͷ୲౰։ൃऀࣗ਎͕ ͦΕΒػೳΛ͝঺հ A͞Μͷ։ൃΛΞγετ͢Δ LIFFνʔϜͷϝϯόʔ ཪ࿩΋͠·͢
12. A͞Μ͕ͭ͘ΔΞϓϦͷཁ݅ • എܠ • A͞Μ͸ͱ͋ΔಉਓαʔΫϧͷϝϯόʔͷҰਓ • ͱ͋ΔΠϕϯτͰαʔΫϧ͕ϒʔεΛग़ల͢Δ • ϑΝϯ͸͍Δ΋ͷͷɺαʔΫϧͷ஌໊౓͕௿͍ • ·ͨԿΛϑΝϯ͕ͷͧΜͰ͍Δͷ͔χʔζΛ௫Ί͍ͯͳ͍ • ໨త • LIFF App͸ࣄલʹϑΝϯͷํʹڞ༗͓ͯ͘͠ʢOAͱ͔ʣ • LIFF AppΛ࢖͍ɺϑΝϯʹɺLINEΛ༻͍ͯαʔΫϧͷ঺հΛߦͬͯ΄͍͠ • →ࢦఆͨ͠༑ͩͪʹϝοηʔδΛૹΔػೳ • LIFF AppΛ࢖͍ɺདྷ৔ͨ͠ϑΝϯʹΞϯέʔτʹ౴͑ͯ΋Β͍ɺࠓޙͷαʔΫϧͷӡ Ӧʹ໾ཱ͍ͯͨ • →ϒʔεʹઃஔͨ͠QRίʔυΛಡΈऔΔػೳ
13. A͞Μ͕ͭ͘ΔΞϓϦͷཁ݅
14. खݩͰLIFFͷ ػೳΛࢼͯ͠ΈΔ ೝ஌͔Β׬੒·Ͱ ػೳΛ࣮૷͢Δ υΩϡϝϯτΛ ಡΉ LIFFͷ ։ൃ؀ڥΛͭ͘Δ σόοάπʔϧΛ ͔ͭ͏ কདྷͷͨΊʹ ֦ுੑΛ΋ͨͤΔ ೝ஌: LIFFͱ͸ʁ
15. खݩͰLIFFͷ ػೳΛࢼͯ͠ΈΔ ೝ஌͔Β׬੒·Ͱ ػೳΛ࣮૷͢Δ υΩϡϝϯτΛ ಡΉ LIFFͷ ։ൃ؀ڥΛͭ͘Δ σόοάπʔϧΛ ͔ͭ͏ কདྷͷͨΊʹ ֦ுੑΛ΋ͨͤΔ ೝ஌: LIFFͱ͸ʁ
16. › LINE Front-end Framework (LIFF) › ΢ΣϒΞϓϦέʔγϣϯ › HTML, CSS, JavaScript › LINEϓϥοτϑΥʔϜͱͷ࿈ܞ › ೝՄ › User ϓϩϑΟʔϧ › Messaging API › JS SDK LIFFͱ͸ʁ
17. LIFF Developer EndUser LIFFͷϢʔβʔ LIFFͷ࢖͍΍͢͞͸ɺΤϯυϢʔβʔͷ࢖͍΍͢͞ͱϦϯΫ͍ͯ͠Δ
18. LIFF vs LINEϛχΞϓϦ Excerpted from LINE API Use Case LIFF App LINEϛχΞϓϦ Tech Stack LIFF SDK LIFF SDK Operation Env LINE App (SP) General Browsers (PC, SP) LINE App (SP) LINE review and approval None Required Service Message chat room Not available Available to all apps
19. Samples for LIFF Appᶃ LINE Family Services LINE Official Account LINE NEWS LINE Sticker Shop
20. Samples for LIFF Appᶄ Third Party Apps ϓϨΠϧʔϜ THE BINGO enpay
21. Characteristics of LIFF The strengths of LIFF as a platform Ϋϩεϒϥ΢βʔαϙʔτ ༷ʑͳ΢Οϯυ΢λΠϓ ϢʔςΟϦςΟͷఏڙ ಠࣗͷڧྗͳػೳ LINE Login / τʔΫը໘࿈ܞ ͋ͳͨͷLIFF APIΛ࡞ΕΔ
22. ༷ʑͳ΢Οϯυ΢λΠϓ
23. ༷ʑͳ΢Οϯυ΢λΠϓ OA΍τʔΫը໘ͱ࿈ܞ͢ΔલఏͷΞϓϦͷ Ϣʔεέʔε͕ଟ͍ WebΞϓϦͱͯ͠׬݁͢Δ Ϣʔεέʔε͕ଟ͍
24. ༷ʑͳ΢Οϯυ΢λΠϓ: αϒ΢Οϯυ΢ Improve UX of users leaving services unintentionally * FullͷΈରԠ * ۙ೔ެ։
25. LINE Login ࿈ܞ Can get user profile information safely without complex settings Step1: Scan code
26. LIFF SDK ͷॳظԽ
27. τʔΫը໘࿈ܞ + Context (LIFFΞϓϦ͕ى ಈ͞Εͨը໘ʹ ؔ͢Δ৘ใ) Open LIFF Back to Talk
28. Ϋϩεϒϥ΢βʔαϙʔτ ྫ: LIFF Playground
29. - liff.scanCodeV2 - Code scan function using WebRTC - liff.isApiAvailable - liff.getLineVersion - liff.getOS ϢʔςΟϦςΟͷఏڙ
30. ಠࣗͷڧྗͳػೳ LIFF Share Target Picker Select multiple items at once
31. ಠࣗͷڧྗͳػೳ ಉҙը໘εΩοϓ(ϛχΞϓϦݶఆ) When accessing LINE MINI App A for the first time When accessing LINE MINI App B for the first time
32. ͋ͳͨͷLIFF APIΛ࡞ΕΔ ޙ΄Ͳ ͝આ໌
33. ೝ஌: LIFFͱ͸ʁ खݩͰLIFFͷ ػೳΛࢼͯ͠ΈΔ ೝ஌͔Β׬੒·Ͱ ػೳΛ࣮૷͢Δ LIFFͷ ։ൃ؀ڥΛͭ͘Δ σόοάπʔϧΛ ͔ͭ͏ কདྷͷͨΊʹ ֦ுੑΛ΋ͨͤΔ υΩϡϝϯτΛ ಡΉ
34. https://developers.line.biz/ja/
36. ݱߦόʔδϣϯ
37. چόʔδϣϯ
38. LINE Developers্Ͱߦ͏Α͏ͳૢ࡞͕APIܦ༝ͰͰ͖Δ (LIFF v1, v2 ͱ΋ʹରԠ)
39. ೝ஌: LIFFͱ͸ʁ खݩͰLIFFͷ ػೳΛࢼͯ͠ΈΔ ೝ஌͔Β׬੒·Ͱ ػೳΛ࣮૷͢Δ υΩϡϝϯτΛ ಡΉ LIFFͷ ։ൃ؀ڥΛͭ͘Δ কདྷͷͨΊʹ ֦ுੑΛ΋ͨͤΔ σόοάπʔϧΛ ͔ͭ͏
40. LIFF Playground IUUQTMJ⒎QMBZHSPVOEOFUMJGZBQQ
41. ೝ஌
    -*''ͱ͸ʁ खݩͰ-*''ͷ ػೳΛࢼͯ͠Έ Δ ೝ஌͔Β׬੒·Ͱ ػೳΛ࣮૷͢Δ υΩϡϝϯτΛ ಡΉ -*''ͷ ։ൃ؀ڥΛͭ͘Δ σόοάπʔϧ Λ͔ͭ͏ কདྷͷͨΊʹ ֦ுੑΛ΋ͨͤΔ
42. -*''ͷ։ൃ؀ڥΛͭ͘Δ https://github.com/line/create-liff-app
43. -*''ͷ։ൃ؀ڥΛͭ͘Δ https://developers.line.biz/console/
44. ೝ஌
    -*''ͱ͸ʁ खݩͰ-*''ͷ ػೳΛࢼͯ͠Έ Δ ೝ஌͔Β׬੒·Ͱ υΩϡϝϯτΛ ಡΉ -*''ͷ ։ൃ؀ڥΛͭ͘Δ σόοάπʔϧ Λ͔ͭ͏ কདྷͷͨΊʹ ֦ுੑΛ΋ͨͤΔ ػೳΛ࣮૷͢Δ
45. ػೳΛ࣮૷͢Δ LIFF URL: https://liff.line.me/1657073332-2r96vPBk GitHub: https://github.com/so99ynoodles/liff-deep-dive
46. ػೳΛ࣮૷͢Δ liff.shareTargetPicker() liff.scanCodeV2()
47. liff.init()
48. liff.shareTargetPicker()
49. liff.scanCodeV2()
50. "1*ϨϑΝϨϯε IUUQTEFWFMPQFSTMJOFCJ[KBSFGFSFODFMJGG
51. ೝ஌: LIFFͱ͸ʁ खݩͰLIFFͷ ػೳΛࢼͯ͠ΈΔ ೝ஌͔Β׬੒·Ͱ ػೳΛ࣮૷͢Δ υΩϡϝϯτΛ ಡΉ LIFFͷ ։ൃ؀ڥΛͭ͘Δ কདྷͷͨΊʹ ֦ுੑΛ΋ͨͤΔ σόοάπʔϧΛ ͔ͭ͏ - ୯ମςετ - σόοά
52. LIFFʹґଘͨؔ͠਺ͷ୯ମςετ
53. LIFFʹґଘͨؔ͠਺ͷ୯ମςετ
54. LIFFʹґଘͨؔ͠਺ͷ୯ମςετ 6ODBVHIU
    &SSPS
    :PV
    OFFE
    UP
    MPHJO
    pSTU 6ODBVHIU
    &SSPS
    -J⒎*E
    JT
    OPU
    GPVOE
55. LIFFʹґଘͨؔ͠਺ͷςετ͸೉͍͠ -*''ʹґଘͨؔ͠਺Λςετ͢Δͱ͖ɺ
     ωοτϫʔΫʹΞΫηεͰ͖Δ؀ڥ͕ඞཁ
     "1*ͷ໭Γ஋͕ݻఆɺมߋͰ͖ͳ͍
     "1*ʹΑͬͯ͸JOJU΍ϩάΠϯ͕ඞཁ
    ˠ͢΂͕ͯ୯ମςετΛෆ҆ఆʹͤ͞Δཁૉ
56. LIFFʹґଘͨؔ͠਺ͷςετ͸೉͍͠ -*''ʹґଘͨؔ͠਺Λςετ͢Δͱ͖ɺ
     ωοτϫʔΫʹΞΫηεͰ͖Δ؀ڥ͕ඞཁ
     "1*ͷ໭Γ஋͕ݻఆɺมߋͰ͖ͳ͍
     "1*ʹΑͬͯ͸JOJU΍ϩάΠϯ͕ඞཁ
    ˠ͢΂͕ͯ୯ମςετΛෆ҆ఆʹͤ͞Δཁૉ "1*ݺͼग़͠ΛʮϞοΫʯͰ͖Δͱɺ
     ωοτϫʔΫΞΫηεඞཁͳ͠
     ϨεϙϯεΛࣗ༝ʹมߋͰ͖Δʢਖ਼ৗܥ΍ҟৗܥʣ
     ಠཱͯ͠ݺͼग़͢͜ͱ͕Ͱ͖Δ
    ˠ୯ମςετ͕༰қʹ࣮ࢪͰ͖Δ -*''
    .PDL
57. LIFF Mock IUUQTHJUIVCDPNMJOFMJ⒎NPDL
58. LIFF Mock DEMO IUUQTHJUIVCDPNMJOFMJ⒎NPDL
59. σόοά -*'' J1IPOF $POTPMF
    MPH /FUXPSL
    MPH %0.
60. σόοά -*'' J1IPOF $POTPMF
    MPH /FUXPSL
    MPH %0. J1IPOF
    "OESPJE
    ୺຤Ͱಈ͍͍ͯΔ-*''ΞϓϦͷ
    σόοά৘ใΛݟΔ͜ͱ͕Ͱ͖ͳ͍ɾɾ
61. LIFF Inspector IUUQTHJUIVCDPNMJOFMJ⒎JOTQFDUPS
62. LIFF Inspector
63. LIFF Inspector IUUQTHJUIVCDPNMJOFMJ⒎JOTQFDUPS DEMO
64. ೝ஌: LIFFͱ͸ʁ खݩͰLIFFͷ ػೳΛࢼͯ͠ΈΔ ೝ஌͔Β׬੒·Ͱ ػೳΛ࣮૷͢Δ υΩϡϝϯτΛ ಡΉ LIFFͷ ։ൃ؀ڥΛͭ͘Δ σόοάπʔϧΛ ͔ͭ͏ কདྷͷͨΊʹ ֦ுੑΛ΋ͨͤΔ
65. LIFFϓϥάΠϯ
66. LIFFϓϥάΠϯ ΞʔΩςΫνϟ

67. LIFFϓϥάΠϯ ΞʔΩςΫνϟ

68. LIFFϓϥάΠϯ ཁૉᶃ SDKΦϒδΣΫτʹಠࣗωʔϜεϖʔεͷ௥Ճ ཁૉᶄ SDKͷAPI΁ͷίʔϧόοΫؔ਺ొ࿥ ཁૉᶅ ϓϥάΠϯಠࣗͷίʔϧόοΫΠϕϯτͷ࡞੒ ػೳ

69. LIFFϓϥάΠϯ liff.use(liffPlugin, options);
70. LIFFϓϥάΠϯ liff.use({ name: 'greet', install() { return { hello(name = 'World') { console.log(`Hello, ${name}!`); }, }; }, }); liff.$greet.hello(); // Hello, World! SDKΦϒδΣΫτʹಠࣗωʔϜεϖʔεͷ௥Ճ

71. LIFFϓϥάΠϯ liff .use({ name: 'simpleHooks', install({ hooks }) { hooks.init.before(async () => console.log('before hook is called')); hooks.init.after(async () => console.log('after hook is called')); }, }) .init({ liffId: 'your_liff_id' }); // before hook is called // after hook is called SDKͷAPI΁ͷίʔϧόοΫؔ਺ొ࿥
72. LIFFϓϥάΠϯ import { SyncHook, AsyncHook } from '@liff/hooks'; class GreetPlugin { name = 'greet'; hooks = { helloBefore: new SyncHook(), helloAfter: new AsyncHook(), }; install() { return { hello: (name = 'World') => { this.hooks.helloBefore.call(); console.log(`Hello, ${name}!`); this.hooks.helloAfter.call(); }, }; } } ϓϥάΠϯಠࣗͷίʔϧόοΫΠϕϯτͷ࡞੒
73. LIFFϓϥάΠϯ liff .use(new GreetPlugin()) .use({ name: 'simpleHook', install({ hooks }) { hooks.$greet.helloBefore( () => console.log('helloBefore is called’) ); hooks.$greet.helloAfter( async () => console.log('helloAfter is called') ); }, }) .$greet.hello('LIFF Plugin'); // helloBefore is called // Hello, LIFF Plugin! // helloAfter is called ϓϥάΠϯಠࣗͷίʔϧόοΫΠϕϯτͷ࡞੒
74. LIFFϓϥάΠϯ const greetPlugin = { name: 'greet', install(context, greet = 'Hello') { return { hello(name = 'World') { console.log(`${greet}, ${name}!`); }, }; }, }; liff.use(greetPlugin, 'Hi'); liff.$greet.hello(); // Hi, World!
75. LIFFϓϥάΠϯ install({ liff }) { liff.getVersion(); // => 2.19.1 }
76. LIFFϓϥάΠϯ class DeepDivePlugin { name: string; constructor() { this.name = 'deepdive'; } install(context: LiffPluginContext) { context.hooks.init.after(this.initAfter); return { shareMessages: this.shareMessages, readQrCode: this.readQrCode }; } initAfter() { if (!liff.isLoggedIn()) { liff.login(); } return Promise.resolve(); } shareMessages(): Promise<ShareTargetPickerResult | void> { // ... } readQrCode(): Promise<void> { // ... } }
77. LIFFϓϥάΠϯ liff.use(new DeepDivePlugin()); // liff.login() called after liff.init() automatically // and you can use the following: // liff.$deepdive.shareMessages() // liff.$deepdive.readQrCode()
78. Outro: ͦͯ͠։ൃऀA͞Μ͸ɻɻ
79. खݩͰLIFFͷ ػೳΛࢼͯ͠ΈΔ ·ͱΊ ػೳΛ࣮૷͢Δ υΩϡϝϯτΛ ಡΉ LIFFͷ ։ൃ؀ڥΛͭ͘Δ σόοάπʔϧΛ ͔ͭ͏ কདྷͷͨΊʹ ֦ுੑΛ΋ͨͤΔ ೝ஌: LIFFͱ͸ʁ
80. खݩͰLIFFͷ ػೳΛࢼͯ͠ΈΔ ·ͱΊ ػೳΛ࣮૷͢Δ υΩϡϝϯτΛ ಡΉ LIFFͷ ։ൃ؀ڥΛͭ͘Δ σόοάπʔϧΛ ͔ͭ͏ কདྷͷͨΊʹ ֦ுੑΛ΋ͨͤΔ ೝ஌: LIFFͱ͸ʁ LIFFͷ6ͭͷಛ௃Λ঺հ LINE Developers LIFF Playground Create-liff-app Codeྫ LIFF Mock LIFF Inspector LIFF Plugin
81. LIFFʹֶ͍ͭͯͼɺπʔϧΛۦ࢖͠ɺ ཧ૝௨Γͷ΋ͷΛ࢓্͛ͨ։ൃऀA͞Μ
82. ૉૣ͍ϦϦʔεΛߦ͏͜ͱ͕Ͱ͖ɺ ظ଴௨Γͷ݁ՌΛಘͨ ϑΝϯ͔ͨͪΒظ଴௨ΓͷϦΞΫγϣϯΛ ಘΔ͜ͱ͕Ͱ͖ɺتͿA͞Μ
83. ͜Ε͔Β΋LIFFʹ͝ظ଴͍ͩ͘͞ ·ͩ·ͩDeXվળʹऔΓ૊Ή LIFFνʔϜͷϝϯόʔ
84. Thank you!