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
December 03, 2022
Technology
0
1.2k
飲食業イベント向けLIFFアプリを開発した話
LINE Developer Community忘年LT大会 での発表資料
sumihiro3
December 03, 2022
Tweet
Share
More Decks by sumihiro3
See All by sumihiro3
Tech Post Cast
sumihiro3
0
91
LIFF Mock 使ってますか?
sumihiro3
1
620
20240120_SeikaEXPHack2024_テクニカルインプット.pdf
sumihiro3
0
79
LINE API を使って自治会を活性化する地域ポイントPFを開発した話
sumihiro3
0
220
TechSeeker Hackathon LINE API テクニカルインプット
sumihiro3
0
160
TechSeeker Hackathon 本番で使えるLINEのAPI紹介&過去作の紹介
sumihiro3
0
180
安否確認を LINE Bot で
sumihiro3
0
400
LINE ミニアプリ開発の現場から
sumihiro3
2
730
LINE API 総復習シリーズ LINE ミニアプリ 編
sumihiro3
1
330
Other Decks in Technology
See All in Technology
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
5
540
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
190
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
150
フィンテック養成勉強会#54
finengine
0
180
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
i35_267
4
1.7k
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
660
Claude Code Actionを使ったコード品質改善の取り組み
potix2
PRO
6
2.4k
Delegating the chores of authenticating users to Keycloak
ahus1
0
130
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
410
"サービスチーム" での技術選定 / Making Technology Decisions for the Service Team
kaminashi
1
180
Welcome to the LLM Club
koic
0
190
Wasm元年
askua
0
150
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
430
65k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
710
Designing for Performance
lara
609
69k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
Gamification - CAS2011
davidbonilla
81
5.3k
A Tale of Four Properties
chriscoyier
160
23k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Become a Pro
speakerdeck
PRO
28
5.4k
Transcript
ҿ৯ۀΠϕϯτ͚ -*''ΞϓϦΛ։ൃͨ͠ -*/&%FWFMPQFS$PNNVOJUZ -5େձ 2022.12.02 Sumihiro Kagawa
祝 オフライン会場 イベント再開︕ 🎉 🎉 2
⾃⼰紹介
⾃⼰紹介 n 加川 澄廣(かがわ すみひろ) l 関⻄在住 l LINE API
Expert (2019.04〜) l 所属 Ø 株式会社ブレイブテクノロジー - LINE ミニアプリを利⽤したサービスの開発・運⽤をしています - LINE DC での活動が縁で、趣味が仕事に繋がっちゃいました l 趣味 Ø 開発コンテストへの参加 Ø e-bike でゆるゆる⾛る - 時には 100km 超えの⻑距離(アワイチ、かすいち など)も⾛ります sumihiro3 sumihiro.kagawa 4
本⽇のテーマ
飲⾷業イベント向け LIFFアプリを開発した話 6
開発した LIFF アプリの概要 nイベント対象飲⾷店で利⽤できるチケットの販売と消費 - チケットを⼀つ購⼊すると5ポイント付与される • 決済⽅法︓クレジットカード、コンビニ決済 - ポイントを消費して飲⾷店のイベントメニューと引き換え
開発した LIFF アプリの概要 n⼀定ポイント数を消費すると抽選権獲得 - 1チケット分(5ポイント)消費で、抽選を1回できる - 抽選には当選(特賞〜3等賞)とハズレがある
システム構成・利⽤技術 %FWFMPQFS$PNNVOJUZ ͳͷͰɺ͔͜͜Β͕ϝΠϯ
システム構成図を⼊れる
主な利⽤技術(バックエンド) 利⽤技術 ⽤途など CloudRun GCP が提供するサーバーレスのコンテナ実⾏環境 Ø CI でビルドしたコンテナをデプロイ Firestore
GCP (Firebase) が提供する NoSQL データベース Ø クライアントからも DB にアクセス可能だが、今回はサーバーからのみアクセ ス NestJS バックエンドフレームワーク(Node.js, TypeScript) Ø フロント向けの REST API を提供するサーバーアプリケーションを開発 Ø Open API を活⽤し、API のスキーマ定義からフロントで利⽤する API クライ アントを⾃動⽣成 Ø LINE ログイン認証は Guards を利⽤して共通化
主な利⽤技術(フロントエンド) 利⽤技術 ⽤途など Nuxt3 Vue.js ⽤フレームワーク Ø 2022.11 に stable
版がリリースされたばかり Ø 各種レンダリング(SSR, SPA, SSG など)をサポート(今回は SPA を利⽤) Ø TypeScript をフルサポート OpenAPI Generator API 定義ファイルから各種⾔語の API クライアントを⽣成 Ø `TypeScript Axios` で型付きのリクエスト・レスポンス等を⽣成
主な利⽤技術(SaaS) 利⽤技術 ⽤途など Stripe 決済処理プラットフォーム Ø 多様な決済⼿段を⼿軽に利⽤できる(今回はクレジットカード・コンビニ決 済を利⽤) Ø SDK、開発ドキュメントが充実している
Ø LINE Messaging API と同じ様に、決済イベントを Webhook 受信して処理可 能 Ø ダッシュボードが⾒やすい・情報豊富(⾒習いたい)
今回のアプリ実装での ポイント
1. LINE ログイン認証は NestJS の Guard に⼀任 n認証処理は⼤事だけど毎回書きたくない︕ この処理 https://developers.line.biz/ja/docs/liff/using-user-profile/#sending-id-token
1. LINE ログイン認証は NestJS の Guard に⼀任 n ビジネスロジック実⾏前にリクエストを検証できる `Guard`
で認証処理を実⾏ l ビジネスロジック⾃体に集中して実装できる 認証処理は、ここ (Guard) に任せる https://docs.nestjs.com/guards ビジネスロジックから認証処理を除去で きる
1. LINE ログイン認証は NestJS の Guard に⼀任 @Get() @UseGuards(LiffAuthGuard) @ApiOperation({
operationId: 'Lotteries_findAllʼ, summary: '抽選履歴を取得するʼ, }) // <<中略>> async findAll(@Req() request: Request): Promise<LotteryHistoryDto[]> { this.logger.debug(`LotteriesController.findAll called`); //注⽂履歴取得処理 // <<後略>> } 各エンドポイントには LINE 認証⽤ Guards の 利⽤宣⾔のみ LINE 認証が成功した場合のみビジネスロジック が実⾏される
1. LINE ログイン認証は NestJS の Guard に⼀任 export class LiffAuthGuard
implements CanActivate { private readonly logger = new Logger(LiffAuthGuard.name); constructor( @Inject(LineService) private readonly lineService: LineService) {} async canActivate(context: ExecutionContext): Promise<boolean> { this.logger.debug(`AuthGuard.canActivate called!`); const request = context.switchToHttp().getRequest(); // Get LIFF access token const token: string = request.headers.authorization; // Verify LIFF access token const verifyResult = await this.lineService.verifyLiffToken(token); return verifyResult; } } リクエストヘッダーから LIFF アクセストークン を取得して検証
2. クエリパラメーターを保持するために⼀⼯夫いる n Nuxt3 では LIFF URL に付けたパラメーターを保持でき ない︕︖ Ø
Nuxt3 でパラメーターを付けた LIFF URL からアプリを起動する場合 に`liff.init()` するとクエリパラメーターが消えてしまった https://liff.line.me/12345678-XXXXXX?shop=101&mode=order https://example.com/?shop 23ίʔυΛಡΈࠐΜͰ -*'' ΞϓϦભҠ 何故か1つ⽬のパラメーター キーだけが残る…
2. クエリパラメーターを保持するために⼀⼯夫いる nLIFF の1次リダイレクト〜2次リダイレクトと、 VueRouter の挙動に問題がありそう 2次リダイレクト先 URL の時点でパラ メーターが⽋落してい
る… https://developers.line.biz/ja/docs/liff/opening-liff-app/#redirect-flow
2. クエリパラメーターを保持するために⼀⼯夫いる n【参考】LIFF の1次リダイレクトと2次リダイレクト https://developers.line.biz/ja/docs/liff/opening-liff-app/#setting-second-redirect URL 種別 URL 元の URL
https://liff.line.me/12345678-XXXXXX?shop=101&mode=order 1次リダイレクト先 URL (LIFF Server で変換) https://example.com/?liff.state=urlencoded(shop=101&mode=order) 2次リダイレクト先 URL (`liff.init()` 時に変換) https://example.com/?shop=101&mode=order https://developers.line.biz/ja/docs/liff/opening-liff-app/#create-a-primary-redirect-url
2. クエリパラメーターを保持するために⼀⼯夫いる nLIFF の2次リダイレクト先 URL への変換前に、 VueRouter (hash mode) が
URL を変更しているの が原因の模様 2次リダイレクト先 URL への変換でパラ メーターが⽋落した https://developers.line.biz/ja/docs/liff/opening-liff-app/#redirect-flow `liff.init()` 前に、 VueRouter が URL を変換してしまい
2. クエリパラメーターを保持するために⼀⼯夫いる n`liff.init()` が完了する前に URL やパラメーターを変 更しないでね、と公式ドキュメントに書いてありました https://developers.line.biz/ja/reference/liff/#initialize-liff-app
2. クエリパラメーターを保持するために⼀⼯夫いる nVueRouter は `history mode` を利⽤する Ø SPA でのみ検証済み
https://v3.router.vuejs.org/ja/guide/essentials/history-mode.html mode URL 特徴 hash https://example.com/#/shops?shop=101 Ø VueRouter でデフォルトの mode Ø ルーティングに URL Hash を使⽤ Ø URL に `# (hash)` が⼊ってしまう Ø 古いブラウザでも動く history https://example.com/shops?shop=101 Ø ルーティングに HTML5 の History API を 使⽤ Ø URL に `# (hash)` が⼊らない Ø サーバーで rewrite 設定が必要
2. クエリパラメーターを保持するために⼀⼯夫いる nVueRouter は `history mode` を利⽤する Ø Nuxt3 では
“v3.0.0-rc.10” 以降で使える - rc-8 で⾊々と試していてハマってました - すでに stable 版が出ているので RC 版を使うことはないと思いますが Ø Nuxt3 での設定⽅法 - 公式ドキュメントの `Router Options` 参照 https://nuxt.com/docs/guide/directory-structure/pages/#custom-history-advanced https://github.com/nuxt/framework/releases/tag/v3.0.0-rc.10
まとめ
まとめ 1. フレームワークをうまく使って楽しよう︕ Ø エラい⼈の知⾒を活⽤しよう Ø API 定義から⾃動⽣成すると楽です 2. Nuxt
/ Vue で LIFF アプリを開発する時は、 VueRouter は `history mode` を使おう Ø LIFF の挙動は公式ドキュメントで勉強しよう 3. Stripe はいいぞ︕ Ø 決済処理実装がめっちゃ楽でした Ø コンビニ決済はセブンイレブンにも対応して欲しい
ご清聴 ありがとうございました︕
SNS アカウントなど @sumihiro3 Sumihiro.Kagawa LINE API Expert 29
E.O.C.