【個人開発】持ち物リストを作成・共有するアプリ「All Ready」を作りました

はじめに

こんにちは、manaと申します。
プログラミングスクールRUNTEQで学習し、持ち物リストを作成・共有するアプリ「All Ready」を開発いたしました。

アプリの紹介

サービス概要

持ち物リストを作成し、かばんの中身を投稿・共有できるサービスです。
マストアイテムのみを投稿することもできます。
自分の持ち物を整理し、他のユーザーのかばんの中身を参考にすることで、持ち物リストをブラッシュアップできます。

サービスへの想い、開発した理由

行き先に応じた持ち物リストを作成し、準備を整える時間が好きです。
例えば旅行の際は、直前まで使うものをチェックしておくことで忘れずに出発できます。
旅先で「持ってくればよかった」と感じたものをリストに追加すると、次回の準備がよりスムーズになります。
また、雑誌やWebサイト等でかばんの中身を紹介する記事を読むのも好きです。
誰が何をどのくらい持ち歩いているのかを知ることで、その人のライフスタイルやこだわりが垣間見え、とても興味深いと感じます。
このサービスを通じて、自分の持ち物を整理するだけでなく他のユーザーと共有し合い、より良い準備をサポートする場を提供したいと思い開発いたしました。

メイン機能

持ち物リスト

行き先ごとに持ち物リストを作成できます。
準備したアイテムにチェックを入れるとゲージのパーセントが増えていきます。

みんなの持ち物

他のユーザーが共有した持ち物リストを閲覧できます。
検索はリスト名・アイテム名・タグ・投稿の本文に対応しています。

マストアイテム

行き先ごとにマストアイテムを1つ紹介できます。
持ち物リストを作成しなくとも閲覧・投稿が可能です。

技術構成

使用技術

カテゴリ	技術
フロントエンド	Rails 7.2.1 / TailwindCSS / daisyUI / JavaScript
バックエンド	Rails 7.2.1 (Ruby 3.2.3)
データベース	PostgreSQL
開発環境	Docker
インフラ	Heroku / AmazonS3
API	OmniAuth Google OAuth2
VCS	GitHub
CI/CD	GitHub Actions

ER図

こだわった点

持ち物リストのカスタマイズ

ユーザーが複数の持ち物リストを作成できるため、カスタマイズに関する機能を充実させました。

• 既存のアイテムの中から選択しリストに追加
• オリジナルのアイテムをリストに追加
• 複数準備するアイテムの数をバッジで表示
• 中身や行き先がわかるようカバー画像を設定
• 準備済みのアイテムのチェックをクリア
• リストを複製
• ドラッグ&ドロップでアイテムを並び替え
  SortableJSとStimulusで実装しました。
  
• 準備済みのアイテムの表示・非表示を切り替え
  
• タグやコメントを加えて共有したリストのみを公開
  各リストのメニューからモーダルで投稿を作成できます。
  

ライトモード・ダークモードの切り替え

持ち物を管理する際により使いやすいよう、好みによってカラーを切り替えられるようにしました。

ライトモード	ダークモード

レスポンシブ

持ち物を準備する際はスマートフォンでの使用を想定していますが、リストのカスタマイズなどはPCでよりスムーズにできるよう意識しました。

スマートフォン（メニューをモーダルで表示）

PC （メニューを常に表示）

グラデーションの使用

下記の理由から、ロゴやボタンにグラデーションを使用しています。

• リストにチェックを入れるとゲージのパーセントが増え、準備が段々と整っていくアプリであること
• 持ち物を管理するツールのため色数を少なくしたいが、シンプルすぎず出かける前のワクワク感を損なわないこと

動的OGP

"持ち物リスト"と"マストアイテム"をXでシェアできるため、各投稿のテキストと画像（画像なしの投稿にはデフォルト画像）を埋め込んでOGP画像を生成します。

持ち物リスト	マストアイテム

今後の展望

いただいたフィードバックを参考に、より使いやすくなるよう改善していきたいです。
また、テストコードのカバレッジを高め、不具合の早期発見や防止につなげたいです。

終わりに

アプリ開発にあたりサポートしてくださった皆さまに心より感謝しております。
実装を進める中で問題解決に時間を要することもありましたが、「この機能を実現したい！」という目標に向かって励みました。
今後もよりよい体験を届けられるよう開発していきたいと思います。
お読みいただきありがとうございました！