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
840
ミニアプリと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
93
LIFF Mock 使ってますか?
sumihiro3
1
640
20240120_SeikaEXPHack2024_テクニカルインプット.pdf
sumihiro3
0
82
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
740
Other Decks in Technology
See All in Technology
「現場で活躍するAIエージェント」を実現するチームと開発プロセス
tkikuchi1002
3
360
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
130
LIXIL基幹システム刷新に立ち向かう技術的アプローチについて
tsukuha
1
380
Data Engineering Study#30 LT資料
tetsuroito
1
200
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
satos
5
3k
ソフトウェアテストのAI活用_ver1.25
fumisuke
1
610
本当にわかりやすいAIエージェント入門
segavvy
1
460
ポストコロナ時代の SaaS におけるコスト削減の意義
izzii
1
470
AIでテストプロセス自動化に挑戦する
sakatakazunori
1
530
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
39k
Copilot coding agentにベットしたいCTOが開発組織で取り組んだこと / GitHub Copilot coding agent in Team
tnir
0
200
助けて! XからWaylandに移行しないと新しいGNOMEが使えなくなっちゃう 2025-07-12
nobutomurata
2
200
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Speed Design
sergeychernyshev
32
1k
Site-Speed That Sticks
csswizardry
10
700
Gamification - CAS2011
davidbonilla
81
5.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Bash Introduction
62gerente
613
210k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Into the Great Unknown - MozCon
thekraken
40
1.9k
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