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院に導入してもらっている
 ● アクセスしたliffのエンドポイントURLから取れるliff_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/liff-inspector


Slide 21

Slide 21 text

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