Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ミニアプリとLIFFアプリ仕様・開発環境など
Search
sumihiro3
September 17, 2020
Technology
0
700
ミニアプリとLIFFアプリ仕様・開発環境など
LIFF Catchup for ミニアプリ [ミニアプリNight 第一弾]
https://linedevelopercommunity.connpass.com/event/187700/
sumihiro3
September 17, 2020
Tweet
Share
More Decks by sumihiro3
See All by sumihiro3
LIFF Mock 使ってますか?
sumihiro3
0
130
20240120_SeikaEXPHack2024_テクニカルインプット.pdf
sumihiro3
0
22
LINE API を使って自治会を活性化する地域ポイントPFを開発した話
sumihiro3
0
110
TechSeeker Hackathon LINE API テクニカルインプット
sumihiro3
0
89
TechSeeker Hackathon 本番で使えるLINEのAPI紹介&過去作の紹介
sumihiro3
0
110
安否確認を LINE Bot で
sumihiro3
0
200
飲食業イベント向けLIFFアプリを開発した話
sumihiro3
0
810
LINE ミニアプリ開発の現場から
sumihiro3
2
640
LINE API 総復習シリーズ LINE ミニアプリ 編
sumihiro3
1
210
Other Decks in Technology
See All in Technology
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
330
KubeCon EU 2024 Recap “Kubernetes Policy Time Machine: Where to Next?”
ryysud
0
110
Terraformあれやこれ/terraform-this-and-that
emiki
4
460
インシデントレスポンスのライフサイクルを廻すポイントってなに / Pinpoints of Incidentresponse Lifecycle for Operation
sakaitakeshi
1
300
Janus
bkuhlmann
1
490
株式会社EventHub・エンジニア採用資料
eventhub
0
1.9k
巨大なテーブルのテーブル定義を無停止で安全に誰でも変更できるようにする / Table-definitions-for-huge-tables-can-be-modified-by-anyone-safely-and-non-disruptively
freee
1
740
DevOpsDays History and my DevOps story
kawaguti
PRO
8
1.6k
〜小さく始めて大きく育てる〜データ分析基盤の開発から活用まで
kniino
0
2k
Garoon 開発チーム / Garoon development team
cybozuinsideout
PRO
2
2.9k
DevOpsメトリクスとアウトカムの接続にトライ!開発プロセスを通して計測できるメトリクスの活用方法
ham0215
1
200
カオナビの利用実績をアウトカムへつなげる旅 / example-of-data-management-startup-in-kaonavi
kaonavi
0
120
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
321
20k
BBQ
matthewcrist
80
8.7k
Building Applications with DynamoDB
mza
88
5.6k
Large-scale JavaScript Application Architecture
addyosmani
503
110k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
29
6k
A Modern Web Designer's Workflow
chriscoyier
688
190k
A Tale of Four Properties
chriscoyier
150
22k
Bootstrapping a Software Product
garrettdimon
PRO
301
110k
Into the Great Unknown - MozCon
thekraken
10
980
A Philosophy of Restraint
colly
196
16k
Building a Modern Day E-commerce SEO Strategy
aleyda
16
6.4k
Transcript
• LIFF ΞϓϦͱ LINE Mini app ༷ͷߟ • LIFF ΞϓϦ։ൃڥˍTips
LIFF Catchup for ϛχΞϓϦ [ϛχΞϓϦNight ୈҰ] 2020.09.17 Sumihiro Kagawa
Ճ ኍ (Sumihiro Kagawa) •LINE API Expert •python , TypeScript,
Nuxt.js, AWS, GCP •Contributor of LINE Pay API SDK for python 2 sumihiro3 sumihiro.kagawa
ࠓ͢͜ͱ 1. LIFF ΞϓϦͱLINE Mini appʢϛχΞϓϦʣͷؔ 2. LIFF ΞϓϦ։ൃڥͷհ 3.
LIFF ΞϓϦ։ൃͰؾΛ͚͍ͭͨ͜ͱ 3
LIFF ΞϓϦͱLINE Mini app ʢϛχΞϓϦʣͷؔ 4 1.
͋Δํ͕ݴ͍·ͨ͠ 5
ʰLIFF Λ੍͢Δͷɺ ϛχΞϓϦΛ੍͢ʂʱ 6
Ͳ͏͍͏͜ͱʁ 7
LIFF ΞϓϦͱʢެࣜΑΓൈਮʣ • LINE Front-end FrameworkʢLIFFʣɺLINE͕ఏڙ͢ΔΣϒΞϓ ϦͷϓϥοτϑΥʔϜͰ͢ɻ͜ͷϓϥοτϑΥʔϜͰಈ࡞͢ΔΣ ϒΞϓϦΛɺLIFFΞϓϦͱݺͼ·͢ɻ 8 https://developers.line.biz/ja/docs/liff/overview/
LIFF ΞϓϦͱʢެࣜΑΓൈਮʣ • ಛ ✦ LIFFΞϓϦΛ͏ͱɺLINEͷϢʔβʔIDͳͲΛLINEϓϥοτϑΥʔϜ͔ΒऔಘͰ͖ ·͢ɻ ✦ LIFFΞϓϦͰ͜ΕΒΛར༻ͯ͠ɺϢʔβʔใΛ׆༻ͨ͠ػೳΛఏڙͨ͠ΓɺϢʔ βʔͷΘΓʹϝοηʔδΛૹ৴ͨ͠ΓͰ͖·͢ɻ
9 https://developers.line.biz/ja/docs/liff/overview/
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
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/
ϛχΞϓϦͱʢެࣜΑΓൈਮʣ • LINEϛχΞϓϦɺϥΠϑελΠϧʹ͓͚Δ͞·͟·ͳχʔζʹԠ͑ΔαʔϏ εΛɺLINE্ͰఏڙͰ͖ΔΣϒΞϓϦέʔγϣϯͰ͢ɻ 12 https://www.linebiz.com/jp/service/line-mini-app/
ϛχΞϓϦͱʢެࣜΑΓൈਮʣ • ಛ ✦ ؆қͳαʔϏεىಈͰϢʔβʔࢭ ✦ LINE֎͔ΒΫΠοΫʹϦϐʔτར༻Մೳ ✦ LINEͷτʔΫΛར༻ͯ͠༑ͩͪؒͷڞ༗Ϣʔβʔ௨ 13
https://www.linebiz.com/jp/service/line-mini-app/
ϛχΞϓϦΛ։ൃ͢Δʹʁ 14
ϛχΞϓϦΛ։ൃ͢Δʹʁ LINE Ͱͷࣄલ৹ࠪϦϦʔε৹ࠪΛ ΫϦΞ͢Δඞཁ͋Γ https://www.linebiz.com/jp/contact/line-mini-app/ 15
ϋʔυϧߴ͍…
LIFF ΞϓϦͱϛχΞϓϦͷҧ͍ʁ 17 ͦͦ
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
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
ϛχΞϓϦ LIFFΞϓϦ + ϛχΞϓϦઐ༻ػೳ ͭ·Γ = 20
ϛχΞϓϦઐ༻ػೳͱʁ 21
ओͳϛχΞϓϦઐ༻ػೳ 1. ϛχΞϓϦͷಋઢఏڙ 2. αʔϏεϝοηʔδͷૹ৴ 3. ܾࡁγεςϜͷར༻ 4. ΧελϜγΣΞϘλϯ 22
ϛχΞϓϦͷಋઢ ఏڙ • LINE ΞϓϦͷϗʔϜλϒ͔ΒϛχΞϓϦ ͷಋઢΛఏڙ͢Δ • LINEͷݕࡧػೳ͔ΒɺLINEϛχΞϓϦ ʹΞΫηεͰ͖Δ •
LINE ͷஅʹΑΓɺLINE͕όφʔʹΑΔ ϓϩϞʔγϣϯΛͯ͘͠ΕΔՄೳੑ͋Γ 23
αʔϏεϝοηʔδ ͷૹ৴ • Ϣʔβʔ͔ΒͷϦΫΤετʹର͢Δ֬ೝԠͱ͠ ͯϢʔβʔ͕Δ͖ใΛɺLINEϛχΞϓϦ͔Β ௨͢Δػೳ ✴ ༧ड௨ɺ༧ϦϚΠϯμʔɺॱ൪౸དྷͳͲ • ૹ৴ʹྉ͔͔ۚΒͳ͍ʢ≠
ϓογϡϝοηʔδʣ • ͨͩ͠ɺ͋͘·Ͱ௨Ͱ͋ΓɺׂҾΫʔϙϯ ৽ΛΒͤΔϝοηʔδͱͯ͠ར༻Ͱ͖ͳ͍ 24
ܾࡁγεςϜͷར༻ • ओʹLINE Pay ͰͷܾࡁػೳΛϛχΞϓϦ ʹ౷߹Ͱ͖Δ • LINE Pay Ҏ֎ͷܾࡁࣗલͰ࣮͢Δ
25
ΧελϜγΣΞ Ϙλϯ • ༑ͩͪಉ࢜ͰɺLINEϛχΞϓϦΛ؆୯ʹ γΣΞͰ͖Δ • ϏϧτΠϯͷγΣΞϘλϯ͋Δ 26
͍ͨ͘ͳΔػೳ͔Γʂʂ 27
ଟ͘ͷϛχΞϓϦઐ༻ LIFF Ͱସ࣮Ͱ͖·͢ʂ 28 ࿕ใʂ
ϛχΞϓϦͷಋઢఏڙ • ެࣜʹແ͍͕ɺඇެࣜʮLIFF APP MARKETʯͱ͍͏ΧλϩάαΠτ͋Γ 29 https://liffapp.market/
αʔϏεϝοηʔδͷૹ৴ • ϓογϡϝοηʔδʢແྉΞΧϯτͰ1,000௨/݄ ·Ͱར༻Մʣ 30 https://developers.line.biz/ja/docs/messaging-api/sending-messages/#methods-of-sending-message
ܾࡁγεςϜͷར༻ • LIFF ͰLINE Pay API ΛࣗલͰಋೖͰ͖Δ • ࣮αϯϓϧ͋Γ·͢ 31
https://github.com/sumihiro3/LineThingsDrinkBar υϦϯΫҰཡ จ ܾࡁ࣮ߦ ܾࡁྃ υϦϯΫநग़ நग़ྃ நબ நબྃ
ΧελϜγΣΞϘλϯ • γΣΞλʔήοτϐοΧʔͰಉͷγΣΞػೳ͕͑Δ • ࣮αϯϓϧ͋Γ·͢ 32 https://github.com/LPF-REVUP/lpf-revup-2020
LIFF ΞϓϦͰɺ ϛχΞϓϦͱಉػೳΛ࣮Ͱ͖Δ ͭ·Γ 33
ϛχΞϓϦ LIFFΞϓϦ + ϛχΞϓϦઐ༻ػೳ = 34 LIFF ΞϓϦͱϛχΞϓϦͷؔ ΄΅ɺLIFF ͰସՄೳ
LIFF ΞϓϦ։ൃڥͷհ 2. 35
LIFF ΞϓϦͱʢ࠶ܝʣ • LINE Front-end FrameworkʢLIFFʣɺLINE͕ఏڙ͢ΔΣϒΞϓ ϦͷϓϥοτϑΥʔϜͰ͢ɻ͜ͷϓϥοτϑΥʔϜͰಈ࡞͢ΔΣ ϒΞϓϦΛɺLIFFΞϓϦͱݺͼ·͢ɻ https://developers.line.biz/ja/docs/liff/overview/ 36
LIFF ϛχΞϓϦ ϒϥβʔ্Ͱಈ͘ΣϒΞϓϦ 37
LIFF ΞϓϦͷ։ൃڥྫ 38
家族のお⼿伝い帳 Powered by チーム 家族愛 Ոͷ͓ख͍ா • CLOVA + Bot
+ LIFF ࿈ܞ࡞ • LINE BOOT AWARDS 2018 ϑΝϛϦʔ෦ https://otetsudaicho.jimdofree.com/ 39
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
LINE Things Drink Bar • LINE Things + LIFF ࿈ܞ࡞
• LINE Things Mini Award 2019 ΤϯδχΞ෦ https://github.com/sumihiro3/LineThingsDrinkBar 42 42
υϦϯΫҰཡ จ ܾࡁ࣮ߦ ܾࡁྃ υϦϯΫநग़ நग़ྃ நબ நબྃ 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
LPF REVUP 2020 LP • LPF REVUP 2020 ΠϕϯτLP •
2020.11.14 ։࠵ https://revup.jp/ 45
46
-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/
։ൃڥͷৄࡉͪ͜ΒͰ͠·͢ʂ https://revup.jp/sessions/y9hrhypdo/ 48
LIFF ΞϓϦ։ൃͰ ؾΛ͚͍ͭͨ͜ͱ 3. 49
ΫϥΠΞϯτ͔ΒαʔόʔϢʔβʔใ ΛૹΒͳ͍ • LIFF Λ͑ϑϩϯτͰ؆୯ʹϢʔβʔใΛऔಘͰ͖Δ ✦ ϢʔβʔIDɺද໊ࣔ ͳͲ • ϑϩϯτͰऔಘͨ͠ϢʔβʔใΛͦͷ··αʔόʔૹΒͳ͍
✦ ΫϥΠΞϯτͰվ͟Μ͞ΕͯૹΒΕΔͱͳΓ͢·͠ͳͲͷ੬ऑੑͱͳΔ 50
ެࣜͷਪํ๏ɿ ΞΫηετʔΫϯΛૹΔ 1.LINE ϩάΠϯޙʹΫϥΠΞϯτͰΞΫη ετʔΫϯΛऔಘͯ͠ɺαʔόʔૹΔ 2.αʔόʔͰΞΫηετʔΫϯΛݕূ͢Δ 3.ΞΫηετʔΫϯΛͬͯϢʔβʔใ Λऔಘ͢Δ ✴ ࢀߟʣϛχΞϓϦͷ4FSWJDF.FTTBHFૹ৴ʹΞΫηετʔΫϯ
͕ඞཁͳͷͰ-*''ΞϓϦͰ͏Α͏ʹ͠·͠ΐ͏ https://developers.line.biz/ja/docs/liff/using-user-profile/#sending-access-token 51
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
·ͱΊ (1/3) 1. ϛχΞϓϦ = LIFFΞϓϦ + ϛχΞϓϦઐ༻ػೳ - ศརͳϛχΞϓϦઐ༻ػೳɺLIFF
Ͱ΄΅ସͰ͖Δ 54
·ͱΊ (2/3) 2. ϛχΞϓϦɾ LIFFΞϓϦ ΣϒΞϓϦͰ͋Δ - ΞϓϦͷಛੑʹԠͯ͡ڥΛબ͠Α͏ - αʔόʔϨεڥʹ͍ͭͯʮLPF
REVUP 2020ʯͰʂ 55
·ͱΊ (3/3) 2. LIFFΞϓϦʢϛχΞϓϦʣͳΒͰͷ༷ΛѲ͢Δ - LIFF Λ͑ΫϥΠΞϯτͰ؆୯ʹLINE ͳΒͰͷػೳ͕͑Δ͕ɺ ͦͷམͱ݀͋͠Δ -
LIFF URL ͱ͍͏ಛघͳ༷͋ΔͷͰҙ 56
LIFF ΞϓϦͰܦݧΛՔ͍Ͱ ຊ൪ʢϛχΞϓϦʣʹඋ͑·͠ΐ͏ʂ 57
Thank you! 58