Upgrade to Pro — share decks privately, control downloads, hide ads and more …

LIFF Deep Dive 2022

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 佐藤 信吾

A3966f193f4bef226a0d3e3c1f728d7f?s=128

LINE Developers
PRO

May 23, 2022
Tweet

More Decks by LINE Developers

Other Decks in Technology

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/

  35. None
  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:PVOFFEUPMPHJOpSTU 6ODBVHIU&SSPS-J⒎*EJTOPUGPVOE

  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 $POTPMFMPH /FUXPSLMPH %0.

  60. σόοά -*'' J1IPOF $POTPMFMPH /FUXPSLMPH %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!