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
390
LINEを用いたデジタル診察券とLIFFプラグイン
minako-ph
December 02, 2022
Tweet
Share
More Decks by minako-ph
See All by minako-ph
静的解析で実現した効率的なi18n対応の仕組みづくり
minako__ph
2
3.6k
現代のVueとTypeScript - 型安全の活用術
minako__ph
5
4.2k
TypeScriptを活用したi18n対応
minako__ph
8
2.8k
LINEログインのログインフローを理解して使う
minako__ph
1
1.3k
ラズパイとGASで加湿器の消し忘れをLINEでリマインド&操作
minako__ph
1
680
はじめてのクロスプラットフォーム開発
minako__ph
1
1k
Other Decks in Programming
See All in Programming
個人軟體時代
ethanhuang13
0
320
私の後悔をAWS DMSで解決した話
hiramax
4
210
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
260
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
200
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
140
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.1k
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
500
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.2k
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
310
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Speed Design
sergeychernyshev
32
1.1k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Fireside Chat
paigeccino
39
3.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
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
ありがとうございました 🐱