欲しいアプリは自分で作る!

Power Platform や Azure などを利用して作成した業務アプリや趣味アプリなどをご紹介します。

Power Apps で病院の予約 URL と診察券番号を記録するアプリを作る

布団の中でぬくぬくしながら予約したい。



どうも、じゅんじゅんです。


突然ですが、病院の待ち時間って、なんか勿体ないですよね。
ずっとスマホいじっていると首も痛くなるし…

昨今では、先着順や時間指定で当日予約ができる病院も増えてきて、待ち時間が大幅に減ったような気がします。
そのためにはもちろん予約をする必要があるわけですが、この作業がなかなかしんどいな思っていました。

なぜなら、予約する時って、

  1. 行きたい病院の予約ページをググって探す(そんなに高頻度でもないのでブックマークもしてない)
  2. 診察券を財布やカバンから探して診察券番号を入力する
  3. 予約する

という作業を、当日の "起床時" に、かつ "素早く" 行う必要があるからです。
(手早く予約しないと早い時間が埋まってしまうんですよね…)

寝ぼけてうまくググれないし、寝起きでカバン漁るのとか特に冬場は勘弁。
せめて布団の中でぬくぬくしながら予約したい。

完成イメージ

ということで、こんなアプリを作ってみました。


予約したい病院を選択すると、予約URLと診察券番号が表示されます。
同じ病院に家族も通院する場合があるので、診察券番号は家族の分も登録できるようにしています。

また、通院後に薬局でもらうお薬手帳のシールを、撮影して保存できる機能もつけてみました。
私は超ズボラなので、お薬手帳っていつも持っていくのを忘れるんですよね…さらに、お薬手帳に貼るシールを貰っても結局貼らずに捨ててしまう。写真を保存する機能があれば、せめてシールを撮影くらいはするようになるのではという安易な考えで機能をつけてみました。笑

データ

アプリ作成にあたり、最初に必要なデータやテーブルについて考えてみます。

病院のテーブル

IDの他、病院名と予約サイトのURLの列があればよさそう。

病院ID 病院名 予約URL
1 ●●耳鼻科 xxx.com/reserve/
2 ▲▲小児科 yyy.com/yoyaku/


家族のテーブル

家族はそうそう増減することはないと思いますので、テーブルを持たずにアプリ側で固定の選択肢を持ってもOKです。
今回は、後に妹夫婦も使いたいとなった時に「父」を「じゅんじゅん」に書き換えても面倒にならないよう、家族のテーブルを持つことにします。
IDの他は、とりあえず名前の1列だけあればよさそう。誕生日も登録したい方はどうぞ。

家族ID 家族名
1
2
3 息子
4


診察券番号のテーブル

診察券番号は、同じ病院に家族みんな通院するケースもあるので、1つの病院に複数の診察券番号を登録する必要があります。
「どの病院」の「誰」の診察券番号かを格納するので、病院名、家族名、診察券番号が必要です。
病院名と家族名は上記のテーブルを参照したいので、ここでは各々のIDを持つことにします。

診察券ID 病院ID 家族ID 診察券番号
1 1 1 1111
2 1 2 2222
3 2 4 9999


お薬手帳用のテーブル

写真を保存するついでに、いつ誰がどの病院に通院したかを記録しておきましょう。
通院日、病院名、家族名、そして写真の保存が必要ですね。

お薬ID 通院日 病院ID 家族ID 写真
1 2020/04/01 1 2 *ファイル添付
2 2020/05/09 1 2 *ファイル添付
3 2020/08/03 2 4 *ファイル添付



1つの病院や1人の家族に対して、複数の診察券番号や複数のお薬手帳シールが存在しますので、これらのテーブルは以下の関係となります。

f:id:jn-kodama:20200804010830p:plain

利用するデータソース

今回は勉強がてら、CDS (Common Data Services) を利用してみたいと思います。
(勉強と言いつつ、今回は大した機能も使わないのですが。。)
なお、CDSは先日Dataflex Proに名称変更すると発表されましたが、表示上はまだCDSなので今回の記事はCDSと表記します。

ということで、早速上記のテーブル=エンティティを登録していきます。

病院のエンティティ

