Linc'wellを支える技術2021

この記事では Linc'well に興味をもっていただけたエンジニアの方のために、 Linc'well が使っている技術をお伝えします。昨年も同様の記事を作成しておりまして、今回は2021年版です。

昨年版はこちら

前回と同様、

• 個々のプロダクトの概要
• どんな用途にその技術を使っているのか
• 今後の展望

などをお伝えします。

どんな技術を使っているか

はじめに、全体像をパッとお伝えするために採用資料とかでよくある技術のアイコン表をのっけてみます。

去年から少し顔ぶれが変わりました。これらの技術を各プロダクトの紹介をしながら説明していきます。

Linc'well は次のようなものを開発しています。

• CLINIC FOR 予約システム
• CLINIC FOR YOU in LINE ミニアプリ
• sai＋ダイアリー（開発中）

その他にも昨年紹介した Sui+ & sai+ も引き続き運用していますし、 iPad の問診アプリなどなど色々なものがあります。

それでは、それぞれのプロダクトでどんな技術をどうやって使っているのか紹介していきます。

CLINIC FOR 予約システム

Linc'wellがプロデュースするクリニックの CLINIC FOR のための予約システムです。

このプロダクトは大きく3つ役割に分かれています。

• 患者さんがリアルのクリニックの予約を取ったり問診を入力いただく
• 患者さんがオンライン診療の予約を受け、医師の診察を受けて、お薬を決済する
• 上記リアルのクリニック・オンライン診療それぞれについて、クリニックの医療事務さんが受付管理をしたり、医師が診察をする

このプロダクトのほとんどは Ruby on Rails と フロントエンドは Slim というテンプレートエンジンと CoffeeScript で作られています。将来的に患者さん向けの画面は、フロントエンドを React による SPA として実装し、 Rails をバックエンド API として使うことでフロントエンドとバックエンドを分離する予定です。
ただ、乗り換えプロジェクトには大きな工数がかかるため、トライアル的に Rails の一部のビューから React コンポーネントを呼び出しています。患者さんが離脱しやすい箇所（例えば、オンライン診療において事前に問診に答えていただく画面群など）に対して React を導入することで、スムーズな体験となり離脱率低下に貢献しています。

React 導入前の Google Form による問診画面

React 導入後の問診画面

現在の開発体制は、このプロダクトに対して、対面診療（クリニックフォア田町など、実際のクリニック）とオンライン診療でチームを分けて開発しています。対面診療とオンライン診療でテーブルを共有している箇所が多々あり、今後の課題となりそうです。

対面診療

対面診療向けに今年新たに機能開発としては、新型コロナウイルス関連の機能があります。

• コロナウイルスのワクチンの接種の予約をできるようにする
• PCR 検査の結果を閲覧できたり、陰性証明書が取得できるようにする

後者の PCR 検査のデータの取り扱いについては、 AWS の Direct Connect を使った専用ネットワークの構築や、 AWS Lambda を使ったデータの操作など、リンクウェルとしては新規の技術・仕組みを使いました。 Lambda は各メンバー得意な言語を使っているため Python や Node.js などまちまちです。

オンライン診療

オンライン診療は2020年4月に始まって1年が経ち、改善フェーズに入っています。

技術面の変化は

• よりスムーズに使っていただくための工夫として、前述の React を使った事前問診等の改善
• 上記 React コンポーネントの管理に Storybook を使い始めました。併せて Chromatic ( https://www.chromatic.com/ ) というサービスも使っています。
• BI ツールの metabase を導入して患者さんの情報を取得しやすくし、発送業務・カスタマーサポート業務の円滑化

などが挙げられます。

CLINIC FOR YOU in LINE ミニアプリ

前述の予約システムを LINE ミニアプリという、 LINE 上で提供できるウェブアプリケーションで構築したプロダクトです。昨年時点ではモバイルアプリとしてリリース予定でしたが、諸事情あってまずは LINE のプラットフォーム上にリリースすることにしました（そのため、モバイルアプリ開発用に使っていた bitrise や TestFlight がアイコンから姿を消しています）。

Web版同様に予約ができるなどもそうですが、お薬手帳として使えたり、クリニックで受診した血液検査の結果が見られるようになるなど、独自の機能を追加しています。

このプロダクトで採用している技術は、当初の構想通り、フロントエンドは Capacitor + Ionic + React の構成で作られていて、バックエンドは graphql-ruby の GraphQL API として作られています。技術選定の経緯は昨年関が書いているのでご覧ください。

前述の予約システムと CLINIC FOR YOU のそれぞれで、同じ GraphQL のクエリを使うようになっており、一本化の最中です。

sai＋ダイアリー

こちらは近日リリース予定のプロダクトで、女性の生理管理そしてピル服薬管理を行う機能を提供しています。

TypeScript と Next.js を利用した SPA となっており、 Apollo Client で GraphQL の API を呼んでいます。基本的にはシンプルな SPA 構成ですが、パフォーマンス向上のために要所要所で SSG にて静的なページを生成し、シークレット情報を隠蔽したい API 実行の際には Next.js の API Routes を利用したサーバーサイドでの API を呼び出しています。

当初はネイティブアプリかWebアプリのどちらで構築するかという議論もありましたが、以下の理由により LIFF(LINE Front-end Framework) アプリという選択肢を取りました。

• LINE ユーザーであればダウンロード不要ですぐに利用できること
• LINE の認証情報を使ってシームレスにアプリにログインができるため、 UX が向上すること
• 日常的に利用する LINE を用いてユーザーとの密なコミュニケーションを実現できること

※ LIFF の説明や認証に関しては以下の記事をご覧ください。

3 点目に記載したユーザーとの密なコミュニケーションについては、 LINE Messaging API を利用して以下のようなことを実現しています。

• メッセージ送信
• ユーザーのLINEでのアクションを受け取り、それに対する返答やバックエンドAPIアクセス
• リッチメニューの切り替え

この LINE Messaging API を使った仕組みは TypeScript と Serverless Framework を利用したサーバーレスアプリケーションとなっており、 AWS Lambda 上で動いています。特定プロダクトの業務領域に関連がなくどこからでも呼び出せること、一つ一つの処理が非常に軽量であること、デプロイタイミングを API サーバーとは切り離したかったこと等の理由から、 Lambda を使ったサーバーレスアプリケーションを採用しました。アーキテクチャは以下の通りで、 LINE の Webhook に対して 1 秒以内にレスポンスを返さないといけないため、 API Gateway と Lambda の間に Amazon SQS を噛ませているのがポイントとなっています。

詳細な仕組みや工夫した点等はまた別途ブログで解説する予定です。

おわりに

このように整理してみると、今年は React や GraphQL など、採用した技術を使いこなすこと・ナレッジを貯めることが焦点だったように思います。来年もいろいろなチャレンジが控えているので、おそらくこれらの技術を駆使してガシガシ開発していくこととなると思います。

お読みいただきありがとうございました。