ミニアプリとLIFFアプリ仕様・開発環境など

Slide 1

Slide 1 text

• LIFF ΞϓϦͱ LINE Mini app ࢓༷ͷߟ࡯ • LIFF ΞϓϦ։ൃ؀ڥˍTips LIFF Catchup for ϛχΞϓϦ [ϛχΞϓϦNight ୈҰ஄] 2020.09.17 Sumihiro Kagawa

Slide 2

Slide 2 text

Ճ઒ ੅ኍ (Sumihiro Kagawa) •LINE API Expert •python , TypeScript, Nuxt.js, AWS, GCP •Contributor of LINE Pay API SDK for python 2 sumihiro3 sumihiro.kagawa

Slide 3

Slide 3 text

ࠓ೔࿩͢͜ͱ 1. LIFF ΞϓϦͱLINE Mini appʢϛχΞϓϦʣͷؔ܎ 2. LIFF ΞϓϦ։ൃ؀ڥͷ঺հ 3. LIFF ΞϓϦ։ൃͰؾΛ͚͍ͭͨ͜ͱ 3

Slide 4

Slide 4 text

LIFF ΞϓϦͱLINE Mini app ʢϛχΞϓϦʣͷؔ܎ 4 1.

Slide 5

Slide 5 text

͋Δํ͕ݴ͍·ͨ͠ 5

Slide 6

Slide 6 text

ʰLIFF Λ੍͢Δ΋ͷ͸ɺ ϛχΞϓϦΛ੍͢ʂʱ 6

Slide 7

Slide 7 text

Ͳ͏͍͏͜ͱʁ 7

Slide 8

Slide 8 text

LIFF ΞϓϦͱ͸ʢެࣜΑΓൈਮʣ • LINE Front-end FrameworkʢLIFFʣ͸ɺLINE͕ఏڙ͢Δ΢ΣϒΞϓ ϦͷϓϥοτϑΥʔϜͰ͢ɻ͜ͷϓϥοτϑΥʔϜͰಈ࡞͢Δ΢Σ ϒΞϓϦΛɺLIFFΞϓϦͱݺͼ·͢ɻ 8 https://developers.line.biz/ja/docs/liff/overview/

Slide 9

Slide 9 text

LIFF ΞϓϦͱ͸ʢެࣜΑΓൈਮʣ • ಛ௃ ✦ LIFFΞϓϦΛ࢖͏ͱɺLINEͷϢʔβʔIDͳͲΛLINEϓϥοτϑΥʔϜ͔ΒऔಘͰ͖ ·͢ɻ ✦ LIFFΞϓϦͰ͸͜ΕΒΛར༻ͯ͠ɺϢʔβʔ৘ใΛ׆༻ͨ͠ػೳΛఏڙͨ͠ΓɺϢʔ βʔͷ୅ΘΓʹϝοηʔδΛૹ৴ͨ͠ΓͰ͖·͢ɻ 9 https://developers.line.biz/ja/docs/liff/overview/

Slide 10

Slide 10 text

LIFF ΞϓϦͷ։ൃํ๏ • ϑϩϯτͰLIFF SDK ʢJavaScriptʣΛΠϯϙʔτ͠ɺఏڙ͞ΕΔAPI Λ࢖ͬ ͯϢʔβʔͷϓϩϑΟʔϧऔಘ΍ϝοηʔδૹ৴ͳͲ͕ߦ͑Δ // LIFF ॳظԽʙϢʔβʔͷϓϩϑΟʔϧΛऔಘ liff.init({liffId: "123456-abcedfg" // Use own liffId }) .then(() => { // Start to use liff's api liff.getProfile() .then(profile => { const name = profile.displayName }) .catch((err) => { console.log('error', err); }); }) .catch((err) => { console.log(err.code, err.message); }); 10

Slide 11

Slide 11 text

