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

LINE Developers

May 23, 2022
Tweet

More Decks by LINE Developers

Other Decks in Technology

Transcript

  1. ཥகݡ ஑ా ହथ ্໺ ߁ฏ ࠤ౻ ৴ޗ Sato Shingo LIFF

    FE Lead Ueno Kohei LIFF FE Ԭຊ ୓໵ Okamoto Takuya LIFF Tech PdM Jason Lee LIFF FE Ikeda Taiki LIFF FE
  2. A͞Μ͕ͭ͘ΔΞϓϦͷཁ݅ • എܠ • A͞Μ͸ͱ͋ΔಉਓαʔΫϧͷϝϯόʔͷҰਓ • ͱ͋ΔΠϕϯτͰαʔΫϧ͕ϒʔεΛग़ల͢Δ • ϑΝϯ͸͍Δ΋ͷͷɺαʔΫϧͷ஌໊౓͕௿͍ •

    ·ͨԿΛϑΝϯ͕ͷͧΜͰ͍Δͷ͔χʔζΛ௫Ί͍ͯͳ͍ • ໨త • LIFF App͸ࣄલʹϑΝϯͷํʹڞ༗͓ͯ͘͠ʢOAͱ͔ʣ • LIFF AppΛ࢖͍ɺϑΝϯʹɺLINEΛ༻͍ͯαʔΫϧͷ঺հΛߦͬͯ΄͍͠ • →ࢦఆͨ͠༑ͩͪʹϝοηʔδΛૹΔػೳ • LIFF AppΛ࢖͍ɺདྷ৔ͨ͠ϑΝϯʹΞϯέʔτʹ౴͑ͯ΋Β͍ɺࠓޙͷαʔΫϧͷӡ Ӧʹ໾ཱ͍ͯͨ • →ϒʔεʹઃஔͨ͠QRίʔυΛಡΈऔΔػೳ
  3. › LINE Front-end Framework (LIFF) › ΢ΣϒΞϓϦέʔγϣϯ › HTML, CSS,

    JavaScript › LINEϓϥοτϑΥʔϜͱͷ࿈ܞ › ೝՄ › User ϓϩϑΟʔϧ › Messaging API › JS SDK LIFFͱ͸ʁ
  4. 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
  5. Characteristics of LIFF The strengths of LIFF as a platform

    Ϋϩεϒϥ΢βʔαϙʔτ ༷ʑͳ΢Οϯυ΢λΠϓ ϢʔςΟϦςΟͷఏڙ ಠࣗͷڧྗͳػೳ LINE Login / τʔΫը໘࿈ܞ ͋ͳͨͷLIFF APIΛ࡞ΕΔ
  6. - liff.scanCodeV2 - Code scan function using WebRTC - liff.isApiAvailable

    - liff.getLineVersion - liff.getOS ϢʔςΟϦςΟͷఏڙ
  7. LIFFϓϥάΠϯ liff.use({ name: 'greet', install() { return { hello(name =

    'World') { console.log(`Hello, ${name}!`); }, }; }, }); liff.$greet.hello(); // Hello, World! SDKΦϒδΣΫτʹಠࣗωʔϜεϖʔεͷ௥Ճ

  8. 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΁ͷίʔϧόοΫؔ਺ొ࿥
  9. 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(); }, }; } } ϓϥάΠϯಠࣗͷίʔϧόοΫΠϕϯτͷ࡞੒
  10. 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 ϓϥάΠϯಠࣗͷίʔϧόοΫΠϕϯτͷ࡞੒
  11. 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!
  12. 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> { // ... } }
  13. LIFFϓϥάΠϯ liff.use(new DeepDivePlugin()); // liff.login() called after liff.init() automatically //

    and you can use the following: // liff.$deepdive.shareMessages() // liff.$deepdive.readQrCode()
  14. खݩͰLIFFͷ ػೳΛࢼͯ͠ΈΔ ·ͱΊ ػೳΛ࣮૷͢Δ υΩϡϝϯτΛ ಡΉ LIFFͷ ։ൃ؀ڥΛͭ͘Δ σόοάπʔϧΛ ͔ͭ͏

    কདྷͷͨΊʹ ֦ுੑΛ΋ͨͤΔ ೝ஌: LIFFͱ͸ʁ LIFFͷ6ͭͷಛ௃Λ঺հ LINE Developers LIFF Playground Create-liff-app Codeྫ LIFF Mock LIFF Inspector LIFF Plugin