※初心者のため、間違いや何かご存じの方がいましたら、教えていただけると助かります。
作ったもの
背景
化粧品のヘビーユーザーの知り合いから次の話があった。
- 「材料に使われる成分には経皮毒というのがあって、人の肌を傷つけたり、発がん性があったりする。自然由来のオーガニック成分はその点が安心で、今後そういった製品を選んでいきたい」と。
- 市販の○王や資○堂は、意外と害のある成分も含んでいると。
- また、市販されている製品には、一応成分が書かれているが、字が細かく、また成分数も大量にあって、何が良くて、何が悪いのか判別できない。さらに、個別の成分では問題なくても、吸収力を上げる成分と危険度の高い成分を同時に取れば、相互作用で害が起きやすい。
- 今、以下の書籍で勉強を始めたところ、という。
そこで、今回、このデータブックをもとに、成分を身近な製品ごとに整理して一覧で見ることができれば、有用なんじゃないかと考えたのが発端。
（ちなみに、自分は、大手が出してる物なら大丈夫じゃない？というこだわりのないタイプです。）
課題
作成にあたり、以下の問題点が判明
- 化粧品の原材料一覧として、csvなどのデータで使えるものがない。（一部まとめたサイトもあったが、「データ」として取り出すことができず、個人アプリに導入できない。）
- 各成分ごとの有害性などのcsvなどのデータがない。（同上で、一つ一つの成分を調べていけば情報を見られるが、「データ」として使えるものがない。）
- 化粧品には種類が山ほどあり、同じ商品でもパッケージが違うなど、「商品の同一性」をどう判定するか？（「同一」が判別できれば、過去の商品データを持ってくることができるのに。）
考えた対応
- 商品の原材料情報 ➡ ユーザーが任意入力できる形に。
- 成分の個別有害情報 ➡ こちらで、とりあえず手入力で用意。その後、新しい成分入れたいならユーザーが任意入力できればいいのでは。
- 「商品の同一性」判定 ➡ 日本ならバーコード（JANコード）が使えないか。
ということで、アプリ開発に着手しました。
開発
環境
windows11
docker-desktop
Next.js(app routerを使用)
supabase
ホスティング：Vercel
内容
最終的な全体像は、この図です。
- 全体的にユーザーがデータを登録・参照・更新できるような、ほぼ基本のCRUD機能に至りました。（削除は、せっかく作ったデータが万一消えると悲しいので、一旦無し。管理者ならできてもいいかも。）
- Vercelは、Next.jsアプリを無料でホスティングでき、https化もでき、Github連携で自動デプロイもしてくれる利点から、早期開発ができると判断して選定。
- Supabaseは、クラウド上のデータベースとして、ブラウザから直感操作がしやすいこと、（たぶん）freeプランで3プロジェクトまで無料だったことから選定。supabaseはユーザー認証機能も構築しやすいが、今回は個人情報系が少ないため、認証は無し。（セキュリティ知見不足なので、あんまり個人情報扱いたくないし。）
- 商品同一性判定のため、バーコードリーダーを実装したが、どうせならデータ登録に何か役立たたせようと、商品情報を取ってくるAPIがyahooshoppingAPIぐらいしかなかったので、これをAPIで検索させる仕様に。（ただし、yahooshoppingのデータも無いものが結構ある。無い場合は、「情報なし」と返して、ユーザーに登録してほしい旨お願いすることにした。）
- データベースはシンプルで、商品テーブル（商品名、バーコード）と、成分テーブル（成分名、アレルギー有無、発がん性有無、危険度、...のプロパティ）の2つがメイン。あとは、それをつなぐ中間テーブル（商品-成分テーブル）で紐づけることにした。
まとめ
以上がアプリの概要です。
次回は、バーコードリーダーに使ったライブラリの内容を少しだけ書ければ。といっても、２つしか見つからなかったけど。