勤務日自動調整アプリ「シルバーカレンダー」をリリースしました
始めに
自動で勤務予定を入れられる自作サービス「シルバーカレンダー」をリリースしました。
この記事では、「シルバーカレンダー」の紹介と制作の過程について書いていきます。
アプリ概要
シルバーカレンダーというサービスは、 嘱託職員などの年間日数で労働契約している方が 自分で勤務予定を調整する手間を軽減するための 勤務日自動調整サービスです。 条件を入れて自動で勤務予定の配置ができます。
使い方
勤務予定のための条件を入れます。今の所、期間と勤務日数、曜日ごとの予定を入れるようになっています。
条件を作成し、横にある適用ボタンを押すと自動で予定が入ります。
「連携」からGoogleカレンダーに反映できます。
どうしてこのアプリを作ろうと思ったのか？
自作サービスを作るにあたり自分でアイデアをいくつか考えたのですが、調べてみると既にそういったアプリは存在しておりネタ切れに悩んでいました。
そこで周りの人にもアプリのアイデアがないか聞いて周ったところ、父から勤務予定の調整アプリがあると便利だという話を聞きました。
父は退職後嘱託職員として働いており、年間労働日数で契約して働いています。
もう少し詳しくいうと「年間○日出勤」ということは決まっていますが、どの日に出勤するかは自分の裁量で決めるため、自分で出勤日数を数えながら勤務予定を入れていかなければいけません。
これは結構手間がかかります。
その手間を軽減するようなアプリを作ったらどうかと考えました。
一般的な労働形態では労働者の勤務予定は会社のマネージメント担当者が決めるため、自分で勤務予定を入れるというのは一般的とは言えません。
他にそういうアプリがあるか調べてみましたが、多くのシフト管理やスケジューラーアプリは一般的な労働形態を前提にしているため、条件を入力して自動で個人の勤務予定を調整するようにはなっていなそうです。
業務で使えるようなアプリを作りたかったのもあり、それで勤務調整のアプリを作ることに決めました。
技術スタック
Ruby(3.2.2)
RubyOnRails(7.0.4)
Vue.js(3.2.36)
Vite(3.2.0)
Devise(4.8.1)
Bootstrap5
GithubActions
Fly.io
技術選定の理由
まず、アプリで入力した条件や勤務予定を保存したいのでバックエンドは必要になり、バックエンドとしてはFjordBootCamp（以下FBC）で勉強してきたRailsを使うということを決めました。
次に、カレンダーを使うアプリということで月や年を切り替えたり予定を入れたりを画面遷移を挟まずスムーズに行いたいので、フロントエンドでVue.jsかReactを使うことにしました。Stimulusにも興味があったのですが、状態管理なども考慮するとVueやReactの方が適切だろうと考えました。
この２つのうちどちらを使うか本当に悩んだのですが、Vueの方を使うことに決めました。
当時FBCのプラクティス（カリキュラムのようなもの）ではVueを学習することになっており、私もVueを学習してチーム開発でも使ったのですが、自分の中でまだきちんと使いこなせている感覚がなかったため、色々なものを中途半端にやるよりも学習したものを深めていきたいと思いVueを使うことにしました。
ビルドツールにはViteを使いました。高速なビルドツールということでESbuildが出て興味を持っていたのですがVueではサポートされていないため、同じESbuild系でVueでもサポートされているViteを使うことにしました。
あとはログイン機能にDeviseを使いました。Googleカレンダーと連携するならGoogleOAuthログインだけでいいんじゃないか？という疑問があると思いますが、このアプリはGoogleカレンダー専用ではなくOutlookなど他のサービスとも連携したいと思ったので、Deviseでのパスワードログインを基本にしました。Googleカレンダーと連携するにはGoogleOAuthログインをする必要がありますが、パスワードログインしているアカウントでもアプリ内からGoogleOAuthで認証できるようにしています。 ※今の時点では連携できるのはGoogleカレンダーのみです。
苦労した点
自動調整機能の実現
入力した条件を基にカレンダーに勤務予定を自動で入れられるようにしたのですが、これが苦労しました。 複数の条件を両立させるのが特に難しく、ノートに分岐の処理の図を書きながら何度もコードを書き換えて試行錯誤をしました。 多少複雑なロジックになってしまいましたが、思ったような動きを実現することができました。
Googleカレンダーとの連携
外部APIをアプリに組み込むのがはじめての事で、技術検証の段階から非常に苦労しました。
OAuth認証のことも最初はさっぱり仕組みがわからず、技術検証はGoogleCalendarAPIに関することだけで2ヶ月以上かかりました。
FBCの先輩にGoogleカレンダーのAPIを使っていた方がいたため、教えてもらったりコードを参考にさせてもらったりすることで少しずつわかるようになりました。
技術検証の時の一番の危機は、Googleカレンダーへの反映ができないかもしれないとなった時です。
アプリで作成したカレンダーをGoogleカレンダーの方に反映する際、APIの仕様上１日単位でしかリクエストを送れないので、1年間のカレンダーだとリクエスト数が最大365件(閏年だと366件)発生します。
しかし、Googleへのリクエストは１ユーザーあたり1秒5回まで(500/100s)という制限があるらしいということがわかり、実現不可能なのでは？となった時は落ち込みました。
FBCの質問掲示板で助けを求めたところメンターの方からバッチ処理というのがあることを教えていただき、このバッチ処理を使って細かいリクエストを1回分にまとめてリクエストを行うことでなんとか実現できました。
あとはGoogleCalendarAPIを使ったアプリではGoogleにOAuthの利用申請をして審査に通らなければいけないため、アプリの使い方を動画に撮ってYoutubeにアップしたりしました。大変でしたが、新しい経験ができて面白かったです。
OptionsAPI→CompositionAPIへ書き換えた
私がFBCの課題でVue.jsを使った時にはバージョンが2系だったため、自作アプリでもその時の書き方で書いていました。しかし、3系からCompotisionAPIという書き方ができるようになったことを後で知り、今までの書き方(OptionsAPI)とは違う機能があることや可読性の面で有利なことがわかりました。
実はメインの機能をVue.jsで書いていたのもあり、ファイルがかなり大きくなっていてどこに何の機能のコードが書かれているのかわかりにくいという問題を感じていました。
そこで、OptionsAPIで書いていた部分を全てCompositionAPIに書き換えました。
終盤だったので結構な量を書き換えることになりましたが、コードが関心毎にまとめられるので可読性が大幅に改善しました。
また、CompositionAPIに書き換えたことによりprovide/injectの機能も使えるようになり、バケツリレーになっていたコンポーネント間のデータ受け渡しも少し改善しました。
OptionsとCompositionの両方の書き方を学習でき、技術選定で意図した通りVue.jsへの理解を深めることができました。
今後の展開
今後いくつか入れたい機能があります。
１つ目がOutlookとの連携機能です。現在Googleカレンダーにしか反映できませんが、勤務予定の管理にOutlookを使う人もいますので、こちらとも連携できるようにしたいと思っています。
２つ目が、祝日機能です。現在の状態では国民の祝日がカレンダーに入っていないのですが、これを入れたいと思っています。さらに、祝日を自動調整で休みにするかどうかも決められるようにしたいと思っています。
３つ目は、自動調整機能の条件の追加です。現在は「期間、勤務日数、曜日毎の予定」の３つしか条件を入れられませんが、週あたりの勤務日数を入れられるようにしたり上にも書いたように祝日の条件を追加して、さらに便利なものにしていきたいと思っています。
終わりに
今回自作アプリを一から作り上げ、本当に大変でしたが多くのことが学べました。 エレベータピッチからデザインまでご相談させていただいた町田さん、技術的なことをご相談させていただいた駒形さん、コードレビューしていただいた前田さん、日報などでアドバイスや励ましをいただいたメンターの皆様、Googleカレンダーとの連携について相談に乗ってもらったり参考にさせてもらったharuguchiさん、他輪読会やその他の機会に関わってくださったFBCの皆様、ありがとうございました！
ここで学んだことを生かし価値あるプログラムを作り出していけるよう、これからも努めていきたいと思います。