LIFF ΞϓϦͰఏڙ͞ΕΔAPIʢൈਮʣ "1*໊ ఏڙػೳ MJ⒎JOJU -*''"1*ͷॳظԽॲཧ MJ⒎HFU04 MJ⒎JT*O$MJFOU ͳͲ -*''ΞϓϦಈ࡞؀ڥͷ৘ใʢ04 ݴޠ -*/&಺ϒϥ΢βͰಈ࡞͍ͤͯ͞Δ ͔Ͳ͏͔ͳͲʣΛऔಘ MJ⒎MPHJO ΢ΣϒΞϓϦ޲͚ͷ-*/&ϩάΠϯͷॲཧ MJ⒎HFU"DDFTT5PLFO ʮݱࡏͷϢʔβʔͷΞΫηετʔΫϯʯΛऔಘ MJ⒎TFOE.FTTBHFT Ϣʔβʔͷ୅ΘΓʹɺ-*''ΞϓϦ͕։͔Ε͍ͯΔτʔΫը໘ʹϝοηʔδΛ ૹ৴ MJ⒎TIBSF5BSHFU1JDLFS λʔήοτϐοΧʔʢάϧʔϓ·ͨ͸༑ͩͪΛબ୒͢Δը໘ʣΛදࣔ͠ɺλ ʔήοτϐοΧʔͰબ୒ͨ͠૬खʹɺ։ൃऀ͕࡞੒ͨ͠ϝοηʔδΛૹ৴ 11 https://developers.line.biz/ja/reference/liff/

Slide 12

Slide 12 text

ϛχΞϓϦͱ͸ʢެࣜΑΓൈਮʣ • LINEϛχΞϓϦ͸ɺϥΠϑελΠϧʹ͓͚Δ͞·͟·ͳχʔζʹԠ͑ΔαʔϏ εΛɺLINE্ͰఏڙͰ͖Δ΢ΣϒΞϓϦέʔγϣϯͰ͢ɻ 12 https://www.linebiz.com/jp/service/line-mini-app/

Slide 13

Slide 13 text

ϛχΞϓϦͱ͸ʢެࣜΑΓൈਮʣ • ಛ௃ ✦ ؆қͳαʔϏεىಈͰϢʔβʔ཭୤๷ࢭ ✦ LINE಺֎͔ΒΫΠοΫʹϦϐʔτར༻Մೳ ✦ LINEͷτʔΫΛར༻ͯ͠༑ͩͪؒͷڞ༗΍Ϣʔβʔ௨஌΋ 13 https://www.linebiz.com/jp/service/line-mini-app/

Slide 14

Slide 14 text

ϛχΞϓϦΛ։ൃ͢Δʹ͸ʁ 14

Slide 15

Slide 15 text

ϛχΞϓϦΛ։ൃ͢Δʹ͸ʁ LINE Ͱͷࣄલ৹ࠪ΍ϦϦʔε৹ࠪΛ ΫϦΞ͢Δඞཁ͋Γ https://www.linebiz.com/jp/contact/line-mini-app/ 15

Slide 16

Slide 16 text

ϋʔυϧߴ͍…

Slide 17

Slide 17 text

LIFF ΞϓϦͱϛχΞϓϦͷҧ͍͸ʁ 17 ͦ΋ͦ΋

Slide 18

Slide 18 text

LINEϛχΞϓϦ͸ɺLIFFΞϓϦͷҰछͰ͢ ެࣜʹ໌هʂ https://developers.line.biz/ja/docs/line-mini-app/discover/speciﬁcations/ #liff%E3%81%AE%E5%AF%BE%E5%BF%9C%E3%83%8F%E3%82%99%E3%83% BC%E3%82%B7%E3%82%99%E3%83%A7%E3%83%B3 18

Slide 19

Slide 19 text

LINEϛχΞϓϦͰ͸ɺ LIFF v2.1.x͕ఏڙ͢Δ͢΂ͯͷLIFF APIΛ ࢖༻Ͱ͖·͢ 19 ެࣜʹ໌هʂ https://developers.line.biz/ja/docs/line-mini-app/discover/speciﬁcations/ #liff%E3%81%AE%E5%AF%BE%E5%BF%9C%E3%83%8F%E3%82%99%E3%83% BC%E3%82%B7%E3%82%99%E3%83%A7%E3%83%B3

Slide 20

Slide 20 text

ϛχΞϓϦ LIFFΞϓϦ + ϛχΞϓϦઐ༻ػೳ ͭ·Γ = 20

Slide 21

Slide 21 text

ϛχΞϓϦઐ༻ػೳͱ͸ʁ 21

Slide 22

Slide 22 text

ओͳϛχΞϓϦઐ༻ػೳ 1. ϛχΞϓϦ΁ͷಋઢఏڙ 2. αʔϏεϝοηʔδͷૹ৴ 3. ܾࡁγεςϜͷར༻ 4. ΧελϜγΣΞϘλϯ 22

Slide 23

Slide 23 text