エンティティ:clinicを作成し、以下のフィールド(列)を追加しました。

  • 病院名:ClinicName
  • 予約URL:BookingURL

病院名は、エンティティ生成時に定義するプライマリ名フィールド(SharePointリストでいうタイトル列だと思っている)を利用しています。
病院IDについては、今回はアプリを作る上で意識する必要はありませんが、実態はエンティティ作成時に自動生成される、エンティティ名と同名のフィールド「clinic」がいわゆるIDに該当します。

f:id:jn-kodama:20200806215440p:plain


家族のエンティティ

エンティティ:familyを作成し、以下のフィールド(列)を追加しました。

  • 家族名:ClinicName

家族名は、エンティティ生成時に定義するプライマリ名フィールドを利用しています。
家族IDについては先ほどと同様です。

f:id:jn-kodama:20200806215912p:plain


診察券番号のエンティティ

エンティティ:patient registration cardを作成し、以下のフィールド(列)を追加しました。

  • 病院ID:ClinicId
  • 家族ID:FamilyId
  • 診察券番号:CardNumber

病院IDと家族IDは、データ型を"参照"にし、関連テーブルをそれぞれ病院エンティティ(clinic)、家族エンティティ(family)に指定しています。
こうすることで、病院エンティティと本エンティティ、家族エンティティと本エンティティがそれぞれ1対多のリレーションシップの関係となり、本エンティティの家族IDから家族名を参照したり、本エンティティの病院IDから病院名を参照したりすることができます。

なお、本エンティティではテキスト情報を扱わないため、プライマリ列フィールド(Name)は使いません。
診察券番号IDについては先ほどと同様です。

f:id:jn-kodama:20200806220532p:plain


お薬手帳用のエンティティ

エンティティ:medicine notebookを作成し、以下のフィールド(列)を追加しました。

  • 通院日:VisitDate
  • 病院ID:ClinicId
  • 家族ID:FamilyId
  • 写真:Notebook

病院IDと家族IDは先ほどと同様、データ型を"参照"にし、関連テーブルをそれぞれ病院エンティティ(clinic)、家族エンティティ(family)に指定することで、関連エンティティとのリレーションシップを構築しています。

通院日と写真のデータ型は、それぞれ"日付のみ"、"ファイル"にしています。
本エンティティではテキスト情報を扱わないため、プライマリ列フィールド(Name)は使いません。
お薬IDについては先ほどと同様です。

f:id:jn-kodama:20200806221445p:plain


アプリの構成

先ほど作成したエンティティを用いて、以下のようなアプリを作ってみたいと思います。
(デザインが死んでる。。)

病院のエンティティから自動生成したものをベースとし、そこに家族、診察券番号、お薬手帳の各エンティティのデータの読み書きができるようコントロールを追加していきます。

f:id:jn-kodama:20200807023347p:plain

アプリの作成

それでは早速作成に入ります。
手順は、上記のエンティティを順番に機能追加する形でご紹介します。

なお、本記事ではデザインのカスタマイズ部分は省略し、必要機能を満たすための最低限の手順のみご紹介します。ご了承ください。


病院のエンティティを扱えるようにする

まずは、"データの開始"からCommon Data Serviceを選択し、病院のエンティティ:clinicを選択してアプリを自動生成します。 f:id:jn-kodama:20200806221947p:plain

病院のエンティティの表示・編集は自動生成されたものをそのまま利用しますので、病院名と予約URLが表示・編集できるようDetailScreen1とEditScreen1を整えます。 f:id:jn-kodama:20200806235214p:plain f:id:jn-kodama:20200806235247p:plain

これで、病院のエンティティを扱う機能は完了です。


家族のエンティティを扱えるようにする

はじめに、家族のエンティティをデータから追加します。 f:id:jn-kodama:20200807000114p:plain

"新しい画面" から "フォーム" を追加します。 f:id:jn-kodama:20200807000340p:plain

スクリーン名は適当に "FamilyScreen1" としておきます。
Formコントロールのデータソースで "family" を選択します。 f:id:jn-kodama:20200807000615p:plain

Formコントロール内のカードを家族名のみにします。
続いてGalleryコントロール(縦)を追加して下部に配置し、データソースで "family" を選択します。
これで、登録されている家族を表示させることができます。 f:id:jn-kodama:20200807000935p:plain

