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

55c9804c185f493816433678393cbe92?s=47 sumihiro3
September 17, 2020

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

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

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

55c9804c185f493816433678393cbe92?s=128

sumihiro3

September 17, 2020
Tweet

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 EFWFMPQNFOUCPBSE Ø υϦϯΫ஫จ Ø -*/& 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