解決した課題
- 買い物リストが面倒で続かない
- 家庭内でリストの共有が手間
- 微妙に違う商品を買って怒られる
つくったもの
リピートしたい日用品を間違えずに買うためのリスト『りぴりす（Repeat List）』
- 買い物リストをパスワードで保護: 家庭内だけで共有できる
- 複数端末でログイン可能: 同じリストをみんなのスマホで同期
- バーコード読み取りでリストに登録: 空になったら捨てる前にスキャンするだけ
コンセプト
- 日用品の買い忘れをなくす
- 面倒でも続けられる
- 買い間違いを防ぐ
- みんなで共有できる
技術スタックの選定
- フロントエンド: React + TypeScript (Vite)
- バックエンド: Cloudflare Workers (Hono)
- データベース: Cloudflare D1 (SQLite)
前提として自分で使う用なので維持費は無料を目指しました。そうすると無料枠の広いCloudflare、そのうえで動くTypeScriptのセットが第一候補です。そのまま採用しました。
システムアーキテクチャ
システム全体の構成とデータフロー
フロントエンド（SPA）
画面構成は
- 買い物リスト
- スキャナ
- 設定
スキャナ部分には BarcodeDetector API（非対応ブラウザはZXingでフォールバック）を採用し、ブラウザ上で直接バーコードを解析する。
IndexedDBを用いてセッションを永続化し、自動ログインに対応している。
バックエンド（エッジ + サーバーレスDB）
APIサーバとして稼働する Hono は Cloudflare Workers 上にデプロイされている。
ここでの主な責務は以下の2つ。
-
DBのCRUD操作
フロントエンドから送られてきたJANコードをCloudflare D1に保存する。同リスト内で既に登録されている商品は重複ケア。 -
商品名の解決（外部API連携）
JANコードから外部APIを使用して商品情報を取得しD1に保存。
おわりに
何事も三日坊主を心がけて生きていたけど、これは1年使っています。
次回予告
開発中、いざ実機（iPhone）でテストしてみるとSafariではカメラがうまく起動しませんでした。
次回はこれの対応について記事を作成します。