Gallery内の ">" アイコンをゴミ箱アイコンに変更し、OnSelectプロパティに以下を記載します。
これで、クリックしたゴミ箱に対応する家族を消去することができます。

Remove(family, ThisItem)

f:id:jn-kodama:20200807001547p:plain

続いて本スクリーンからアプリのトップ画面(BrowseScreen1)に戻れるようにします。
画面左上の "×" のアイコンを "<" アイコンに変更し、"アクション" タブの "移動" で "BrowseScreen1" を選びます。 f:id:jn-kodama:20200807004344p:plain

最後に、アプリのトップ画面(BrowseScreen1)から本スクリーンに遷移できるようにします。
BrowseScreen1の上部に人々のアイコンを追加し、"アクション" タブの "移動" で先ほどのスクリーンを選びます。 f:id:jn-kodama:20200807002250p:plain

これで、家族のエンティティを扱う機能は完了…と思いきや、F5で再生してみると、なぜかFormに何も表示されません。
Formにはモード(New, Edit)があり、Formを表示させる際などにこのモードを指定してあげる必要があります。
今回は登録済みデータの編集機能は付けませんので、この画面を表示させるタイミング(スクリーンのOnVisible)と、Formを右上のチェックアイコンでSubmitした後(FormのOnSuccess)で、FormのモードをNewにするよう以下を追記します(Form名は適宜変更してください)。

NewForm(EditForm2)

f:id:jn-kodama:20200807004447p:plain f:id:jn-kodama:20200807004418p:plain

これで、家族のエンティティを扱う機能は完了です。


診察券番号のエンティティを扱えるようにする

はじめに、診察券番号のエンティティをデータから追加します。 f:id:jn-kodama:20200807005234p:plain

診察券番号は、病院のエンティティの詳細画面(DetailScreen1)内で扱うことにします。
まず、Formコントロールを追加して画面下部に配置し、データソースで "patient registration card" を選択します。 f:id:jn-kodama:20200807005332p:plain

フィールドの編集でカードを下図の3つにします。 f:id:jn-kodama:20200807005535p:plain

ClinicIdカードのロックを外し、Defaultプロパティに以下を記載します。
これで、今選択されている病院名が自動で入るようになります。
確認できたら、ClinicIdカードはユーザー操作不要なので、非表示にしておきましょう。

BrowseGallery1.Selected

f:id:jn-kodama:20200807005824p:plain

続いて、FormをSubmitするためにボタンを追加し、OnSelectプロパティに以下を記載します(Form名は適宜変更してください)。

SubmitForm(Form2)

f:id:jn-kodama:20200807010120p:plain

続いて、Formのモード設定処理を追加します。
こちらも登録済みデータの編集機能は付けませんので、この画面を表示させるタイミング(スクリーンのOnVisible)と、Formを先ほど追加したボタンでSubmitした後(FormのOnSuccess)で、FormのモードをNewにするよう以下を追記します(Form名は適宜変更してください)。

NewForm(Form2)

f:id:jn-kodama:20200807010546p:plain f:id:jn-kodama:20200807010452p:plain

次に、診察券番号を表示するためのGalleryコントロール(縦方向(空))を追加して画面中央に配置し、データソースで "patient registration card" を選択します。 f:id:jn-kodama:20200807010925p:plain

Gallery内にラベルを2つ追加し、家族名と診察券番号を表示させます。
家族名は、診察券番号エンティティの家族IDから以下のように記述することで参照することができます。

ThisItem.FamilyId.FamilyName

f:id:jn-kodama:20200807011610p:plain

続いて、Gallery内にゴミ箱アイコンを追加し、OnSelectプロパティに以下を記載します。

Remove('patient registration card', ThisItem)

f:id:jn-kodama:20200807011803p:plain

最後に、Galleryに表示するアイテムを、アプリのトップ画面(BrowseScreen1)のBrowseGallery1で選択された病院に限定させます。
GalleryのItemsプロパティを以下に書き換えます。
ここでも、診察券番号エンティティの病院IDから病院名を参照していますね。

Filter('patient registration card', ClinicId.ClinicName=BrowseGallery1.Selected.ClinicName)