ϛχΞϓϦ΁ͷಋઢ ఏڙ • LINE ΞϓϦͷϗʔϜλϒ͔ΒϛχΞϓϦ ΁ͷಋઢΛఏڙ͢Δ • LINEͷݕࡧػೳ͔Β΋ɺLINEϛχΞϓϦ ʹΞΫηεͰ͖Δ • LINE ͷ൑அʹΑΓɺLINE͕όφʔʹΑΔ ϓϩϞʔγϣϯΛͯ͘͠ΕΔՄೳੑ͋Γ 23

Slide 24

Slide 24 text

αʔϏεϝοηʔδ ͷૹ৴ • Ϣʔβʔ͔ΒͷϦΫΤετʹର͢Δ֬ೝ΍Ԡ౴ͱ͠ ͯϢʔβʔ͕஌Δ΂͖৘ใΛɺLINEϛχΞϓϦ͔Β ௨஌͢Δػೳ ✴ ༧໿ड෇௨஌ɺ༧໿ϦϚΠϯμʔɺॱ൪౸དྷͳͲ • ૹ৴ʹྉۚ͸͔͔Βͳ͍ʢ≠ ϓογϡϝοηʔδʣ • ͨͩ͠ɺ͋͘·Ͱ௨஌Ͱ͋ΓɺׂҾΫʔϙϯ഑෍΍ ৽঎඼Λ஌ΒͤΔϝοηʔδͱͯ͠͸ར༻Ͱ͖ͳ͍ 24

Slide 25

Slide 25 text

ܾࡁγεςϜͷར༻ • ओʹLINE Pay ͰͷܾࡁػೳΛϛχΞϓϦ ʹ౷߹Ͱ͖Δ • LINE Pay Ҏ֎ͷܾࡁ͸ࣗલͰ࣮૷͢Δ 25

Slide 26

Slide 26 text

ΧελϜγΣΞ Ϙλϯ • ༑ͩͪಉ࢜ͰɺLINEϛχΞϓϦΛ؆୯ʹ γΣΞͰ͖Δ • ϏϧτΠϯͷγΣΞϘλϯ΋͋Δ 26

Slide 27

Slide 27 text

࢖͍ͨ͘ͳΔػೳ͹͔Γʂʂ 27

Slide 28

Slide 28 text

ଟ͘ͷϛχΞϓϦઐ༻͸ LIFF Ͱ΋୅ସ࣮૷Ͱ͖·͢ʂ 28 ࿕ใʂ

Slide 29

Slide 29 text

ϛχΞϓϦ΁ͷಋઢఏڙ • ެࣜʹ͸ແ͍͕ɺඇެࣜʮLIFF APP MARKETʯͱ͍͏ΧλϩάαΠτ͋Γ 29 https://liffapp.market/

Slide 30

Slide 30 text

αʔϏεϝοηʔδͷૹ৴ • ϓογϡϝοηʔδʢແྉΞΧ΢ϯτͰ1,000௨/݄ ·Ͱར༻Մʣ 30 https://developers.line.biz/ja/docs/messaging-api/sending-messages/#methods-of-sending-message

Slide 31

Slide 31 text

ܾࡁγεςϜͷར༻ • LIFF Ͱ΋LINE Pay API ΛࣗલͰಋೖͰ͖Δ • ࣮૷αϯϓϧ͋Γ·͢ 31 https://github.com/sumihiro3/LineThingsDrinkBar υϦϯΫҰཡ ஫จ ܾࡁ࣮ߦ ܾࡁ׬ྃ υϦϯΫநग़ நग़׬ྃ நબ நબ׬ྃ

Slide 32

Slide 32 text

ΧελϜγΣΞϘλϯ • γΣΞλʔήοτϐοΧʔͰಉ౳ͷγΣΞػೳ͕࢖͑Δ • ࣮૷αϯϓϧ͋Γ·͢ 32 https://github.com/LPF-REVUP/lpf-revup-2020

Slide 33

Slide 33 text

LIFF ΞϓϦͰɺ ϛχΞϓϦͱಉ౳ػೳΛ࣮૷Ͱ͖Δ ͭ·Γ 33

Slide 34

Slide 34 text

ϛχΞϓϦ LIFFΞϓϦ + ϛχΞϓϦઐ༻ػೳ = 34 LIFF ΞϓϦͱϛχΞϓϦͷؔ܎ ΄΅ɺLIFF Ͱ୅ସՄೳ

Slide 35

Slide 35 text

LIFF ΞϓϦ։ൃ؀ڥͷ঺հ 2. 35

Slide 36

Slide 36 text

