エムスリーテックブログ

エムスリー(m3)のエンジニア・開発メンバーによる技術ブログです

デジカルiOSアプリの歴史

こちらはエムスリー Advent Calendar 2023の14日目の記事です。

こんにちは、デジスマチームの堀田です。普段はデジスマチーム*1でWebフロントとバックエンドの開発を行なっていますが、 サブタスクとしてデジカル*2のiOSアプリの改善も行なっています。

改善には軽微なバグ修正も含まれていましたが、新機能の追加や大幅な変更が行われることもありました。その結果、初期のバージョンからは大きく変貌を遂げています。

良いタイミングなので、このプロジェクトの歴史をまとめようと思いました。

初めまして、手書きアプリ

デジカルでは、Apple Pencilを使ってカルテを書けるiPad向けのアプリ、通称「手書きアプリ」を提供しています。これは紙カルテから電子カルテに切り替えた後も、カルテを手で書きたいユーザー向けのアプリです。

アプリ開発当初、手でカルテを書く以外にも色々な機能をiPadアプリで扱えるようにする案もあったそうです。しかし、現在ではあくまで「本体のWebアプリと併用して使うもの」という位置付けになっています。

リリース時点ではデジカルチームとは別のマルチデバイスチームが開発に関わってくれていたようです。それ以降の改善はデジカルチームが引き受けるという流れになっていました。

手書きアプリがリリースされて数年後に私がエムスリーに入社しました。

認証機能周りの強化

デジカルはカルテ情報を扱うというサービスの性質上、セキュリティ対策は重要でした。そのため、ログイン時にはID・パスワードと合わせてクライアント証明書が必要な仕様となっています。これはリリース当初から現在まで変わっていません。

改善したのはクライアント証明書を取り込むまでのフローです。クライアント証明書を取り込むタイミングは

  1. デジカル導入時
  2. クライアント証明書の期限切れのタイミングで行う更新時

の2つです。頻度自体は少ないものの、取り込みは重たい作業でした。

これは本体のWebアプリ上のクライアント証明書発行画面です。改善前はこの画面にQRコードは無く、クライアント証明書のダウンロードURLとパスワードが文字列で表示されているだけでした。

ユーザーはこれらの文字列をなんとかして手書きアプリに入力して証明書をインストールしていました。このような状況だったので、発行画面にQRコードを表示し、アプリからはカメラで取り込むように改善しました。

アプリの証明書取り込み画面は、上の画像のように、カメラプレビューの上に証明書発行画面の簡易イラストを透過して重ねるデザインにしました。このデザインによって、イラストと発行画面を重ねている間にサクッと証明書が取り込まれるという体験を作れました。

クライアント証明書取り込み周りの改善とは別に、FaceId/TouchIdでのログインサポートも対応しています。

Main.storyboardからカルテ画面の切り出し

手書きアプリは本体のWebアプリと併用して使う立ち位置のため、最低限の機能だけが実装されています。例えば、ある日付の予約・受付の一覧やカルテ編集画面などです。 そのためアプリ全体で見ると画面数はかなり少ないですが、その全てがMain.storyboardに定義されていました。

今後の開発のため、メイン機能であるカルテ編集画面だけでもと思い、別の定義ファイル (.xib) に切り出しました。

PencilKitの検討

カルテ編集画面を切り出す過程で、カルテ編集時に実際に線などを描くキャンバスにPencilKitの採用を検討しました。 個人的に、PencilKitで何かを描く体験は最高だと思っています。これを手書きアプリに使えたらユーザー体験も格段に良くなるだろうと考えていました。最終的には採用を見送ったのですが、それには以下のような理由がありました。

カルテを書く際の大きな特徴として、体の部位を絵図で表現したシェーマを使うというものがあります。

このようにイラストの画像データをキャンバス上に貼り付け、その上に症状などを書き込むというやり方です。 シェーマはカルテ編集では必須の機能ですが、PencilKitでは「画像データをキャンバス上に貼る」ことができませんでした。 そのため、現在でもカルテのキャンバスは自作したものを使っています。

iPhoneアプリ 〜カルテビューワー〜 のリリース

手書きアプリの改善が落ち着くと、訪問診療や休暇中の連絡によって外出先でも簡単にカルテを確認できるアプリの案が上がりました。 iPadも持ち運びは容易なので手書きアプリでそれを実現できそうではありますが、より簡単に見られるようにiPhone向けのカルテ閲覧専用アプリを作ることになりました。通称、カルテビューワーです。

