「あと何時間で薬が飲めるか」だけを確認できるタイマーをつくりました。
MedTimerという、おくすりタイマーです。
飲んだ時間を記録すると、次に飲める時間までをカウントダウンしてくれます。
無料で、登録もいりません。
服薬管理アプリはたくさんありますが、このアプリは「次に飲める時間」の確認だけに絞ってあります。
つくったきっかけは、飲む時間を守ってほしかったからです
痛み止めのように、「何時間おきに飲む」と決まっている薬があります。
この間隔を守れないと、体に別の影響が出ることもあります。
私の家族にも、飲む時間を忘れてしまう人がいました。
大切なことなので、次に飲める時間をカウントしてくれるものをつくりたいと思いました。
それが最初のきっかけです。
どんなことができるのか
やることはひとつだけです。
薬を飲んだら、飲んだ時間を記録する。
あとは次に飲める時間まで、画面がカウントダウンしてくれます。
風邪薬や頭痛薬のような「時間を空けたい薬」に向いています
毎日決まった時間に飲む薬というより、頓服のように間隔を空けて飲む薬を想定してつくりました。
そういう薬ほど、前に飲んだのが何時だったか曖昧になりやすいです。
薬の名前は予測変換から選べます
薬の名前を毎回入力するのは面倒なので、入力の途中で候補から選べるようにしました。
あわせて、添付文書を検索できるリンクも置いています。
記録しながらその場で調べられるようにしたかったからです。
履歴が残ります
いつ何を飲んだかが履歴として残るようにしました。
ブラウザに保存する方法に加えて、Googleアカウントでログインすれば履歴を引き継げるようにしています。
元看護師の視点で、必要な項目を絞りました
病院では高齢の患者さんが多く、同じような場面での需要があると感じていました。
現場で見てきた感覚をもとに、本当に必要な項目だけに絞ることを意識しました。
入力する項目が増えるほど、続けて使ってもらえなくなると思ったからです。
それでも「使い方が分かりにくい」という声がありました。
そこで、最初の画面に操作手順を置くことにしました。
機能を減らせば分かりやすくなる、というわけではありませんでした。初めて開いた人が何をすればいいのか、画面の中で説明する必要がありました。
初めてログイン機能をつくりました
このアプリで新しく挑戦したのが、ログイン機能です。
履歴を残すアプリをつくったことがなかったので、初めての試みでした。
ブラウザに保存する方法だけだと、端末を変えたときに記録が消えてしまいます。
そこでFirebaseを使って、Googleアカウントでログインできる形にしました。
認証まわりは初めて触る部分ばかりで、どれも勉強になりました。
通知機能は、アプリ化できたときに
本当は、飲む時間になったら通知が届くようにしたいと思っていました。
ですがブラウザでの実現が難しく、ここはかなり苦労した部分です。
画面を開いている状態でないと通知が届かないため、タイマーとしての役割を果たしきれませんでした。
今の形では、自分で画面を開いて確認してもらう作りになっています。
通知は、今後アプリ化できたときに付ける予定です。
裏話とアプリ化の話の記事を書いたので、興味ある方はみてください！
裏話👇
アプリ化の話
使った技術と構成
開発にはClaude Codeを使いました。
フロントはReactとTypeScript、ビルドはVite、スタイルはTailwind CSSです。
ログインと履歴の保存にFirebaseを使い、薬の情報まわりでAPIを利用しています。
開発環境はDockerで用意し、コードの管理はGitHubで行いました。
写真を並べるだけのツールと違って、ログイン状態や履歴といった「状態」を持つアプリだったので、構成を決めるところから今までとは進め方が変わりました。
まとめ
MedTimerは、飲む時間を忘れてしまう家族を見ていたところから始まったアプリです。
服薬管理を全部やろうとするのではなく、次に飲める時間を数えることだけに絞りました。
元看護師として現場で見てきた感覚をもとに項目を減らしましたが、それだけでは足りず、最初の画面に使い方を置くことになりました。
ログイン機能も通知機能も、つくってみて初めて分かることばかりでした。
通知が付けられていない点は心残りなので、アプリ化のときにあらためて取り組みたいと思っています。