現役薬剤師がちょっぴりおしゃれなシフト配布アプリをFlutter Webで無料公開した話
3秒まとめ
- 現役薬剤師がFlutter Webを使ってシフト配布用アプリを開発、無料公開しました🎉
- カンタンに作成できるシフト作成ツールが必要
- 印刷可能で、カンタンに作成できて、おしゃれなシフトをつくれる！
- ちょっとしたWebアプリを作成するのにFlutter Webはとっても便利😉
- ペライチを作るのはTailwind CSSがとても良いぞ。
薬剤師はシフトを配布しなきゃいけないんです
私の仕事は薬剤師です。病院いったあとに薬をもらいに行きますよね？あそこで白衣着て薬を渡してくれる人。薬局にいるあの人です。
薬剤師も薬ばっか見てないで、患者さんと関わることを大切にしろよ！ということで、2016年から 「かかりつけ薬剤師」 という制度が運用されています。この制度は、患者さんに薬剤師を指名してもらって、責任もって薬やサプリメント、健康の相談に乗りましょうって制度。
薬剤師なんて誰でもいいわ！って思うかもしれませんが、高齢で周りに家族がいない方や難しい疾患、ライフステージの変化があるときに 専任の薬剤師がいると、小さなことでも薬剤師に聞けるようになるのでとっても便利です。
僕の患者さんのなかにもたくさん感謝の言葉をくれる方がたくさんいます。 うれしい。
薬が処方されてなくても、気になることを聞きに来てくれる患者さんもめっちゃかわいい。
ところで、この制度を利用してくれる患者さんには、ちゃんとかかりつけ薬剤師に会うことができるようにシフト表を配布しなければならないと明記されています。
正直、若い女性の薬剤師があまりにも細かなシフト表を配布するのはリスクも高いです。逆に僕みたいに患者さんと関わっていくのに抵抗感の少ないタイプだったら、細かいシフトを配布しても大丈夫。
また、昨今の医薬品供給不足なんかもあって実は意外と薬局業務って忙しかったりします。そんな中、シフトをぽちぽちと手打ちで作るのはあまりにもムダが多すぎます。
要するに、シフトをカンタンに、イイ感じに、いろんな粒度で作れるツールが求められてる...（ハズ）
せっかくなのでツールで時間を節約して、患者さんをケアする時間が作れたら最高じゃないか。
ということで作ってみました！
iruyo - かかりつけ薬剤師のための配布シフトジェネレーター
つくりました！といっても、使い方は👆にもある通りとってもシンプル。
Weekly / Monthly のシフトタイプをえらべる
サクサク入力できる
イイ感じのシフトができる
イイ感じに入力が終わると、入力した通りにシフトが完成します。
A4 ・A5用紙に合うように作っているので、印刷 / 配布もカンタンです。
おいおい、Web上で配布じゃないのかよ。って思った方もいるかもしれませんが、かかりつけ制度を利用してくれる患者さんの多くは70代以上の高齢者がとっても多い。 物理スーパーデバイス・「紙」の方が扱いやすいんです。
ぼくの患者さんが利用するって考えたら、やっぱりWebでの案内よりも紙の方が安心。
それだけなんです。もしWebの方が使いやすいなんて要望があったら対応しようかなと思ってます。
Flutter Webは小さいサービスを作るのにとっても便利！でも弱点は補わないとね。
Flutter Webは相変わらずとにかく楽しく作れました🙌
UIも思った通りに組めるし、アニメーションも結構カンタンに実装できる。
スマホアプリ開発で使ったFlutterのコードも流用できてとっても効率的。
以前、推し色メーカー というサービスを公開したときよりも、FlutterのUpdateによりHotReloadの速度やDevToolsの使い勝手が上がり、とても楽しく、そして早く開発することができました。
状態管理はriverpodを使ってます。
今回は小さいサービスになることが確定していたので、画面遷移（Widget遷移？）もriverpodで行っています。NamedRouteとかも使っていない超シンプル仕様。riverpodで細かく状態を保持/変更していくのとっても気持ちいいです。
最近 @toshi_kuji さんがriverpodのドキュメントを日本語化 してくれているので、まだ触ったことがない人もかなりとっつきやすくなってますよ！オススメ！
アプリ部分にかかった時間は、仕事終わりの2日程度。
まぁ本職じゃないってことで褒めてあげます。
とにかくFlutter大好きっこの僕としては、最初から最後までFlutterで作りたかったんですよ。
実際、Flutterの開発体験はすごーく良かった。楽しいんです。
でも、とくにFlutter “Web”には大きな弱点があるんですよ。。。
それは、とにかく初期ロードが長いってこと。
大きな弱点です。トップページにLoading Animationを付けたりしてみましたが、リンク踏んで一発目に5秒とか待つのはいくら何でも長すぎ。ってユーザーさんは思うんじゃないかな。
だから、Iruyoの紹介の意味も込めてトップページだけはHTML + Tailwind CSSで自作しました。
Tailwind CSSって、Flutter書く感覚と似てません？なんか同じイメージで書けるのでとても書きやすかったです。
これだったら最初に訪れてくれたユーザーさんも納得してもらえるかな。
アプリを開くときには同じ時間がかかるんですが、トップページはミリ秒で開くようになりました。はじめてアクセスするサイトのトップページは早く開いてほしいですよね！
なんかNext.jsでSGしたら早いんだとか、SEOすごいんだとかいろいろありますけど、こういう小さいサービスだったら、別にHTML書きなぐった方が早いよね。
えっ？最初から最後までNext.jsで書けばいいじゃんって？？いや、Flutter楽しいからいいじゃん、許して。。。
ホスティングはCloudflare Pagesを使いました。BandWidth制限がないってのは神。
よくある100GB/月制限って、意外とすぐ越えちゃうんですよね。
catnoseさんのスクラップに詳しくまとまってるので、比較したい方はぜひそちらを参照のこと！
おわりに
以上、現役薬剤師による、薬剤師のためのシフト配布アプリ紹介でした！
薬剤師の仕事のなかでも、かかりつけの患者さんに対していいケアができた時って、とっても嬉しい瞬間なんです。そんな瞬間を増やすためには、まず会えるようにしなきゃ。 そんな思いでアプリを作ってみました。
別に難しい技術も、難しいコードも、難しいアルゴリズムも使っていない、シンプルなアプリです。Zennをご覧になってるFlutterユーザーなら簡単に作れるものだと思います。
でもそんな簡単なものだからこそ、わざわざ企業が作ったりすることは無いでしょうし、僕が作るのもアリなんじゃないかな？と思って作ってみました。
Zennに生息しているレアな薬剤師さん、ぜひ使ってみてください！(笑)
そして、よかったら感想などもお聞かせくださいな！
おまけ
ぼくは薬局チェーンで薬剤師として働いています。
普段はChart.jsなどの可視化ライブラリやMetabaseなどのBIツールやデータベースを活用しながら、勤怠や売上管理の可視化ダッシュボードを作成しています。ほかにもFlutter / Firebaseで業績管理アプリを作成したり。
薬局/医療関係の可視化や管理ツールの作成など、協力できることがあれば手伝いますのでご連絡くださいな🙌
ただの友達もめっちゃ募集してます🙇♂️
Discussion
Riverpod 日本語ドキュメントのご紹介ありがとうございます！😻
Flutterを専門職の領域で活かしたいと考えている私としてはものすごーく参考になります。
はがくんさんすげぇ。。
コメントありがとうございます～🙌
影ながらローカライズでめっちゃ活躍してるT.Kujiさんをめっちゃ応援してます😉英語ドキュメントも頑張って読みますけど、やっぱ自分よりちゃんとニュアンスまでとれる方の翻訳みると安心します！
僕は大したことないですけど、Flutterが専門職のならではの不効率をカイゼンするためにめっちゃいいツールになり得ると思います・・・！！
いっしょにがんばっていきましょー！👍
👏✨