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
260
LINEを用いたデジタル診察券とLIFFプラグイン
minako-ph
December 02, 2022
Tweet
Share
More Decks by minako-ph
See All by minako-ph
現代のVueとTypeScript - 型安全の活用術
minako__ph
4
3.1k
TypeScriptを活用したi18n対応
minako__ph
9
2.1k
LINEログインのログインフローを理解して使う
minako__ph
1
610
ラズパイとGASで加湿器の消し忘れをLINEでリマインド&操作
minako__ph
1
530
はじめてのクロスプラットフォーム開発
minako__ph
1
960
Other Decks in Programming
See All in Programming
『ドメイン駆動設計をはじめよう』中核の業務領域
masuda220
PRO
5
840
Swiftコードバトル必勝法
toshi0383
0
140
月間4.5億回再生を超える大規模サービス TVer iOSアプリのリアーキテクチャ戦略 - iOSDC2024
techtver
PRO
1
570
Playwrightから始めるVisual Regression Testingのススメ by とっと
totto2727
2
1.8k
Rubyのobject_id
qnighy
6
1.3k
LangChainでWebサイトの内容取得やGitHubソースコード取得
shukob
0
120
dRuby 入門者によるあなたの身近にあるdRuby 入門
makicamel
4
340
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
210
Polars を Kaggle コンペで使ってみた(LMSYS Chatbot Arena)
kohecchi
1
360
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
220
Why Prism?
kddnewton
0
150
マイグレーションコード自作して File-Based Routing に自動移行!! ~250 ページの歴史的経緯を添えて~
cut0
1
240
Featured
See All Featured
From Idea to $5000 a Month in 5 Months
shpigford
378
46k
Fantastic passwords and where to find them - at NoRuKo
philnash
47
2.7k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
How to Think Like a Performance Engineer
csswizardry
15
920
The World Runs on Bad Software
bkeepers
PRO
64
11k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
230
17k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
38
9.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
Being A Developer After 40
akosma
82
580k
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
ありがとうございました 🐱