LINEを用いたデジタル診察券とLIFFプラグイン

Transcript

1. LINEを用いたデジタル診察券とLIFFプラグイン 
 minako-ph
 2022/12/3@LINE Developer Community 忘年LT大会 #LINEDC

2. 自己紹介

3. 🐱 自己紹介 🐱
 ・山本美奈子（minako-ph）／96年生まれ
 ・株式会社メディカルフォース テックリード
 フロントエンド全般と LINEの開発全般を担当
 約200院に展開する自費診療現場向け VertivalSaaS
 ・Web Front-ent／Mobile Application／ものづくり
 ・ピアノ／フルート／ダンス
 ・Twitter @minako__ph

4. 今回話すこと

5. 今回話すこと 󰠤
 1. 今まで開発したLINE機能について
 2. 📌 デジタル診察券について
 3. 技術周りで引っかりがちだった点について＜呟き＞
 4. 📌 LIFFプラグイン について＜本題＞

6. 1. 今まで開発したLINEを用いた機能について

7. 今まで開発したLINEを用いた機能
 ・LINE x WEB予約
 ・LINE x CRM
 ・患者ページ
 ・デジタル診察券 

8. 2. 最近開発したデジタル診察券について

9. デジタル診察券
 • LINEログインチャネル／LIFF使用
 • LIFFで自動ログイン
 ◦ 来院者自動判定
 • リッチメニューにLIFFのURLを登録することで、
 来院時にスムーズにデジタル診察券を起動
 

10. デジタル診察券で簡単チェックイン
 • ユニークなQRコードを発行しクリニック側管理画面と接続

11. デジタル診察券でポイント確認
 • クリニック側管理画面の会計機能でポイント付与

12. デジタル診察券でランク確認
 ・クリニック側管理画面でランクを設定

13. 3. 技術周りで引っかりがちだった点について＜呟き＞

14. 一次リダイレクト二次リダイレクトの仕組み＜呟き＞
 • Next.jsを使ったリッチなアプリケーションを開発するにあたって、
 一次／二次リダイレクトの仕組みに引っかかることが多かった
 • クエリやパスを駆使したリンク発行など.... （クエリどこいった？事件🥺）
 引用：https://developers.line.biz/ja/docs/liff/opening-liff-app/#redirect-flow

15. 複数院展開／LIFF間遷移＜呟き＞
 • LINE機能だけで約100院に導入してもらっている
 • アクセスしたliffのエンドポイントURLから取れるliff_idと
 エンドポイントURLがズレるとLIFF間遷移が発生する
 • バグが発生した時にどこに原因があるのか見つけるのに苦戦した🤧
 
 

16. 動的なデータ発行（Messaging API）＜呟き＞
 
 • valueが空文字になると失敗しちゃう😭
 ◦ 施術名が空とか金額が空とか 

17. 4. LIFFプラグイン について＜本題＞

18. 開発環境
 • Pluginが発表されるまで とにかく開発が大変だった
 • 2022.04のPluginの発表で開発体験が革命的に向上した🥺✨
 • LINEでしか発生しないバグはとにかく沢山console.logしていた
 ◦ LIFFブラウザに限るバグが発生したことがあった 
 • WEBブラウザ用のアプリケーションとソースコードを共有しているので、
 LINEに関する機能はLIFFブラウザ上で開発する必要があった
 ◦ WEBブラウザで開発すると Webアプリの分岐に入ってしまう為 

19. 開発環境＜Mock＞
 🤧 今まで
 1. localサーバーを立てる
 2. ngrokでホスティング
 3. LINEログインのエンドポイントURLを
 ngrokで発行されたURLに変更
 a. medicalforce SaaS側に登録されてるLIFF IDと
 一致するチャネルを探す必要がありちょっと面倒臭かった 
 4. LIFFのURLを携帯に送ってアクセス
 
 🥰 モック利用時
 1. 環境変数のモックモードを有効にして 
 localサーバーを起動
 2. いつも通りブラウザで開発 

20. 開発環境＜Inspector＞
 
 
 • Chromeブラウザ上でリアルタイムで検証ツールを確認できる
 • 今まで沢山concole.logしてvConsoleで必死に見ていた🥺のが、
 ConsoleやNetwork等の細かな情報をブラウザで確認できるようになった🥰
 
 ローカルホストをリアルタイムでデバッグするには複数サーバーが 
 必要なのでngrokの有料アカウントが必要になってしまう 🤧
 
 引用：https://github.com/line/liff-inspector

21. ありがとうございました 🐱