ミニアプリとLIFFアプリ仕様・開発環境など

Transcript

1. • LIFF ΞϓϦͱ LINE Mini app ࢓༷ͷߟ࡯ • LIFF ΞϓϦ։ൃ؀ڥˍTips

   LIFF Catchup for ϛχΞϓϦ [ϛχΞϓϦNight ୈҰ஄] 2020.09.17 Sumihiro Kagawa

2. Ճ઒ ੅ኍ (Sumihiro Kagawa) •LINE API Expert •python , TypeScript,

   Nuxt.js, AWS, GCP •Contributor of LINE Pay API SDK for python 2 sumihiro3 sumihiro.kagawa

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

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

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

5. ͋Δํ͕ݴ͍·ͨ͠ 5

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

7. Ͳ͏͍͏͜ͱʁ 7

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

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

   9 https://developers.line.biz/ja/docs/liff/overview/

10. 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

11. 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/

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

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

    https://www.linebiz.com/jp/service/line-mini-app/

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

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

16. ϋʔυϧߴ͍…

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

18. 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

19. 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

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

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

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

23. ϛχΞϓϦ΁ͷಋઢ ఏڙ • LINE ΞϓϦͷϗʔϜλϒ͔ΒϛχΞϓϦ ΁ͷಋઢΛఏڙ͢Δ • LINEͷݕࡧػೳ͔Β΋ɺLINEϛχΞϓϦ ʹΞΫηεͰ͖Δ •

    LINE ͷ൑அʹΑΓɺLINE͕όφʔʹΑΔ ϓϩϞʔγϣϯΛͯ͘͠ΕΔՄೳੑ͋Γ 23

24. αʔϏεϝοηʔδ ͷૹ৴ • Ϣʔβʔ͔ΒͷϦΫΤετʹର͢Δ֬ೝ΍Ԡ౴ͱ͠ ͯϢʔβʔ͕஌Δ΂͖৘ใΛɺLINEϛχΞϓϦ͔Β ௨஌͢Δػೳ ✴ ༧໿ड෇௨஌ɺ༧໿ϦϚΠϯμʔɺॱ൪౸དྷͳͲ • ૹ৴ʹྉۚ͸͔͔Βͳ͍ʢ≠

    ϓογϡϝοηʔδʣ • ͨͩ͠ɺ͋͘·Ͱ௨஌Ͱ͋ΓɺׂҾΫʔϙϯ഑෍΍ ৽঎඼Λ஌ΒͤΔϝοηʔδͱͯ͠͸ར༻Ͱ͖ͳ͍ 24

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

    25

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

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

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

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

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

31. ܾࡁγεςϜͷར༻ • LIFF Ͱ΋LINE Pay API ΛࣗલͰಋೖͰ͖Δ • ࣮૷αϯϓϧ͋Γ·͢ 31

    https://github.com/sumihiro3/LineThingsDrinkBar υϦϯΫҰཡ ஫จ ܾࡁ࣮ߦ ܾࡁ׬ྃ υϦϯΫநग़ நग़׬ྃ நબ நબ׬ྃ

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

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

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

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

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

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

38. LIFF ΞϓϦͷ։ൃ؀ڥྫ 38

39. 家族のお⼿伝い帳 Powered by チーム 家族愛 Ո଒ͷ͓ख఻͍ா • CLOVA + Bot

    + LIFF ࿈ܞ࡞඼ • LINE BOOT AWARDS 2018 ϑΝϛϦʔ෦໳৆ https://otetsudaicho.jimdofree.com/ 39

40. 40

41. システム構成 掃除をやったよ ü インテント処理 ü ポイント管理 ü クーポン発⾏ ü 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

42. LINE Things Drink Bar • LINE Things + LIFF ࿈ܞ࡞඼

    • LINE Things Mini Award 2019 ΤϯδχΞ෦໳৆ https://github.com/sumihiro3/LineThingsDrinkBar 42 42

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

44. -*/&
    5IJOHT
    %SJOL
    #BS ΤΞʔϙϯϓ -*/&
    5IJOHT
    EFWFMPQNFOU
    CPBSE Ø υϦϯΫ஫จ Ø -*/& 1BZ
    ܾࡁ #-&

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

45. LPF REVUP 2020 LP • LPF REVUP 2020 ΠϕϯτLP •

    2020.11.14 ։࠵ https://revup.jp/ 45

46. 46

47. -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/

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

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

50. ΫϥΠΞϯτ͔Βαʔόʔ΁Ϣʔβʔ৘ใ ΛૹΒͳ͍ • LIFF Λ࢖͑͹ϑϩϯτͰ؆୯ʹϢʔβʔ৘ใΛऔಘͰ͖Δ ✦ ϢʔβʔIDɺද໊ࣔ ͳͲ • ϑϩϯτͰऔಘͨ͠Ϣʔβʔ৘ใΛͦͷ··αʔόʔ΁ૹΒͳ͍

    ✦ ΫϥΠΞϯτͰվ͟Μ͞ΕͯૹΒΕΔͱͳΓ͢·͠ͳͲͷ੬ऑੑͱͳΔ 50

51. ެࣜͷਪ঑ํ๏ɿ ΞΫηετʔΫϯΛૹΔ 1.LINE ϩάΠϯޙʹΫϥΠΞϯτͰΞΫη ετʔΫϯΛऔಘͯ͠ɺαʔόʔ΁ૹΔ 2.αʔόʔͰΞΫηετʔΫϯΛݕূ͢Δ 3.ΞΫηετʔΫϯΛ࢖ͬͯϢʔβʔ৘ใ Λऔಘ͢Δ ✴ ࢀߟʣϛχΞϓϦͷ4FSWJDF.FTTBHF
    ૹ৴ʹΞΫηετʔΫϯ
    

    ͕ඞཁͳͷͰ-*''
    ΞϓϦͰ΋࢖͏Α͏ʹ͠·͠ΐ͏ https://developers.line.biz/ja/docs/liff/using-user-profile/#sending-access-token 51

52. 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. 53

54. ·ͱΊ (1/3) 1. ϛχΞϓϦ = LIFFΞϓϦ + ϛχΞϓϦઐ༻ػೳ - ศརͳϛχΞϓϦઐ༻ػೳ͸ɺLIFF

    Ͱ΋΄΅୅ସͰ͖Δ 54

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

    REVUP 2020ʯͰʂ 55

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

    LIFF URL ͱ͍͏ಛघͳ࢓༷΋͋ΔͷͰ஫ҙ 56

57. LIFF ΞϓϦͰܦݧ஋ΛՔ͍Ͱ ຊ൪ʢϛχΞϓϦʣʹඋ͑·͠ΐ͏ʂ 57

58. Thank you! 58