「あと何時間で薬が飲めるか」だけを確認できるタイマーをつくりました。
MedTimerという、おくすりタイマーです。
飲んだ時間を記録すると、次に飲める時間までをカウントダウンしてくれます。
無料で、登録もいりません。
服薬管理アプリはたくさんありますが、このアプリは「次に飲める時間」の確認だけに絞ってあります。
WebアプリとiOSアプリと両方作りました！
つくったきっかけは、飲む時間を守ってほしかったからです
私は時々痛み止めを内服することがあります。
痛み止めは、よく6〜8時間ごとに内服するように言われていたりするので、「あれ、前回何時に飲んだっけ・・・」という機会が多かったのです。
この間隔を守れないと、体に別の影響が出ることもあります。
私の家族にも、飲む時間を忘れてしまう人がいました。
それが最初のきっかけです。
わざわざスマホのアラームを使うのも大袈裟だし、何かいいのがないかなと思っていました。
薬の管理アプリは数多くありますが、
- 機能が多すぎる
- 登録が面倒
というものも少なくありません。
大切なことなので、次に飲める時間をカウントしてくれるものをつくりたいと思いました。
どんなことができるのか
薬を登録するとカウントが始まるのが主な機能です。
あとは次に飲める時間まで、画面がカウントダウンしてくれます。
風邪薬や頭痛薬のような「時間を空けたい薬」のカウントダウン
頓服のように間隔を空けて飲む薬を想定してつくりました。
そういう薬ほど、前に飲んだのが何時だったか曖昧になりやすいです。
カウントダウンがわかりやすく表示される仕組みになっているので、すぐに何分後に内服できるのか確認することができます。
毎日飲んでる薬のカウントダウン
毎日同じ薬を飲んでいる方のカウントダウンもできます。
忘れてはいけない薬を教えてくれるようになっています。
何種類もの薬を登録・飲んだらチェックすることができるので、なんの薬を飲めばいいのか確認することもできます。
薬の名前は予測変換から選べます
薬の名前を毎回入力するのは面倒なので、入力の途中で候補から選べるようにしました。
あわせて、添付文書を検索できるリンクも置いています。
記録しながらその場で調べられるようにしたかったからです。
履歴が残ります
いつ何を飲んだかが履歴として残るようにしました。
ブラウザに保存する方法に加えて、Googleアカウントでログインすれば履歴を引き継げるようにしています。
iOSアプリやAndroidアプリでは、端末だけに保存されるような仕組みにしています。
また、履歴はPDFで出力できるようにしているので、診察時の簡易メモとして使うことができます。
内服時間・内容・メモなどをまとめて紙に印刷することができます。
診療記録ではないので、あくまでもメモ代わりとして使ってください。
家族共有機能
親が薬の管理ができず子供が管理している場合や、子供が管理できず親が管理しているケースは少なくないと思います。
自分の薬だけでなく家族の薬もチェックできる機能を搭載しました。
家族を登録後、自分のカウントダウン画面下で一緒に確認することができます。
メモ機能
メモ機能を搭載。
内服時に気になったこと、内服以外で気になったことを入れれます。
そうすることでこのアプリで内服のメモ帳代わりとして使うことができます。
元看護師の視点で、必要な項目を絞りました
病院では高齢の患者さんが多く、同じような場面での需要があると感じていました。
現場で見てきた感覚をもとに、本当に必要な項目だけに絞ることを意識しました。
入力する項目が増えるほど、続けて使ってもらえなくなると思ったからです。
それでも「使い方が分かりにくい」という声がありました。
そこで、最初の画面に操作手順を置くことにしました。
機能を減らせば分かりやすくなる、というわけではありませんでした。初めて開いた人が何をすればいいのか、画面の中で説明する必要がありました。
初めてログイン機能をつくりました（Webのみ）
このアプリで新しく挑戦したのが、ログイン機能です。
履歴を残すアプリをつくったことがなかったので、初めての試みでした。
ブラウザに保存する方法だけだと、端末を変えたときに記録が消えてしまいます。
そこでFirebaseを使って、Googleアカウントでログインできる形にしました。
認証まわりは初めて触る部分ばかりで、どれも勉強になりました。
Firebaseについては別のサイトで記事にしているのでご参照ください。
他にもデータバックアップ機能で安心
大切な情報を入れていく形になります。
内服は今後の人生にも左右する大切なことです。
消えてしまうことが怖いので、バックアップ機能を搭載し、機種変更などにも安心して記録が残せるようにしました。
Webアプリ通知機能の問題
Webの場合通知機能に限界が
本当は、飲む時間になったら通知が届くようにしたいと思っていました。
ですがブラウザでの実現が難しく、ここはかなり苦労した部分です。
ブラウザ通知は環境や設定に左右される部分があり、ページを閉じていたり、ブラウザの動作状況によっては期待どおりに利用できないケースがあります。
「通知が来ること」が一番重要なアプリなのに、それを確実に届けられない可能性がある。
この点が大きな課題になりました。
中途半端な機能にしたくなかった
通知機能を無理に残すことも考えました。
しかし、
「通知が来ると思っていたのに来なかった」
という状況は、お薬タイマーとしては一番避けたいことです。
使う人に安心してもらえるアプリを目指したかったので、Webバージョンは通知機能を削除する判断をしました。
アプリ化することに決める
通知機能はお薬タイマーには欠かせない機能だと思い諦められませんでした。
私は初学者なので、スマートフォンアプリを作ったことがありません。
なので通知機能をつけたアプリを作るのに渋っていましたが、どうしても諦められなくて挑戦することにしました。
アプリ化すれば、通知の面でもより使いやすいサービスに近づけるはずだと思ったからです！
実際アプリ化させることができました！
Apple Storeでインストールできます！
アプリ化の話は別記事にしているので、気になる方はご参照ください！
使った技術と構成
開発にはClaude Codeを使いました。
フロントはReactとTypeScript、ビルドはVite、スタイルはTailwind CSSです。
ログインと履歴の保存にFirebaseを使い、薬の情報まわりでAPIを利用しています。
開発環境はDockerで用意し、コードの管理はGitHubで行いました。
写真を並べるだけのツールと違って、ログイン状態や履歴といった「状態」を持つアプリだったので、構成を決めるところから今までとは進め方が変わりました。
まとめ
MedTimerは、飲む時間を忘れてしまう家族を見ていたところから始まったアプリです。
服薬管理を全部やろうとするのではなく、次に飲める時間を数えることだけに絞りました。
元看護師として現場で見てきた感覚をもとに項目を減らしましたが、それだけでは足りず、最初の画面に使い方を置くことになりました。
ログイン機能も通知機能も、つくってみて初めて分かることばかりでした。
通知機能に関しては初めてiOSアプリに挑戦したので、その記録も見ていただけると嬉しいです。
この記事のカテゴリー
開発ブログ の記事をもっと見る →