LIFF Deep Dive 2022 - Speaker Deck

LIFF Deep Dive 2022

by LINE Developers

Slide 1

Slide 1 text

LIFF Deep Dive LIFF Development Team 2022.05

Slide 2

Slide 2 text

ཥகݡ ஑ా ହथ ্໺ ߁ฏ ࠤ౻ ৴ޗ Sato Shingo LIFF FE Lead Ueno Kohei LIFF FE Ԭຊ ୓໵ Okamoto Takuya LIFF Tech PdM Jason Lee LIFF FE Ikeda Taiki LIFF FE

Slide 3

Slide 3 text

ొஃऀ঺հ Webۀքʹͯडୗ։ൃاۀ౳Λసʑͱͨ͠ޙɺLINE ʹೖࣾ͠ɺݱࡏ͸LINE Login΍LIFF SDKͱ͍ͬͨ։ ൃऀ޲͚ϓϩμΫτͷTechnical Product Managerͱ͠ ͯैࣄ͍ͯ͠·͢ɻVueΛ޷Έ·͢ɻ Ԭຊ ୓໵ LINEגࣜձࣾʗDeveloper Product Management νʔϜ / Technical Product Manager

Slide 4

Slide 4 text

ొஃऀ঺հ 2019೥ʹདྷ೔͠ɺLINEגࣜձࣾʹೖࣾ͠·ͨ͠ɻ དྷ೔લ͸୆࿷ͷϑΟϯςοΫձࣾͰ։ൃ୲౰Λ͍ͯ͠·ͨ͠ɻ ࠓ͸LINE MUSICϑϩϯτΤϯυͷςοΫϦʔυΛ୲౰͍ͤͯͨͩ͞ ͍͓ͯΓɺɺLIFF SDKͷ։ൃ΋͍ͯ͠·͢ɻ Jason Lee LINEגࣜձࣾʗژ౎ K3 (UIT) ιϑτ΢ΣΞΤϯδχΞ

Slide 5

Slide 5 text

