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
310
LINEを用いたデジタル診察券とLIFFプラグイン
minako-ph
December 02, 2022
Tweet
Share
More Decks by minako-ph
See All by minako-ph
静的解析で実現した効率的なi18n対応の仕組みづくり
minako__ph
2
2.9k
現代のVueとTypeScript - 型安全の活用術
minako__ph
5
3.8k
TypeScriptを活用したi18n対応
minako__ph
9
2.5k
LINEログインのログインフローを理解して使う
minako__ph
1
950
ラズパイとGASで加湿器の消し忘れをLINEでリマインド&操作
minako__ph
1
600
はじめてのクロスプラットフォーム開発
minako__ph
1
990
Other Decks in Programming
See All in Programming
ESLintプラグインを使用してCDKのセオリーを適用する
yamanashi_ren01
2
230
Fixstars高速化コンテスト2024準優勝解法
eijirou
0
190
KMP와 kotlinx.rpc로 서버와 클라이언트 동기화
kwakeuijin
0
300
LLM Supervised Fine-tuningの理論と実践
datanalyticslabo
8
1.9k
Запуск 1С:УХ в крупном энтерпрайзе: мечта и реальность ПМа
lamodatech
0
940
Асинхронность неизбежна: как мы проектировали сервис уведомлений
lamodatech
0
1.3k
Итераторы в Go 1.23: зачем они нужны, как использовать, и насколько они быстрые?
lamodatech
0
1.4k
ある日突然あなたが管理しているサーバーにDDoSが来たらどうなるでしょう?知ってるようで何も知らなかったDDoS攻撃と対策 #phpcon.2024
akase244
2
7.7k
asdf-ecspresso作って 友達が増えた話 / Fujiwara Tech Conference 2025
koluku
0
1.4k
サーバーゆる勉強会 DBMS の仕組み編
kj455
1
300
DMMオンラインサロンアプリのSwift化
hayatan
0
180
PHPUnitしか使ってこなかった 一般PHPerがPestに乗り換えた実録
mashirou1234
0
420
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Optimizing for Happiness
mojombo
376
70k
Faster Mobile Websites
deanohume
305
30k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.4k
GitHub's CSS Performance
jonrohan
1030
460k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.6k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
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
ありがとうございました 🐱