LIFF ΞϓϦͱ͸ʢ࠶ܝʣ • LINE Front-end FrameworkʢLIFFʣ͸ɺLINE͕ఏڙ͢Δ΢ΣϒΞϓ ϦͷϓϥοτϑΥʔϜͰ͢ɻ͜ͷϓϥοτϑΥʔϜͰಈ࡞͢Δ΢Σ ϒΞϓϦΛɺLIFFΞϓϦͱݺͼ·͢ɻ https://developers.line.biz/ja/docs/liff/overview/ 36

Slide 37

Slide 37 text

LIFF ΋ϛχΞϓϦ΋ ϒϥ΢βʔ্Ͱಈ͘΢ΣϒΞϓϦ 37

Slide 38

Slide 38 text

LIFF ΞϓϦͷ։ൃ؀ڥྫ 38

Slide 39

Slide 39 text

家族のお⼿伝い帳 Powered by チーム家族愛 Ո଒ͷ͓ख఻͍ா • CLOVA + Bot + LIFF ࿈ܞ࡞඼ • LINE BOOT AWARDS 2018 ϑΝϛϦʔ෦໳৆ https://otetsudaicho.jimdofree.com/ 39

Slide 40

Slide 40 text

Slide 41

Slide 41 text

システム構成掃除をやったよ ü インテント処理 ü ポイント管理 ü クーポン発⾏ ü Bot へのPUSH ü ⽬標設定 Firebase 紙クーポン発⾏ DynamoDB API Gateway Lambda S3 LIFFアプリ表⽰ Ո଒ͷ͓ख఻͍ா • AWS + Firebase - API Gateway + Lambda - HTML + LIFF + jQuery on S3 - DynamoDB - Firebase Realtime Database https://otetsudaicho.jimdofree.com/ 41

Slide 42

Slide 42 text

LINE Things Drink Bar • LINE Things + LIFF ࿈ܞ࡞඼ • LINE Things Mini Award 2019 ΤϯδχΞ෦໳৆ https://github.com/sumihiro3/LineThingsDrinkBar 42 42

Slide 43

Slide 43 text

υϦϯΫҰཡ ஫จ ܾࡁ࣮ߦ ܾࡁ׬ྃ υϦϯΫநग़ நग़׬ྃ நબ நબ׬ྃ 43

Slide 44

Slide 44 text

-*/&5IJOHT%SJOL#BS ΤΞʔϙϯϓ -*/&5IJOHT EFWFMPQNFOUCPBSE Ø υϦϯΫ஫จ Ø -*/& 1BZܾࡁ #-& ܦ༝Ͱ σόΠε࿈ܞ υϦϯΫநग़ Ϣʔβʔ -*/&#PU -*/& .FTTBHJOH"1* ΢ΣϒΞϓϦέʔγϣϯ αʔόʔ ܾࡁ༧໿ ˍ ࣮ߦ -*''ܦ༝Ͱͷ ֤छ"1* ࣮ߦ LINE Things Drink Bar • heroku - Flask + Jinja2 - PostgreSQL https://github.com/sumihiro3/LineThingsDrinkBar 44

Slide 45

Slide 45 text

LPF REVUP 2020 LP • LPF REVUP 2020 ΠϕϯτLP • 2020.11.14 ։࠵ https://revup.jp/ 45

Slide 46

Slide 46 text

Slide 47

Slide 47 text

-1'3&761-1ʢIUUQTSFWVQKQʣ /FUMJGZ 'VODUJPOT ηογϣϯɺεϐʔΧʔ ͳͲͷΠϕϯτ৘ใฤू ؅ཧऀ NJDSP$.4 /FUMJGZ HJU QVDI Ϗϧυ /VYU+4 7VFKT -*/&'SPOUFOE 'SBNFXPSL ʢ-*''ʣ ։ൃऀ (JU)VC QVTI௨஌ ιʔείʔυऔಘ ߋ৽௨஌ ίϯςϯπऔಘ DPOOQBTT 4QFBLFS%FDL LPF REVUP 2020 LP • Netlify + microCMS ͷ JAMStack ߏ੒ - Netlify Hosting, Functions - Nuxt.js (Full Static Generation) - microCMS ΍GitHub ͷߋ৽ΛτϦΨʔ ʹαΠτΛϏϧυ 47 https://revup.jp/

Slide 48

Slide 48 text

։ൃ؀ڥͷৄࡉ͸ͪ͜ΒͰ࿩͠·͢ʂ https://revup.jp/sessions/y9hrhypdo/ 48

