LINEを用いたデジタル診察券とLIFFプラグイン

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

自己紹介 

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

今回話すこと 

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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