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
850
ミニアプリと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
100
LIFF Mock 使ってますか?
sumihiro3
1
680
20240120_SeikaEXPHack2024_テクニカルインプット.pdf
sumihiro3
0
87
LINE API を使って自治会を活性化する地域ポイントPFを開発した話
sumihiro3
0
240
TechSeeker Hackathon LINE API テクニカルインプット
sumihiro3
0
160
TechSeeker Hackathon 本番で使えるLINEのAPI紹介&過去作の紹介
sumihiro3
0
180
安否確認を LINE Bot で
sumihiro3
0
410
飲食業イベント向けLIFFアプリを開発した話
sumihiro3
0
1.3k
LINE ミニアプリ開発の現場から
sumihiro3
2
750
Other Decks in Technology
See All in Technology
【 LLMエンジニアがヒューマノイド開発に挑んでみた 】 - 第104回 Machine Learning 15minutes! Hybrid
soneo1127
0
210
kintone開発チームの紹介
cybozuinsideout
PRO
0
73k
ヘブンバーンズレッドにおける、世界観を活かしたミニゲーム企画の作り方
gree_tech
PRO
0
340
生成AI時代に必要な価値ある意思決定を育てる「開発プロセス定義」を用いた中期戦略
kakehashi
PRO
1
220
AI時代にPdMとPMMはどう連携すべきか / PdM–PMM-collaboration-in-AI-era
rakus_dev
0
170
努力家なスクラムマスターが陥る「傍観者」という罠と乗り越えた先に信頼があった話 / 20250830 Takahiro Sasaki
shift_evolve
PRO
2
120
見てわかるテスト駆動開発
recruitengineers
PRO
6
2.2k
実践アプリケーション設計 ①データモデルとドメインモデル
recruitengineers
PRO
5
1.3k
MCPで変わる Amebaデザインシステム「Spindle」の開発
spindle
PRO
1
240
プロダクトの成長に合わせたアーキテクチャの段階的進化と成長痛、そして、ユニットエコノミクスの最適化
kakehashi
PRO
1
110
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
yug1224
10
3.4k
Jaws-ug名古屋_LT資料_20250829
azoo2024
3
190
Featured
See All Featured
Bash Introduction
62gerente
614
210k
BBQ
matthewcrist
89
9.8k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Unsuck your backbone
ammeep
671
58k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Six Lessons from altMBA
skipperchong
28
4k
Rails Girls Zürich Keynote
gr2m
95
14k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
How GitHub (no longer) Works
holman
315
140k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
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