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
380
LINEを用いたデジタル診察券とLIFFプラグイン
minako-ph
December 02, 2022
Tweet
Share
More Decks by minako-ph
See All by minako-ph
静的解析で実現した効率的なi18n対応の仕組みづくり
minako__ph
2
3.4k
現代のVueとTypeScript - 型安全の活用術
minako__ph
5
4.1k
TypeScriptを活用したi18n対応
minako__ph
8
2.7k
LINEログインのログインフローを理解して使う
minako__ph
1
1.2k
ラズパイとGASで加湿器の消し忘れをLINEでリマインド&操作
minako__ph
1
660
はじめてのクロスプラットフォーム開発
minako__ph
1
1k
Other Decks in Programming
See All in Programming
try-catchを使わないエラーハンドリング!? PHPでResult型の考え方を取り入れてみよう
kajitack
3
510
イベントストーミングから始めるドメイン駆動設計
jgeem
4
840
Benchmark
sysong
0
190
SODA - FACT BOOK
sodainc
1
940
カクヨムAndroidアプリのリブート
numeroanddev
0
420
AIネイティブなプロダクトをGolangで挑む取り組み
nmatsumoto4
0
110
ワンバイナリWebサービスのススメ
mackee
10
7.7k
Datadog RUM 本番導入までの道
shinter61
1
280
CSC307 Lecture 17
javiergs
PRO
0
120
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
270
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
960
コード書くの好きな人向けAIコーディング活用tips #orestudy
77web
3
310
Featured
See All Featured
A better future with KSS
kneath
239
17k
We Have a Design System, Now What?
morganepeng
52
7.6k
Facilitating Awesome Meetings
lara
54
6.4k
Practical Orchestrator
shlominoach
188
11k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Making Projects Easy
brettharned
116
6.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
Unsuck your backbone
ammeep
671
58k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
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
ありがとうございました 🐱