೥݄ʹ-*/&גࣜձࣾʹೖࣾɻ -*''4%,ͱ-%4(ʢ-*/&ͷσβΠϯγεςϜʣٴͼ -*/&ϚϯΨͷ։ൃʹैࣄ͍ͯ͠·͢ɻ 5BJLJ*LFEB -*/&ʗ'SPOUFOE&OHJOFFS

Slide 6

Slide 6 text

ొஃऀ঺հ 2019೥11݄ʹLINEגࣜձࣾʹ৽ଔೖࣾ ͦΕҎ߱ LINEόΠτͷϑϩϯτΤϯυ։ൃɺLIFF SDKͷ։ൃʹैࣄ LIFF Mock, LIFF Inspectorͷϝϯςφʔ ্໺ɹ߁ฏ LINEגࣜձࣾʗUIT Dev9 ιϑτ΢ΣΞΤϯδχΞ

Slide 7

Slide 7 text

ొஃऀ঺հ גࣜձࣾϝϧΧϦ΍͍͔ͭ͘ͷελʔτΞοϓͰιϑ τ΢ΣΞ։ൃʹैࣄ͠ɺͦͷޙ2018೥ʹιϑτ΢Σ Ξͷઃܭɺ։ൃɺ͓ΑͼͦΕΒͷࢧԉΛߦ͏Πϯελ ϯεθϩגࣜձࣾΛڞಉ૑ۀɻ2020೥ʹLINEגࣜձ ࣾʹೖࣾɻLIFF SDKΛ୲౰͍ͯ͠·͢ɻ ࠤ౻ɹ৴ޗ LINEגࣜձࣾʗUIT Dev2 Τϯδ χΞϦϯάϚωʔδϟʗιϑτ ΢ΣΞΤϯδχΞ

Slide 8

Slide 8 text

ࠓ೔ͷϓϨθϯͷྲྀΕ

Slide 9

Slide 9 text

LIFFʹڵຯΛ࣋ͬͨͱ͋Δ։ൃऀ໨ઢͰ  LIFFΛ঺հ ͱ͋Δ։ൃऀ A ͞Μ

Slide 10

Slide 10 text

A͞Μ͸։ൃͷͳ͔Ͱ௚໘͢Δग़དྷࣄΛ ػೳ΍πʔϧΛ͔ͭͬͯ೉ͳ͘ղܾ πʔϧΛۦ࢖͢Δ ։ൃऀ A ͞Μ ։ൃऀମݧ(DeX)͕ ྑ͍ঢ়ଶ

Slide 11

Slide 11 text

ࠓ೔͸ػೳ΍πʔϧͷ୲౰։ൃऀࣗ਎͕ ͦΕΒػೳΛ͝঺հ A͞Μͷ։ൃΛΞγετ͢Δ LIFFνʔϜͷϝϯόʔ ཪ࿩΋͠·͢

Slide 12

Slide 12 text

A͞Μ͕ͭ͘ΔΞϓϦͷཁ݅ • എܠ • A͞Μ͸ͱ͋ΔಉਓαʔΫϧͷϝϯόʔͷҰਓ • ͱ͋ΔΠϕϯτͰαʔΫϧ͕ϒʔεΛग़ల͢Δ • ϑΝϯ͸͍Δ΋ͷͷɺαʔΫϧͷ஌໊౓͕௿͍ • ·ͨԿΛϑΝϯ͕ͷͧΜͰ͍Δͷ͔χʔζΛ௫Ί͍ͯͳ͍ • ໨త • LIFF App͸ࣄલʹϑΝϯͷํʹڞ༗͓ͯ͘͠ʢOAͱ͔ʣ • LIFF AppΛ࢖͍ɺϑΝϯʹɺLINEΛ༻͍ͯαʔΫϧͷ঺հΛߦͬͯ΄͍͠ • →ࢦఆͨ͠༑ͩͪʹϝοηʔδΛૹΔػೳ • LIFF AppΛ࢖͍ɺདྷ৔ͨ͠ϑΝϯʹΞϯέʔτʹ౴͑ͯ΋Β͍ɺࠓޙͷαʔΫϧͷӡ Ӧʹ໾ཱ͍ͯͨ • →ϒʔεʹઃஔͨ͠QRίʔυΛಡΈऔΔػೳ

Slide 13

Slide 13 text

A͞Μ͕ͭ͘ΔΞϓϦͷཁ݅

Slide 14

Slide 14 text

खݩͰLIFFͷ ػೳΛࢼͯ͠ΈΔ ೝ஌͔Β׬੒·Ͱ ػೳΛ࣮૷͢Δ υΩϡϝϯτΛ ಡΉ LIFFͷ ։ൃ؀ڥΛͭ͘Δ σόοάπʔϧΛ ͔ͭ͏ কདྷͷͨΊʹ ֦ுੑΛ΋ͨͤΔ ೝ஌: LIFFͱ͸ʁ

Slide 15

Slide 15 text

खݩͰLIFFͷ ػೳΛࢼͯ͠ΈΔ ೝ஌͔Β׬੒·Ͱ ػೳΛ࣮૷͢Δ υΩϡϝϯτΛ ಡΉ LIFFͷ ։ൃ؀ڥΛͭ͘Δ σόοάπʔϧΛ ͔ͭ͏ কདྷͷͨΊʹ ֦ுੑΛ΋ͨͤΔ ೝ஌: LIFFͱ͸ʁ

Slide 16

Slide 16 text

› LINE Front-end Framework (LIFF) › ΢ΣϒΞϓϦέʔγϣϯ › HTML, CSS, JavaScript › LINEϓϥοτϑΥʔϜͱͷ࿈ܞ › ೝՄ › User ϓϩϑΟʔϧ › Messaging API › JS SDK LIFFͱ͸ʁ

Slide 17

Slide 17 text

LIFF Developer EndUser LIFFͷϢʔβʔ LIFFͷ࢖͍΍͢͞͸ɺΤϯυϢʔβʔͷ࢖͍΍͢͞ͱϦϯΫ͍ͯ͠Δ

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Samples for LIFF Appᶃ LINE Family Services LINE Official Account LINE NEWS LINE Sticker Shop

Slide 20

Slide 20 text

Samples for LIFF Appᶄ Third Party Apps ϓϨΠϧʔϜ THE BINGO enpay

Slide 21

Slide 21 text

Characteristics of LIFF The strengths of LIFF as a platform Ϋϩεϒϥ΢βʔαϙʔτ ༷ʑͳ΢Οϯυ΢λΠϓ ϢʔςΟϦςΟͷఏڙ ಠࣗͷڧྗͳػೳ LINE Login / τʔΫը໘࿈ܞ ͋ͳͨͷLIFF APIΛ࡞ΕΔ

Slide 22

Slide 22 text

༷ʑͳ΢Οϯυ΢λΠϓ

Slide 23

Slide 23 text

༷ʑͳ΢Οϯυ΢λΠϓ OA΍τʔΫը໘ͱ࿈ܞ͢ΔલఏͷΞϓϦͷ Ϣʔεέʔε͕ଟ͍ WebΞϓϦͱͯ͠׬݁͢Δ Ϣʔεέʔε͕ଟ͍

Slide 24

Slide 24 text

༷ʑͳ΢Οϯυ΢λΠϓ: αϒ΢Οϯυ΢ Improve UX of users leaving services unintentionally * FullͷΈରԠ * ۙ೔ެ։

Slide 25

Slide 25 text

LINE Login ࿈ܞ Can get user profile information safely without complex settings Step1: Scan code

Slide 26

Slide 26 text

LIFF SDK ͷॳظԽ

Slide 27

Slide 27 text

τʔΫը໘࿈ܞ + Context (LIFFΞϓϦ͕ى ಈ͞Εͨը໘ʹ ؔ͢Δ৘ใ) Open LIFF Back to Talk

Slide 28

Slide 28 text

Ϋϩεϒϥ΢βʔαϙʔτ ྫ: LIFF Playground

Slide 29

Slide 29 text

- liff.scanCodeV2 - Code scan function using WebRTC - liff.isApiAvailable - liff.getLineVersion - liff.getOS ϢʔςΟϦςΟͷఏڙ

Slide 30

Slide 30 text

ಠࣗͷڧྗͳػೳ LIFF Share Target Picker Select multiple items at once

Slide 31

Slide 31 text

ಠࣗͷڧྗͳػೳ ಉҙը໘εΩοϓ(ϛχΞϓϦݶఆ) When accessing LINE MINI App A for the first time When accessing LINE MINI App B for the first time

Slide 32

Slide 32 text

͋ͳͨͷLIFF APIΛ࡞ΕΔ ޙ΄Ͳ ͝આ໌

Slide 33

Slide 33 text

ೝ஌: LIFFͱ͸ʁ खݩͰLIFFͷ ػೳΛࢼͯ͠ΈΔ ೝ஌͔Β׬੒·Ͱ ػೳΛ࣮૷͢Δ LIFFͷ ։ൃ؀ڥΛͭ͘Δ σόοάπʔϧΛ ͔ͭ͏ কདྷͷͨΊʹ ֦ுੑΛ΋ͨͤΔ υΩϡϝϯτΛ ಡΉ

Slide 34

Slide 34 text

https://developers.line.biz/ja/

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

ݱߦόʔδϣϯ

Slide 37

Slide 37 text

چόʔδϣϯ

Slide 38

Slide 38 text

LINE Developers্Ͱߦ͏Α͏ͳૢ࡞͕APIܦ༝ͰͰ͖Δ (LIFF v1, v2 ͱ΋ʹରԠ)

Slide 39

Slide 39 text

ೝ஌: LIFFͱ͸ʁ खݩͰLIFFͷ ػೳΛࢼͯ͠ΈΔ ೝ஌͔Β׬੒·Ͱ ػೳΛ࣮૷͢Δ υΩϡϝϯτΛ ಡΉ LIFFͷ ։ൃ؀ڥΛͭ͘Δ কདྷͷͨΊʹ ֦ுੑΛ΋ͨͤΔ σόοάπʔϧΛ ͔ͭ͏

Slide 40

Slide 40 text

LIFF Playground IUUQTMJ⒎QMBZHSPVOEOFUMJGZBQQ

Slide 41

Slide 41 text

ೝ஌-*''ͱ͸ʁ खݩͰ-*''ͷ ػೳΛࢼͯ͠Έ Δ ೝ஌͔Β׬੒·Ͱ ػೳΛ࣮૷͢Δ υΩϡϝϯτΛ ಡΉ -*''ͷ ։ൃ؀ڥΛͭ͘Δ σόοάπʔϧ Λ͔ͭ͏ কདྷͷͨΊʹ ֦ுੑΛ΋ͨͤΔ

Slide 42

Slide 42 text

-*''ͷ։ൃ؀ڥΛͭ͘Δ https://github.com/line/create-liff-app

Slide 43

Slide 43 text

-*''ͷ։ൃ؀ڥΛͭ͘Δ https://developers.line.biz/console/

Slide 44

Slide 44 text

ೝ஌-*''ͱ͸ʁ खݩͰ-*''ͷ ػೳΛࢼͯ͠Έ Δ ೝ஌͔Β׬੒·Ͱ υΩϡϝϯτΛ ಡΉ -*''ͷ ։ൃ؀ڥΛͭ͘Δ σόοάπʔϧ Λ͔ͭ͏ কདྷͷͨΊʹ ֦ுੑΛ΋ͨͤΔ ػೳΛ࣮૷͢Δ

Slide 45

Slide 45 text

ػೳΛ࣮૷͢Δ LIFF URL: https://liff.line.me/1657073332-2r96vPBk GitHub: https://github.com/so99ynoodles/liff-deep-dive

Slide 46

Slide 46 text

ػೳΛ࣮૷͢Δ liff.shareTargetPicker() liff.scanCodeV2()

Slide 47

Slide 47 text

liff.init()

Slide 48

Slide 48 text

liff.shareTargetPicker()

Slide 49

Slide 49 text

liff.scanCodeV2()

Slide 50

Slide 50 text

"1*ϨϑΝϨϯε IUUQTEFWFMPQFSTMJOFCJ[KBSFGFSFODFMJGG

Slide 51

Slide 51 text

ೝ஌: LIFFͱ͸ʁ खݩͰLIFFͷ ػೳΛࢼͯ͠ΈΔ ೝ஌͔Β׬੒·Ͱ ػೳΛ࣮૷͢Δ υΩϡϝϯτΛ ಡΉ LIFFͷ ։ൃ؀ڥΛͭ͘Δ কདྷͷͨΊʹ ֦ுੑΛ΋ͨͤΔ σόοάπʔϧΛ ͔ͭ͏ - ୯ମςετ - σόοά

Slide 52

Slide 52 text

LIFFʹґଘͨؔ͠਺ͷ୯ମςετ

Slide 53

Slide 53 text

LIFFʹґଘͨؔ͠਺ͷ୯ମςετ

Slide 54

Slide 54 text

LIFFʹґଘͨؔ͠਺ͷ୯ମςετ 6ODBVHIU&SSPS:PVOFFEUPMPHJOpSTU 6ODBVHIU&SSPS-J⒎*EJTOPUGPVOE

Slide 55

Slide 55 text

LIFFʹґଘͨؔ͠਺ͷςετ͸೉͍͠ -*''ʹґଘͨؔ͠਺Λςετ͢Δͱ͖ɺ ωοτϫʔΫʹΞΫηεͰ͖Δ؀ڥ͕ඞཁ "1*ͷ໭Γ஋͕ݻఆɺมߋͰ͖ͳ͍ "1*ʹΑͬͯ͸JOJU΍ϩάΠϯ͕ඞཁ ˠ͢΂͕ͯ୯ମςετΛෆ҆ఆʹͤ͞Δཁૉ

Slide 56

Slide 56 text

LIFFʹґଘͨؔ͠਺ͷςετ͸೉͍͠ -*''ʹґଘͨؔ͠਺Λςετ͢Δͱ͖ɺ ωοτϫʔΫʹΞΫηεͰ͖Δ؀ڥ͕ඞཁ "1*ͷ໭Γ஋͕ݻఆɺมߋͰ͖ͳ͍ "1*ʹΑͬͯ͸JOJU΍ϩάΠϯ͕ඞཁ ˠ͢΂͕ͯ୯ମςετΛෆ҆ఆʹͤ͞Δཁૉ "1*ݺͼग़͠ΛʮϞοΫʯͰ͖Δͱɺ ωοτϫʔΫΞΫηεඞཁͳ͠ ϨεϙϯεΛࣗ༝ʹมߋͰ͖Δʢਖ਼ৗܥ΍ҟৗܥʣ ಠཱͯ͠ݺͼग़͢͜ͱ͕Ͱ͖Δ ˠ୯ମςετ͕༰қʹ࣮ࢪͰ͖Δ -*''.PDL

Slide 57

Slide 57 text

LIFF Mock IUUQTHJUIVCDPNMJOFMJ⒎NPDL

Slide 58

Slide 58 text

LIFF Mock DEMO IUUQTHJUIVCDPNMJOFMJ⒎NPDL

Slide 59

Slide 59 text

σόοά -*'' J1IPOF $POTPMFMPH /FUXPSLMPH %0.

Slide 60

Slide 60 text

σόοά -*'' J1IPOF $POTPMFMPH /FUXPSLMPH %0. J1IPOF "OESPJE ୺຤Ͱಈ͍͍ͯΔ-*''ΞϓϦͷ σόοά৘ใΛݟΔ͜ͱ͕Ͱ͖ͳ͍ɾɾ

Slide 61

Slide 61 text

LIFF Inspector IUUQTHJUIVCDPNMJOFMJ⒎JOTQFDUPS

Slide 62

Slide 62 text

LIFF Inspector

Slide 63

Slide 63 text

LIFF Inspector IUUQTHJUIVCDPNMJOFMJ⒎JOTQFDUPS DEMO

Slide 64

Slide 64 text

ೝ஌: LIFFͱ͸ʁ खݩͰLIFFͷ ػೳΛࢼͯ͠ΈΔ ೝ஌͔Β׬੒·Ͱ ػೳΛ࣮૷͢Δ υΩϡϝϯτΛ ಡΉ LIFFͷ ։ൃ؀ڥΛͭ͘Δ σόοάπʔϧΛ ͔ͭ͏ কདྷͷͨΊʹ ֦ுੑΛ΋ͨͤΔ

Slide 65

Slide 65 text

LIFFϓϥάΠϯ

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

LIFFϓϥάΠϯ liff.use(liffPlugin, options);

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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΁ͷίʔϧόοΫؔ਺ొ࿥

Slide 72

Slide 72 text

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(); }, }; } } ϓϥάΠϯಠࣗͷίʔϧόοΫΠϕϯτͷ࡞੒

