fragfolio開発ログ #1|Laravel 12 × React 19 × Tailwind v4で作る香水コレクション管理アプリとAI活用

技術

はじめに

香水を少しずつ集めていると、「どれをいつ買ったか」「実際の使い心地はどうだったか」を後から見返したくなる瞬間があります。
でも、スプレッドシートやノートアプリに書き散らすと管理が続かないし、写真フォルダに入れても探すのが大変。

それなら自分でアプリを作ってしまえばいい。
そんな発想から始めたのが fragfolio(フラグフォリオ) です。
名前は fragrance + portfolio の造語。香水の「ポートフォリオ」を気軽に作れる場所を目指しています。

「コレクションをただ眺める」以上に、「記録し、振り返り、共有する」楽しみを加えたい。
開発ログとして、このブログでは進捗や考えていることを綴っていきます。


使用技術

現時点での技術スタックは以下のとおりです。

  • バックエンド: Laravel 12(PHP 8.4)
  • フロントエンド: React 19 + TypeScript
  • スタイリング: Tailwind CSS v4
  • DBマイグレーション管理: sqldef
  • インフラ: これから検討中(OCI Free TierをベースにDocker化予定)

特別に奇抜な選択ではありませんが、それぞれの最新バージョンを取り入れていて開発体験が良いのがポイントです。Laravel と React の組み合わせは拡張性が高く、Tailwind v4 のユーティリティでUIをさっと組めるのも魅力。小さく始めて大きく育てやすい構成になっています。


最初に取りかかったこと:ユーザ認証

最初に着手したのはユーザ認証でした。
やはりアプリを使うための入り口がなければ、その先の設計にも進めません。

  • 登録/ログイン機能を Laravel 側で準備
  • React + Tailwind で最低限のログイン画面を用意
  • 今後は二段階認証(TOTP や FIDO2 セキュリティキー)も導入予定

ここを固めておけば、安心してデータ管理機能に取りかかれるので、土台づくりとしては正解だったと思います。


香水マスタの正規化はAIに頼る

香水の名前やブランド名は、入力のブレが避けられません。
「CHANEL No.5」「シャネル #5」「No5 EDP」「No.5(EDT)」……。人によって書き方がバラバラです。

こうしたブレを手作業で正規化するのは大変なので、ChatGPT や Claude などのAIにサポートを任せるつもりです。
具体的な実装はこれから考えますが、

  • ユーザが入力したデータをAIに渡して「整理された候補」を返してもらう
  • その中からユーザ自身が正しいものを選ぶ

といった流れで、正規化を“手間なく”実現できたらいいなと思っています。
あくまで人間が最終チェックする形にして、AIは候補を提示してくれるアシスタント役にするイメージです。

これによって、香水マスタの整備にありがちな「入力がぐちゃぐちゃで後から使いにくい」という問題を、なるべく回避できそうです。


今後やりたいこと

fragfolio はまだ立ち上げたばかりですが、これから次のような機能を少しずつ追加していく予定です。

  • 香水マスタの整備(AIサポート付きで正規化)
  • 使用感の記録フォーム
     「春に使いたい」「甘くて落ち着く」「職場でもいける」などをメモ
  • 検索・フィルタ機能
     季節・香調・濃度での絞り込み
  • 統計・可視化
     よく使っている香調、最近買った香水の傾向をグラフで見られる
  • シェア機能
     自分のコレクションをSNSやブログで公開できるようにする

「自分の香水図鑑を育てる」感覚に近づけたいです。


まとめ

今回は「fragfolioを作り始めた」という開発ログの第一歩を紹介しました。
まだユーザ認証が動いたばかりですが、AIを取り入れながらマスタ整備を進め、記録・検索・可視化・シェアといった機能を積み重ねていく予定です。

香水好きがもっと気軽にコレクションを管理できて、振り返りや共有の楽しみを広げられるようなアプリに育てていきます。

コメント

タイトルとURLをコピーしました