見出し画像

リメイク版 hayaoki_girls カレンダーをリリースしました 🎉

まいあ めあ

はじめに

2023年1月から個人開発で TECH PLAY女子部向けに hayaoki_girls カレンダーを運用しています。TECH PLAY女子部内での朝活を、hayaoki_girls と呼んでいます。
hayaoki_girlsカレンダーは、hayaoki_girls 参加予定者の人数をおおまかに把握するために作ったカレンダーアプリです。開発経緯などは以下の記事にまとめているのでご覧ください。

2023年1月からプロトタイプを運用していましたが、この度、2023年10月26日にリメイク版 hayaoki_girls カレンダーをリリースしました！！！
機能は以前と同じですが、デザインを刷新しました。技術やデザインがどう変わったのかをまとめます。

また、X (旧Twitter)にデモ動画を掲載しているのでご覧ください！

技術スタック

プロトタイプではNode.jsで愚直に処理を書いていました。
リメイク版ではフレームワークを利用してモダンな技術に挑戦することにしました。Next.js、React、TypeScript の学習に約3ヶ月間、実装に約3ヶ月間かかりました。

プロトタイプ

  • 使用した技術：Node.js(v16), Sequelize(v6), Pug(v3)

  • 使用したRDBMS：PostgreSQL(v15)

  • 使用したサービス：Render

リメイク版

  • 使用した技術：Next.js(v13), React(v18), TypeScript(v5), Prisma(v5), Tailwind CSS(v3)

  • 使用したRDBMS：PostgreSQL(v16)

  • 使用したサービス：Vercel, Supabase

リメイク版をリリースした理由

1. Render の Free プランでは運用しづらかった

2023年1月にリリースしたプロトタイプは、Renderのフリープランを利用していました。このプランでは、15分間リクエストを受け取らないと自動的にサービスが一時的に停止します。なので、GitHub Actions で定期的にリクエストを送る設定をしました。

しかし定期実行は遅延することがあり、その場合、サービスが一時的に停止して使用可能な状態に戻るのに数秒から数分かかります。それが原因で、せっかくアクセスしたのに応答待ち時間が長すぎてページが読み込まれないことが何度もあり、ユーザー体験は良くありませんでした。

また、DBもフリープランだとDBにアクセスできるのが3ヶ月間だけで定期的にバックアップを取る必要があり手間でした。（一度バックアップし忘れて1ヶ月間だけ有料プランにしたことがあった）
Next.js / React / TypeScriptで書き換え、Next.js と相性がいい Vercel にデプロイすることでページ表示の高速化を試みました。
DBは Supabase に変えました。バックアップ機能はないですが、一週間使用がないと停止するのと、DB容量制限に気をつければ、DBへのアクセス制限の期限はないのでRenderより運用しやすいと思いました。


2. デザインを変えたかった

プロトタイプは必要最低限の機能を実装するのに手一杯でデザインまで手が回りませんでした。なので見た目は恥ずかしいなぁと思っていました。
それに週表示だけなのは不満で、月表示を実現してカレンダーアプリと言えるようにしたい気持ちがありました。

デザインは以下の記事に掲載されているサービスを参考にさせていただきました。


3. 自信を持って見せられるものにしたかった

ログインまで時間かかって待たせてしまうのが申し訳なかったり、デザインも自信なかったので「ぜひ使って〜！」と気軽に言えませんでした。
課題点を解決したものを作って自信を持って見せられるようにしようと思いました。

変わったところ

1. アクセスしてからログイン画面表示までの時間が大幅に短縮（1分ちょい→3秒〜5秒くらい）

アクセス時の待つストレスが大幅に軽減されました。


2. カレンダー表示が月、週、リストの３つを選べるようになった

プロトタイプを作る段階で月表示は欲しいと思っていたのですが当時のスキルでは実現できませんでした。調べていくうちに FullCalendar を知り、カレンダー表示の切り替えが実現できました。

プロトタイプ

リメイク版

【月表示】

【週表示】

【リスト表示】



3. 参加申し込みフォームのデザイン

Preline UI を利用しました。イメージに近いコンポーネントがあって助かりました。

プロトタイプ

プロトタイプのフォーム画面


リメイク版

リメイク版のフォーム画面



4. 参加登録した時間帯の表示を変更（★マークがつくようになった）

FullCalendar では月表示とリスト表示で背景色をつける方法を見つけられなかったので、参加人数の右横に★マークを表示させることにしました。


5. 使い方や注意点を「使い方ガイド」としてまとめた

プロトタイプでは剥き出しだった説明文を、トグルにしてまとめてスッキリさせました。


6. hayaoki_girlsカレンダーについての説明ページを追加（「このサイトについて」）

リメイク版で新たに作ったページです。


7. カレンダーアイコンをつけた

カレンダーページ以外のページからカレンダーページに遷移する時に、視覚的に分かりやすくしようとカレンダーアイコンを用意しました。（Heroicons を利用）


8. スマホ対応

プロトタイプはスマホだと表示崩れを起こしていました。リメイク版でも現段階で、週表示と月表示で表示崩れが起きています。なのでスマホでもストレスなく操作できるよう、ブラウザとスマホどちらもリスト表示をデフォルト設定にしました。

完全にスマホ対応できたとはいえないですが、プロトタイプと比べたら見やすい表示を一つ用意できてるのでいったん良しとします。 

プロトタイプ

リメイク版

リスト表示
週表示
月表示
「このサイトについて」のページ
「使い方ガイド」を開いた時の表示


リアクション

リリース当日、大変ありがたいことに使ってくれた方々から以下のような嬉しいフィードバックをいただきました。本当にありがとうございます！！！感無量です😭😭😭

  • 「月」「週」「リスト」のモードがそれぞれ見やすい

  • 「hayaoki_girlsとは」の説明もとてもわかりやすい

  • デザインかわいい

  • UIわかりやすい

  • 表示速度上がってうれしい

おわりに

プロトタイプを使ってくれる方がいたおかげで、リメイク版の開発を根気強く続けられました。自分としても満足いくデザインにできて、自信を持って「使って〜！」と言えるものにレベルアップできました。

今後も機能追加してより充実したカレンダーアプリにしていきたいです。
それによって hayaoki_girls に参加するハードルを下げて、気軽なコミュニケーションを取るお手伝いができれば嬉しいです😊


この記事が気に入ったらサポートをしてみませんか？