Slide 73

Slide 73 text

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 ϓϥάΠϯಠࣗͷίʔϧόοΫΠϕϯτͷ࡞੒

Slide 74

Slide 74 text

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!

Slide 75

Slide 75 text

LIFFϓϥάΠϯ install({ liff }) { liff.getVersion(); // => 2.19.1 }

Slide 76

Slide 76 text

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 { // ... } readQrCode(): Promise { // ... } }

Slide 77

Slide 77 text

LIFFϓϥάΠϯ liff.use(new DeepDivePlugin()); // liff.login() called after liff.init() automatically // and you can use the following: // liff.$deepdive.shareMessages() // liff.$deepdive.readQrCode()

Slide 78

Slide 78 text

Outro: ͦͯ͠։ൃऀA͞Μ͸ɻɻ

Slide 79

Slide 79 text

खݩͰLIFFͷ ػೳΛࢼͯ͠ΈΔ ·ͱΊ ػೳΛ࣮૷͢Δ υΩϡϝϯτΛ ಡΉ LIFFͷ ։ൃ؀ڥΛͭ͘Δ σόοάπʔϧΛ ͔ͭ͏ কདྷͷͨΊʹ ֦ுੑΛ΋ͨͤΔ ೝ஌: LIFFͱ͸ʁ

Slide 80

Slide 80 text

खݩͰLIFFͷ ػೳΛࢼͯ͠ΈΔ ·ͱΊ ػೳΛ࣮૷͢Δ υΩϡϝϯτΛ ಡΉ LIFFͷ ։ൃ؀ڥΛͭ͘Δ σόοάπʔϧΛ ͔ͭ͏ কདྷͷͨΊʹ ֦ுੑΛ΋ͨͤΔ ೝ஌: LIFFͱ͸ʁ LIFFͷ6ͭͷಛ௃Λ঺հ LINE Developers LIFF Playground Create-liff-app Codeྫ LIFF Mock LIFF Inspector LIFF Plugin

Slide 81

Slide 81 text

LIFFʹֶ͍ͭͯͼɺπʔϧΛۦ࢖͠ɺ ཧ૝௨Γͷ΋ͷΛ࢓্͛ͨ։ൃऀA͞Μ

Slide 82

Slide 82 text

ૉૣ͍ϦϦʔεΛߦ͏͜ͱ͕Ͱ͖ɺ ظ଴௨Γͷ݁ՌΛಘͨ ϑΝϯ͔ͨͪΒظ଴௨ΓͷϦΞΫγϣϯΛ ಘΔ͜ͱ͕Ͱ͖ɺتͿA͞Μ

Slide 83

Slide 83 text

͜Ε͔Β΋LIFFʹ͝ظ଴͍ͩ͘͞ ·ͩ·ͩDeXվળʹऔΓ૊Ή LIFFνʔϜͷϝϯόʔ

Slide 84

Slide 84 text

Thank you!