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
830
ミニアプリと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
Tech Post Cast
sumihiro3
0
92
LIFF Mock 使ってますか?
sumihiro3
1
630
20240120_SeikaEXPHack2024_テクニカルインプット.pdf
sumihiro3
0
80
LINE API を使って自治会を活性化する地域ポイントPFを開発した話
sumihiro3
0
230
TechSeeker Hackathon LINE API テクニカルインプット
sumihiro3
0
160
TechSeeker Hackathon 本番で使えるLINEのAPI紹介&過去作の紹介
sumihiro3
0
180
安否確認を LINE Bot で
sumihiro3
0
400
飲食業イベント向けLIFFアプリを開発した話
sumihiro3
0
1.2k
LINE ミニアプリ開発の現場から
sumihiro3
2
730
Other Decks in Technology
See All in Technology
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
110
KubeCon + CloudNativeCon Japan 2025 に行ってきた! & containerd の新機能紹介
honahuku
0
120
ドメイン特化なCLIPモデルとデータセットの紹介
tattaka
2
530
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
150
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
1
3.1k
How Community Opened Global Doors
hiroramos4
PRO
1
130
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
1.4k
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
310
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.2k
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
1
130
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
380
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
750
Featured
See All Featured
Building Applications with DynamoDB
mza
95
6.5k
Site-Speed That Sticks
csswizardry
10
680
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Documentation Writing (for coders)
carmenintech
72
4.9k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Automating Front-end Workflow
addyosmani
1370
200k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Facilitating Awesome Meetings
lara
54
6.4k
Side Projects
sachag
455
42k
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