Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

sumihiro3
September 17, 2020

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

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

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

sumihiro3

September 17, 2020
Tweet

More Decks by sumihiro3

Other Decks in Technology

Transcript

  1. • LIFF ΞϓϦͱ LINE Mini app ࢓༷ͷߟ࡯
    • LIFF ΞϓϦ։ൃ؀ڥˍTips
    LIFF Catchup for ϛχΞϓϦ [ϛχΞϓϦNight ୈҰ஄]
    2020.09.17 Sumihiro Kagawa

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. Ͳ͏͍͏͜ͱʁ
    7

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. ϋʔυϧߴ͍…

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

  43. -*/&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 full-size slide

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

    View full-size slide

  45. -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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  50. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  55. Thank you!
    58

    View full-size slide