カルテビューワーの開発からリリースは2~3週間程度でした。セキュリティ周りは妥協ができない部分でしたが、手書きアプリで使っているロジックをそのまま使えたので大きな工数削減に繋がりました。 デザインに関しても、本体のWebアプリをベースに最低限のデザインを私が行なったので、こちらも工数削減に繋がっています。

初期のカルテビューワー

当時のUIがこちらです。

カルテビューワーのデザインリニューアル

その後、一定のユーザー層には需要があることが分かり、デザインリニューアルを段階的に行いました。 それと同時に見られるデータの種類も増やし、一気にビューワーとしての機能が補充され、シンプルで洗練されたデザインになりました*3。

デザインリニューアル後のカルテビューワー

上図が示す通り、現時点でカルテタブは8個あります。元々、各データのページをスワイプで切り替えるなど他のデザインを検討していました。しかし、見たいデータのページまで移動するのに2~3回のスワイプを要するより、ワンタップで移動できる方が医師にとって便利では？という考えでアプリのデザインではあまり見ないですが8個のタブをフッターに置くことにしました。

懸念は誤タップで別画面が開いてしまうことですが、実装後にチームメンバーで触ってみたところほとんど誤タップすることはなかったのでこの案で進めることにしました。

カルテビューワー in 手書きアプリ機能 〜miniPhone機能 〜

カルテビューワーのリニューアルが段階的に進んだ後、再度手書きアプリの改善案が上がりました。それは、「カルテビューワーの画面を手書きアプリで見られたら便利では？」という案でした。通称、miniPhone機能です。

確かにカルテを書くときに患者様の診療履歴やデータが見られると便利そうです。本体のWebアプリで確認もできますが、iPad上で完結することに越したことはなさそうです。

miniPhone機能

このように仮想的にカルテビューワーを手書きアプリ上に埋め込んだような機能が仕上がりました。カルテの編集の邪魔にならないように、表示・非表示の切り替え、ドラッグでの移動をサポートしています。

Git Repositoryのマージ

miniPhone機能開発の前は、手書きアプリとカルテビューワーは別々のRepositoryで管理されていました。 この機能はつまるところ、手書きアプリRepositoryからカルテビューワーRepositoryの資産を使えるようにしたいというものです。

手書きアプリRepositoryにカルテビューワーRepositoryをsubmoduleで埋め込んだりしてできるかな？などを最初は考えましたが、最終的には2つのRepositoryをマージすることにしました。digikar-ios-apps Repositoryの爆誕です。

digikar-ios-appsでは、1つのworkspaceを作りました。そのworkspaceの中に、

  • 手書きアプリ.xcodeproj
  • カルテビューワー.xcodeproj
  • Frameworks Package
  • Pods (手書きアプリだけが使用)

が含まれています。

FrameworksはSwift Package Managerで管理するモジュール群で、この中で機能モジュールごとの細分化を行なっています。以下に、その定義の一部を載せています。

Frameworks Packageの一部

  • AppFeature : 手書きアプリで使う機能への依存をまとめたモジュール
  • PhoneAppFeature: カルテビューワーで使う機能への依存をまとめたモジュール
  • MiniKarteFeature: 手書きアプリだけで使う、miniPhone機能のモジュール
  • KarteFeature: カルテ機能のコアとなるモジュール

MiniKarteFeatureへの依存を持っているのはAppFeatureだけです。よって、手書きアプリ側のコードでこれをimportできますが、 カルテビューワー側でimportするとエラーになります。手書きアプリ専用の機能なので、こういう構成が取れるのはありがたいです。

まとめ

サブタスクとしてデジカルのアプリ改善を行なってきましたが、振り返ってみるとストーリーが生まれていました。 そのストーリーを一度まとめておこうと思い、このブログを書きました。きっかけをくれたPdM、磨きをくれたデザイナー、チームメンバーにはとても感謝しています。

技術的な負債があったりと、まだまだ良くできることはあるので、これからも取り組んでいきます。

おまけ: 直近で書いた記事

We are hiring!!

エムスリーでは絶賛エンジニアを募集中です！ 今回紹介した技術スタック・アーキテクチャ以外にも様々な構成のプロダクトがありますので、ご興味ある方は是非こちらからお願いします！

jobs.m3.com

*1:デジスマ診療 https://digikar-smart.jp/

*2:https://digikar.co.jp/

*3:新しくチームにジョインした、とても頼りになるデザイナーがやってくれました。手書きアプリのクライアント証明書取り込み画面をデザインしてくれたのも同じデザイナーです。