f:id:jn-kodama:20200807012346p:plain

これで、診察券番号のエンティティを扱う機能は完了です。


お薬手帳のエンティティを扱えるようにする

はじめに、 お薬手帳のエンティティをデータから追加します。 f:id:jn-kodama:20200807012627p:plain

"新しい画面" から "フォーム" を追加します。 f:id:jn-kodama:20200807000340p:plain

スクリーン名は適当に "NotebookScreen1" としておきます。
Formコントロールのデータソースで "medicine notebook" を選択します。 f:id:jn-kodama:20200807012821p:plain

フィールドの編集でカードを下図の4つにします。 f:id:jn-kodama:20200807013032p:plain

ClinicIdカードのロックを外し、Defaultプロパティに以下を記載します。
これで、今選択されている病院名が自動で入るようになります。
確認できたら、ClinicIdカードはユーザー操作不要なので、非表示にしておきましょう。

BrowseGallery1.Selected

f:id:jn-kodama:20200807013350p:plain

続いてGalleryコントロール(縦)を追加して下部に配置し、データソースで "medicine notebook" を選択します。
これで、登録されているお薬手帳の情報を表示させることができます。
画像のImageプロパティと、家族名のTextプロパティは各々以下のように記述します。

ThisItem.Notebook.Value
ThisItem.FamilyId.FamilyName

f:id:jn-kodama:20200807014016p:plain f:id:jn-kodama:20200807014038p:plain

Gallery内の ">" アイコンをゴミ箱アイコンに変更し、OnSelectプロパティに以下を記載します。
これで、クリックしたゴミ箱に対応するお薬手帳を消去することができます。

Remove('medicine notebook', ThisItem)

f:id:jn-kodama:20200807014139p:plain

続いて本スクリーンからアプリのトップ画面(BrowseScreen1)に戻れるようにします。
画面左上の "×" のアイコンを "<" アイコンに変更し、"アクション" タブの "移動" で "BrowseScreen1" を選びます。 f:id:jn-kodama:20200807014232p:plain

続いて、アプリのトップ画面(BrowseScreen1)から本スクリーンに遷移できるようにします。
BrowseScreen1のBrowseGallery1内の ">" アイコンを削除し、代わりにボタンを2つ追加し、それぞれ "予約" と "お薬" と表示させます。
そのうち "お薬" の方を選択し、"アクション" タブの "移動" で先ほどのスクリーンを選びます。 f:id:jn-kodama:20200807014630p:plain


続いて、先ほど追加したお薬手帳のFormのモードを設定します。
こちらも登録済みデータの編集機能は付けませんので、この画面を表示させるタイミング(スクリーンのOnVisible)と、Formを右上のチェックアイコンでSubmitした後(FormのOnSuccess)で、FormのモードをNewにするよう以下を追記します(Form名は適宜変更してください)。

NewForm(EditForm3)

f:id:jn-kodama:20200807014930p:plain f:id:jn-kodama:20200807015005p:plain

最後に、Galleryに表示するアイテムを、アプリのトップ画面(BrowseScreen1)のBrowseGallery1で選択された病院に限定させます。
GalleryのItemsプロパティを以下に書き換えます。
ここでも、お薬手帳エンティティの病院IDから病院名を参照していますね。

Filter('medicine notebook', ClinicId.ClinicName=BrowseGallery1.Selected.ClinicName)

f:id:jn-kodama:20200807015320p:plain


これで、お薬手帳のエンティティを扱う機能、およびすべての機能の実装が完了しました。
デザインはお好みのものに適宜修正してください。

完成!

こんな感じで動きます。


おわりに

本来のお薬手帳の利用を阻害しそうで何だか申し訳ない気もしますが(笑)、自分が便利だなと思うツールを使うことが一番だと信じて、しばらく使ってみようと思います。


今回は利用するテーブルが多かったこともあり、皆さまの業務にお役に立てる気付きがあればいいなと思い、記事にしてみました。

欲しいアプリは欲しい人が作る時代へ。
何かヒントになれば幸いです。


参考文献

今回は以下の4つの記事にお世話になりました。ありがとうございました。

www.youtube.com

qiita.com

qiita.com

www.d3654.be