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
690
20240120_SeikaEXPHack2024_テクニカルインプット.pdf
sumihiro3
0
88
LINE API を使って自治会を活性化する地域ポイントPFを開発した話
sumihiro3
0
240
TechSeeker Hackathon LINE API テクニカルインプット
sumihiro3
0
170
TechSeeker Hackathon 本番で使えるLINEのAPI紹介&過去作の紹介
sumihiro3
0
190
安否確認を LINE Bot で
sumihiro3
0
420
飲食業イベント向けLIFFアプリを開発した話
sumihiro3
0
1.3k
LINE ミニアプリ開発の現場から
sumihiro3
2
750
Other Decks in Technology
See All in Technology
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
440
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
200
エンジニアリングマネージャーの成長の道筋とキャリア / Developers Summit 2025 KANSAI
daiksy
3
1.2k
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
2
320
今日から始めるAWSセキュリティ対策 3ステップでわかる実践ガイド
yoshidatakeshi1994
0
130
Bedrock で検索エージェントを再現しようとした話
ny7760
2
140
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
480
テストを軸にした生き残り術
kworkdev
PRO
0
220
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
120
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.8k
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
340
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
190
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Embracing the Ebb and Flow
colly
87
4.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
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