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
LINEを用いたデジタル診察券とLIFFプラグイン
Search
minako-ph
December 02, 2022
Programming
0
350
LINEを用いたデジタル診察券とLIFFプラグイン
minako-ph
December 02, 2022
Tweet
Share
More Decks by minako-ph
See All by minako-ph
静的解析で実現した効率的なi18n対応の仕組みづくり
minako__ph
2
3.2k
現代のVueとTypeScript - 型安全の活用術
minako__ph
5
4k
TypeScriptを活用したi18n対応
minako__ph
8
2.6k
LINEログインのログインフローを理解して使う
minako__ph
1
1.1k
ラズパイとGASで加湿器の消し忘れをLINEでリマインド&操作
minako__ph
1
640
はじめてのクロスプラットフォーム開発
minako__ph
1
1k
Other Decks in Programming
See All in Programming
2025/3/18 サービスの成長で生じる幅広いパフォーマンスの問題を、 AIで手軽に解決する
shirahama_x
0
170
アプリを起動せずにアプリを開発して品質と生産性を上げる
ishkawa
0
620
PHPでお金を扱う時、終わりのない 謎の1円調査の旅にでなくて済む方法
nakka
4
1.4k
エンジニア未経験が最短で戦力になるためのTips
gokana
0
220
爆速スッキリ! Rspack 移行の成果と道のり - Muddy Web #11
dora1998
1
160
DataStoreをテストする
mkeeda
0
170
S3静的ホスティング+Next.js静的エクスポート で格安webアプリ構築
iharuoru
0
200
パスキーのすべて / 20250324 iddance Lesson.5
kuralab
0
140
Defying Front-End Inertia: Inertia.js on Rails
skryukov
0
270
PHPによる"非"構造化プログラミング入門 -本当に熱いスパゲティコードを求めて- #phperkaigi
o0h
PRO
0
1.1k
Let's Take a Peek at PHP Parser 5.x!
inouehi
0
110
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
kubode
0
190
Featured
See All Featured
Six Lessons from altMBA
skipperchong
27
3.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
8
700
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
102
18k
Fireside Chat
paigeccino
37
3.3k
Become a Pro
speakerdeck
PRO
27
5.2k
Navigating Team Friction
lara
184
15k
Transcript
LINEを用いたデジタル診察券とLIFFプラグイン minako-ph 2022/12/3@LINE Developer Community 忘年LT大会 #LINEDC
自己紹介
🐱 自己紹介 🐱 ・山本美奈子(minako-ph)/96年生まれ ・株式会社メディカルフォース テックリード フロントエンド全般と LINEの開発全般を担当 約200院に展開する自費診療現場向け VertivalSaaS
・Web Front-ent/Mobile Application/ものづくり ・ピアノ/フルート/ダンス ・Twitter @minako__ph
今回話すこと
今回話すこと 1. 今まで開発したLINE機能について 2. 📌 デジタル診察券について 3. 技術周りで引っかりがちだった点について<呟き> 4.
📌 LIFFプラグイン について<本題>
1. 今まで開発したLINEを用いた機能について
今まで開発したLINEを用いた機能 ・LINE x WEB予約 ・LINE x CRM ・患者ページ ・デジタル診察券
2. 最近開発したデジタル診察券について
デジタル診察券 • LINEログインチャネル/LIFF使用 • LIFFで自動ログイン ◦ 来院者自動判定 • リッチメニューにLIFFのURLを登録することで、 来院時にスムーズにデジタル診察券を起動
デジタル診察券で簡単チェックイン • ユニークなQRコードを発行しクリニック側管理画面と接続
デジタル診察券でポイント確認 • クリニック側管理画面の会計機能でポイント付与
デジタル診察券でランク確認 ・クリニック側管理画面でランクを設定
3. 技術周りで引っかりがちだった点について<呟き>
一次リダイレクト二次リダイレクトの仕組み<呟き> • Next.jsを使ったリッチなアプリケーションを開発するにあたって、 一次/二次リダイレクトの仕組みに引っかかることが多かった • クエリやパスを駆使したリンク発行など.... (クエリどこいった?事件🥺) 引用:https://developers.line.biz/ja/docs/liff/opening-liff-app/#redirect-flow
複数院展開/LIFF間遷移<呟き> • LINE機能だけで約100院に導入してもらっている • アクセスしたliffのエンドポイントURLから取れるliff_idと エンドポイントURLがズレるとLIFF間遷移が発生する • バグが発生した時にどこに原因があるのか見つけるのに苦戦した🤧
動的なデータ発行(Messaging API)<呟き> • valueが空文字になると失敗しちゃう😭 ◦ 施術名が空とか金額が空とか
4. LIFFプラグイン について<本題>
開発環境 • Pluginが発表されるまで とにかく開発が大変だった • 2022.04のPluginの発表で開発体験が革命的に向上した🥺✨ • LINEでしか発生しないバグはとにかく沢山console.logしていた ◦ LIFFブラウザに限るバグが発生したことがあった
• WEBブラウザ用のアプリケーションとソースコードを共有しているので、 LINEに関する機能はLIFFブラウザ上で開発する必要があった ◦ WEBブラウザで開発すると Webアプリの分岐に入ってしまう為
開発環境<Mock> 🤧 今まで 1. localサーバーを立てる 2. ngrokでホスティング 3. LINEログインのエンドポイントURLを ngrokで発行されたURLに変更
a. medicalforce SaaS側に登録されてるLIFF IDと 一致するチャネルを探す必要がありちょっと面倒臭かった 4. LIFFのURLを携帯に送ってアクセス 🥰 モック利用時 1. 環境変数のモックモードを有効にして localサーバーを起動 2. いつも通りブラウザで開発
開発環境<Inspector> • Chromeブラウザ上でリアルタイムで検証ツールを確認できる • 今まで沢山concole.logしてvConsoleで必死に見ていた🥺のが、 ConsoleやNetwork等の細かな情報をブラウザで確認できるようになった🥰 ローカルホストをリアルタイムでデバッグするには複数サーバーが
必要なのでngrokの有料アカウントが必要になってしまう 🤧 引用:https://github.com/line/liff-inspector
ありがとうございました 🐱