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
LIFF Mock 使ってますか?
sumihiro3
1
530
20240120_SeikaEXPHack2024_テクニカルインプット.pdf
sumihiro3
0
67
LINE API を使って自治会を活性化する地域ポイントPFを開発した話
sumihiro3
0
200
TechSeeker Hackathon LINE API テクニカルインプット
sumihiro3
0
140
TechSeeker Hackathon 本番で使えるLINEのAPI紹介&過去作の紹介
sumihiro3
0
160
安否確認を LINE Bot で
sumihiro3
0
360
LINE ミニアプリ開発の現場から
sumihiro3
2
700
LINE API 総復習シリーズ LINE ミニアプリ 編
sumihiro3
1
290
時代が追いついた!? LINEミニアプリと共に拡大する順番待ちソリューション
sumihiro3
1
1.2k
Other Decks in Technology
See All in Technology
データモデルYANGの処理系を再発明した話
tjmtrhs
0
250
DeepSeekとは?何がいいの? - Databricksと学ぶDeepSeek! 〜これからのLLMに備えよ!〜
taka_aki
1
180
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
550
Snowflake ML モデルを dbt データパイプラインに組み込む
estie
0
110
AIエージェント元年@日本生成AIユーザ会
shukob
1
260
困難を「一般解」で解く
fujiwara3
7
1.9k
Amazon Athenaから利用時のGlueのIcebergテーブルのメンテナンスについて
nayuts
0
110
AI自体のOps 〜LLMアプリの運用、AWSサービスとOSSの使い分け〜
minorun365
PRO
9
940
AWS Well-Architected Frameworkで学ぶAmazon ECSのセキュリティ対策
umekou
2
150
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
9
4.1k
日経のデータベース事業とElasticsearch
hinatades
PRO
0
260
どちらかだけじゃもったいないかも? ECSとEKSを適材適所で併用するメリット、運用課題とそれらの対応について
tk3fftk
2
270
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
650
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
A Modern Web Designer's Workflow
chriscoyier
693
190k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Code Reviewing Like a Champion
maltzj
521
39k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Designing for Performance
lara
605
68k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
GitHub's CSS Performance
jonrohan
1030
460k
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.