Slide 49

Slide 49 text

LIFF ΞϓϦ։ൃͰ ؾΛ͚͍ͭͨ͜ͱ 3. 49

Slide 50

Slide 50 text

ΫϥΠΞϯτ͔Βαʔόʔ΁Ϣʔβʔ৘ใ ΛૹΒͳ͍ • LIFF Λ࢖͑͹ϑϩϯτͰ؆୯ʹϢʔβʔ৘ใΛऔಘͰ͖Δ ✦ ϢʔβʔIDɺද໊ࣔ ͳͲ • ϑϩϯτͰऔಘͨ͠Ϣʔβʔ৘ใΛͦͷ··αʔόʔ΁ૹΒͳ͍ ✦ ΫϥΠΞϯτͰվ͟Μ͞ΕͯૹΒΕΔͱͳΓ͢·͠ͳͲͷ੬ऑੑͱͳΔ 50

Slide 51

Slide 51 text

ެࣜͷਪ঑ํ๏ɿ ΞΫηετʔΫϯΛૹΔ 1.LINE ϩάΠϯޙʹΫϥΠΞϯτͰΞΫη ετʔΫϯΛऔಘͯ͠ɺαʔόʔ΁ૹΔ 2.αʔόʔͰΞΫηετʔΫϯΛݕূ͢Δ 3.ΞΫηετʔΫϯΛ࢖ͬͯϢʔβʔ৘ใ Λऔಘ͢Δ ✴ ࢀߟʣϛχΞϓϦͷ4FSWJDF.FTTBHFૹ৴ʹΞΫηετʔΫϯ ͕ඞཁͳͷͰ-*''ΞϓϦͰ΋࢖͏Α͏ʹ͠·͠ΐ͏ https://developers.line.biz/ja/docs/liff/using-user-proﬁle/#sending-access-token 51

Slide 52

Slide 52 text

LIFF URL ͷύεɾύϥϝʔλ࿈݁࢓༷Λ ೺Ѳ͓ͯ͘͠ • LIFF ͷΤϯυϙΠϯτURL ʹύε΍ύϥϝʔλΛࢦఆͨ͠৔߹ɺLIFF ॳظԽ ޙʹભҠ͢ΔURL ͕΍΍͍͜͠ʢ΍΍͔ͬͨ͜͠ʣ ✦ ΤϯυϙΠϯτΛ https://example.com/2020campaign/?key=value ͷΑ͏ʹࢦఆ ͍ͯͨ͠৔߹ʹɺLIFF URL ʹύϥϝʔλΛ෇༩ͯ͠LIFF ΞϓϦΛ։͘ͱɺΤϯυϙ Πϯτʹࢦఆͨ͠ύεɾύϥϝʔλʢ্ه੺ࣈ෦෼ʣ͕ফ͑ͯ͠·͏ • ௥Ճ͞Εͨʮ࿈݁ʯઃఆΛ࢖͏ͱղফ͠·͢ https://developers.line.biz/ja/docs/liff/opening-liff-app/#redirect-ﬂow 52

Slide 53

Slide 53 text

Slide 54

Slide 54 text

·ͱΊ (1/3) 1. ϛχΞϓϦ = LIFFΞϓϦ + ϛχΞϓϦઐ༻ػೳ - ศརͳϛχΞϓϦઐ༻ػೳ͸ɺLIFF Ͱ΋΄΅୅ସͰ͖Δ 54

Slide 55

Slide 55 text

·ͱΊ (2/3) 2. ϛχΞϓϦɾ LIFFΞϓϦ ͸΢ΣϒΞϓϦͰ͋Δ - ΞϓϦͷಛੑʹԠͯ͡؀ڥΛબ୒͠Α͏ - αʔόʔϨε؀ڥʹ͍ͭͯ͸ʮLPF REVUP 2020ʯͰʂ 55

Slide 56

Slide 56 text

·ͱΊ (3/3) 2. LIFFΞϓϦʢϛχΞϓϦʣͳΒͰ͸ͷ࢓༷Λ೺Ѳ͢Δ - LIFF Λ࢖͑͹ΫϥΠΞϯτͰ؆୯ʹLINE ͳΒͰ͸ͷػೳ͕࢖͑Δ͕ɺ ͦͷ෼མͱ݀͠΋͋Δ - LIFF URL ͱ͍͏ಛघͳ࢓༷΋͋ΔͷͰ஫ҙ 56