LIFF Catchup for ミニアプリ [ミニアプリNight 第一弾]
https://linedevelopercommunity.connpass.com/event/187700/
• LIFF ΞϓϦͱ LINE Mini app ༷ͷߟ• LIFF ΞϓϦ։ൃڥˍTipsLIFF Catchup for ϛχΞϓϦ [ϛχΞϓϦNight ୈҰ]2020.09.17 Sumihiro Kagawa
View Slide
Ճ ኍ(Sumihiro Kagawa)•LINE API Expert•python , TypeScript, Nuxt.js, AWS, GCP•Contributor of LINE Pay API SDK forpython2sumihiro3 sumihiro.kagawa
ࠓ͢͜ͱ1. LIFF ΞϓϦͱLINE Mini appʢϛχΞϓϦʣͷؔ2. LIFF ΞϓϦ։ൃڥͷհ3. LIFF ΞϓϦ։ൃͰؾΛ͚͍ͭͨ͜ͱ3
LIFF ΞϓϦͱLINE Mini appʢϛχΞϓϦʣͷؔ41.
͋Δํ͕ݴ͍·ͨ͠5
ʰLIFF Λ੍͢ΔͷɺϛχΞϓϦΛ੍͢ʂʱ6
Ͳ͏͍͏͜ͱʁ7
LIFF ΞϓϦͱʢެࣜΑΓൈਮʣ• LINE Front-end FrameworkʢLIFFʣɺLINE͕ఏڙ͢ΔΣϒΞϓϦͷϓϥοτϑΥʔϜͰ͢ɻ͜ͷϓϥοτϑΥʔϜͰಈ࡞͢ΔΣϒΞϓϦΛɺLIFFΞϓϦͱݺͼ·͢ɻ8https://developers.line.biz/ja/docs/liff/overview/
LIFF ΞϓϦͱʢެࣜΑΓൈਮʣ• ಛ✦ LIFFΞϓϦΛ͏ͱɺLINEͷϢʔβʔIDͳͲΛLINEϓϥοτϑΥʔϜ͔ΒऔಘͰ͖·͢ɻ✦ LIFFΞϓϦͰ͜ΕΒΛར༻ͯ͠ɺϢʔβʔใΛ׆༻ͨ͠ػೳΛఏڙͨ͠ΓɺϢʔβʔͷΘΓʹϝοηʔδΛૹ৴ͨ͠ΓͰ͖·͢ɻ9https://developers.line.biz/ja/docs/liff/overview/
LIFF ΞϓϦͷ։ൃํ๏• ϑϩϯτͰLIFF SDK ʢJavaScriptʣΛΠϯϙʔτ͠ɺఏڙ͞ΕΔAPI ΛͬͯϢʔβʔͷϓϩϑΟʔϧऔಘϝοηʔδૹ৴ͳͲ͕ߦ͑Δ// LIFF ॳظԽʙϢʔβʔͷϓϩϑΟʔϧΛऔಘliff.init({liffId: "123456-abcedfg" // Use own liffId}).then(() => {// Start to use liff's apiliff.getProfile().then(profile => {const name = profile.displayName}).catch((err) => {console.log('error', err);});}).catch((err) => {console.log(err.code, err.message);});10
LIFF ΞϓϦͰఏڙ͞ΕΔAPIʢൈਮʣ"1*໊ ఏڙػೳMJ⒎JOJU -*''"1*ͷॳظԽॲཧMJ⒎HFU04 MJ⒎JT*O$MJFOU ͳͲ-*''ΞϓϦಈ࡞ڥͷใʢ04 ݴޠ -*/&ϒϥβͰಈ࡞͍ͤͯ͞Δ͔Ͳ͏͔ͳͲʣΛऔಘMJ⒎MPHJO ΣϒΞϓϦ͚ͷ-*/&ϩάΠϯͷॲཧMJ⒎HFU"DDFTT5PLFO ʮݱࡏͷϢʔβʔͷΞΫηετʔΫϯʯΛऔಘMJ⒎TFOE.FTTBHFT ϢʔβʔͷΘΓʹɺ-*''ΞϓϦ͕։͔Ε͍ͯΔτʔΫը໘ʹϝοηʔδΛૹ৴MJ⒎TIBSF5BSHFU1JDLFS λʔήοτϐοΧʔʢάϧʔϓ·ͨ༑ͩͪΛબ͢Δը໘ʣΛදࣔ͠ɺλʔήοτϐοΧʔͰબͨ͠૬खʹɺ։ൃऀ͕࡞ͨ͠ϝοηʔδΛૹ৴11https://developers.line.biz/ja/reference/liff/
ϛχΞϓϦͱʢެࣜΑΓൈਮʣ• LINEϛχΞϓϦɺϥΠϑελΠϧʹ͓͚Δ͞·͟·ͳχʔζʹԠ͑ΔαʔϏεΛɺLINE্ͰఏڙͰ͖ΔΣϒΞϓϦέʔγϣϯͰ͢ɻ12https://www.linebiz.com/jp/service/line-mini-app/
ϛχΞϓϦͱʢެࣜΑΓൈਮʣ• ಛ✦ ؆қͳαʔϏεىಈͰϢʔβʔࢭ✦ LINE֎͔ΒΫΠοΫʹϦϐʔτར༻Մೳ✦ LINEͷτʔΫΛར༻ͯ͠༑ͩͪؒͷڞ༗Ϣʔβʔ௨13https://www.linebiz.com/jp/service/line-mini-app/
ϛχΞϓϦΛ։ൃ͢Δʹʁ14
ϛχΞϓϦΛ։ൃ͢ΔʹʁLINE Ͱͷࣄલ৹ࠪϦϦʔε৹ࠪΛΫϦΞ͢Δඞཁ͋Γhttps://www.linebiz.com/jp/contact/line-mini-app/ 15
ϋʔυϧߴ͍…
LIFF ΞϓϦͱϛχΞϓϦͷҧ͍ʁ17ͦͦ
LINEϛχΞϓϦɺLIFFΞϓϦͷҰछͰ͢ެࣜʹ໌هʂhttps://developers.line.biz/ja/docs/line-mini-app/discover/specifications/#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
LINEϛχΞϓϦͰɺLIFF v2.1.x͕ఏڙ͢Δͯ͢ͷLIFF APIΛ༻Ͱ͖·͢19ެࣜʹ໌هʂhttps://developers.line.biz/ja/docs/line-mini-app/discover/specifications/#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
ϛχΞϓϦLIFFΞϓϦ + ϛχΞϓϦઐ༻ػೳͭ·Γ=20
ϛχΞϓϦઐ༻ػೳͱʁ21
ओͳϛχΞϓϦઐ༻ػೳ1. ϛχΞϓϦͷಋઢఏڙ2. αʔϏεϝοηʔδͷૹ৴3. ܾࡁγεςϜͷར༻4. ΧελϜγΣΞϘλϯ22
ϛχΞϓϦͷಋઢఏڙ• LINE ΞϓϦͷϗʔϜλϒ͔ΒϛχΞϓϦͷಋઢΛఏڙ͢Δ• LINEͷݕࡧػೳ͔ΒɺLINEϛχΞϓϦʹΞΫηεͰ͖Δ• LINE ͷஅʹΑΓɺLINE͕όφʔʹΑΔϓϩϞʔγϣϯΛͯ͘͠ΕΔՄೳੑ͋Γ23
αʔϏεϝοηʔδͷૹ৴• Ϣʔβʔ͔ΒͷϦΫΤετʹର͢Δ֬ೝԠͱͯ͠Ϣʔβʔ͕Δ͖ใΛɺLINEϛχΞϓϦ͔Β௨͢Δػೳ✴ ༧ड௨ɺ༧ϦϚΠϯμʔɺॱ൪౸དྷͳͲ• ૹ৴ʹྉ͔͔ۚΒͳ͍ʢ≠ ϓογϡϝοηʔδʣ• ͨͩ͠ɺ͋͘·Ͱ௨Ͱ͋ΓɺׂҾΫʔϙϯ৽ΛΒͤΔϝοηʔδͱͯ͠ར༻Ͱ͖ͳ͍24
ܾࡁγεςϜͷར༻• ओʹLINE Pay ͰͷܾࡁػೳΛϛχΞϓϦʹ౷߹Ͱ͖Δ• LINE Pay Ҏ֎ͷܾࡁࣗલͰ࣮͢Δ25
ΧελϜγΣΞϘλϯ• ༑ͩͪಉ࢜ͰɺLINEϛχΞϓϦΛ؆୯ʹγΣΞͰ͖Δ• ϏϧτΠϯͷγΣΞϘλϯ͋Δ26
͍ͨ͘ͳΔػೳ͔Γʂʂ27
ଟ͘ͷϛχΞϓϦઐ༻LIFF Ͱସ࣮Ͱ͖·͢ʂ28࿕ใʂ
ϛχΞϓϦͷಋઢఏڙ• ެࣜʹແ͍͕ɺඇެࣜʮLIFF APP MARKETʯͱ͍͏ΧλϩάαΠτ͋Γ29https://liffapp.market/
αʔϏεϝοηʔδͷૹ৴• ϓογϡϝοηʔδʢແྉΞΧϯτͰ1,000௨/݄ ·Ͱར༻Մʣ30https://developers.line.biz/ja/docs/messaging-api/sending-messages/#methods-of-sending-message
ܾࡁγεςϜͷར༻• LIFF ͰLINE Pay API ΛࣗલͰಋೖͰ͖Δ• ࣮αϯϓϧ͋Γ·͢31https://github.com/sumihiro3/LineThingsDrinkBarυϦϯΫҰཡ จ ܾࡁ࣮ߦ ܾࡁྃυϦϯΫநग़ நग़ྃ நબ நબྃ
ΧελϜγΣΞϘλϯ• γΣΞλʔήοτϐοΧʔͰಉͷγΣΞػೳ͕͑Δ• ࣮αϯϓϧ͋Γ·͢32https://github.com/LPF-REVUP/lpf-revup-2020
LIFF ΞϓϦͰɺϛχΞϓϦͱಉػೳΛ࣮Ͱ͖Δͭ·Γ33
ϛχΞϓϦLIFFΞϓϦ + ϛχΞϓϦઐ༻ػೳ=34LIFF ΞϓϦͱϛχΞϓϦͷؔ΄΅ɺLIFF ͰସՄೳ
LIFF ΞϓϦ։ൃڥͷհ2.35
LIFF ΞϓϦͱʢ࠶ܝʣ• LINE Front-end FrameworkʢLIFFʣɺLINE͕ఏڙ͢ΔΣϒΞϓϦͷϓϥοτϑΥʔϜͰ͢ɻ͜ͷϓϥοτϑΥʔϜͰಈ࡞͢ΔΣϒΞϓϦΛɺLIFFΞϓϦͱݺͼ·͢ɻhttps://developers.line.biz/ja/docs/liff/overview/ 36
LIFF ϛχΞϓϦϒϥβʔ্Ͱಈ͘ΣϒΞϓϦ37
LIFF ΞϓϦͷ։ൃڥྫ38
家族のお⼿伝い帳Powered by チーム 家族愛Ոͷ͓ख͍ா• CLOVA + Bot + LIFF ࿈ܞ࡞• LINE BOOT AWARDS 2018ϑΝϛϦʔ෦https://otetsudaicho.jimdofree.com/ 39
40
システム構成掃除をやったよü インテント処理ü ポイント管理ü クーポン発⾏ü Bot へのPUSHü ⽬標設定Firebase紙クーポン発⾏DynamoDBAPI Gateway LambdaS3LIFFアプリ表⽰Ոͷ͓ख͍ா• AWS + Firebase- API Gateway + Lambda- HTML + LIFF + jQuery on S3- DynamoDB- Firebase Realtime Databasehttps://otetsudaicho.jimdofree.com/ 41
LINE Things Drink Bar• LINE Things + LIFF ࿈ܞ࡞• LINE Things Mini Award 2019ΤϯδχΞ෦https://github.com/sumihiro3/LineThingsDrinkBar 4242
υϦϯΫҰཡ จ ܾࡁ࣮ߦ ܾࡁྃυϦϯΫநग़ நग़ྃ நબ நબྃ43
-*/&5IJOHT%SJOL#BSΤΞʔϙϯϓ-*/&5IJOHTEFWFMPQNFOUCPBSEØ υϦϯΫจØ -*/& 1BZܾࡁ#-& ܦ༝ͰσόΠε࿈ܞυϦϯΫநग़Ϣʔβʔ-*/&#PU-*/&.FTTBHJOH"1*ΣϒΞϓϦέʔγϣϯαʔόʔܾࡁ༧ˍ࣮ߦ-*''ܦ༝Ͱͷ֤छ"1* ࣮ߦLINE Things Drink Bar• heroku- Flask + Jinja2- PostgreSQLhttps://github.com/sumihiro3/LineThingsDrinkBar 44
LPF REVUP 2020 LP• LPF REVUP 2020 ΠϕϯτLP• 2020.11.14 ։࠵https://revup.jp/ 45
46
-1'3&761-1ʢIUUQTSFWVQKQʣ/FUMJGZ 'VODUJPOTηογϣϯɺεϐʔΧʔͳͲͷΠϕϯτใฤूཧऀNJDSP$.4 /FUMJGZHJU QVDIϏϧυ/VYU+47VFKT -*/&'SPOUFOE'SBNFXPSLʢ-*''ʣ։ൃऀ (JU)VCQVTI௨ιʔείʔυऔಘߋ৽௨ίϯςϯπऔಘDPOOQBTT 4QFBLFS%FDLLPF REVUP 2020 LP• Netlify + microCMS ͷJAMStack ߏ- Netlify Hosting, Functions- Nuxt.js (Full Static Generation)- microCMS GitHub ͷߋ৽ΛτϦΨʔʹαΠτΛϏϧυ47https://revup.jp/
։ൃڥͷৄࡉͪ͜ΒͰ͠·͢ʂhttps://revup.jp/sessions/y9hrhypdo/ 48
LIFF ΞϓϦ։ൃͰؾΛ͚͍ͭͨ͜ͱ3.49
ΫϥΠΞϯτ͔ΒαʔόʔϢʔβʔใΛૹΒͳ͍• LIFF Λ͑ϑϩϯτͰ؆୯ʹϢʔβʔใΛऔಘͰ͖Δ✦ ϢʔβʔIDɺද໊ࣔ ͳͲ• ϑϩϯτͰऔಘͨ͠ϢʔβʔใΛͦͷ··αʔόʔૹΒͳ͍✦ ΫϥΠΞϯτͰվ͟Μ͞ΕͯૹΒΕΔͱͳΓ͢·͠ͳͲͷ੬ऑੑͱͳΔ50
ެࣜͷਪํ๏ɿΞΫηετʔΫϯΛૹΔ1.LINE ϩάΠϯޙʹΫϥΠΞϯτͰΞΫηετʔΫϯΛऔಘͯ͠ɺαʔόʔૹΔ2.αʔόʔͰΞΫηετʔΫϯΛݕূ͢Δ3.ΞΫηετʔΫϯΛͬͯϢʔβʔใΛऔಘ͢Δ✴ ࢀߟʣϛχΞϓϦͷ4FSWJDF.FTTBHFૹ৴ʹΞΫηετʔΫϯ͕ඞཁͳͷͰ-*''ΞϓϦͰ͏Α͏ʹ͠·͠ΐ͏https://developers.line.biz/ja/docs/liff/using-user-profile/#sending-access-token 51
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-flow 52
53
·ͱΊ (1/3)1. ϛχΞϓϦ = LIFFΞϓϦ + ϛχΞϓϦઐ༻ػೳ- ศརͳϛχΞϓϦઐ༻ػೳɺLIFF Ͱ΄΅ସͰ͖Δ54
·ͱΊ (2/3)2. ϛχΞϓϦɾ LIFFΞϓϦ ΣϒΞϓϦͰ͋Δ- ΞϓϦͷಛੑʹԠͯ͡ڥΛબ͠Α͏- αʔόʔϨεڥʹ͍ͭͯʮLPF REVUP 2020ʯͰʂ55
·ͱΊ (3/3)2. LIFFΞϓϦʢϛχΞϓϦʣͳΒͰͷ༷ΛѲ͢Δ- LIFF Λ͑ΫϥΠΞϯτͰ؆୯ʹLINE ͳΒͰͷػೳ͕͑Δ͕ɺͦͷམͱ݀͋͠Δ- LIFF URL ͱ͍͏ಛघͳ༷͋ΔͷͰҙ56
LIFF ΞϓϦͰܦݧΛՔ͍Ͱຊ൪ʢϛχΞϓϦʣʹඋ͑·͠ΐ͏ʂ57
Thank you!58