ミニアプリと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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. Ͳ͏͍͏͜ͱʁ
   7
   

   View Slide

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

   View Slide

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

   View Slide

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
    

    View Slide

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/
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. ϋʔυϧߴ͍…
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

40. View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

46. View Slide

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/
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

53. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

58. Thank you!
    58
    

    View Slide