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

LIFF Catchup for ミニアプリ [ミニアプリNight 第一弾]

https://linedevelopercommunity.connpass.com/event/187700/

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