読み込み中...

Web · 進行中

定期購入リスト

定期的に買う商品を購入サイトをまたいで1か所にまとめる自分専用の購入リスト。ブックマークレットで商品を登録し、購入履歴から次回の購入予定日を予測

期間: 2026年9月 – 現在
分野: Web
所属: 趣味（個人・チーム）
状態: 進行中

概要

Amazonのお買い物リストを複数サイト対応にしたような、自分専用の購入リストを開発しています。
商品ページでブックマークレットを押すと、商品名・画像・価格を読み取って登録できます。
ブックマークレットが使えないサイトでは、URLを貼るとサーバーがOGPから情報を補完します。
予想周期と実際の購入間隔から購入周期を予測し、次回予定日・スキップ・購入履歴の編集・アーカイブ・カテゴリ分けに対応しています。

アーキテクチャ

ユーザー
ブックマークレットDOMから商品情報を抽出
GitHub Actions本番・PRプレビュー
React SPAVite / TanStack Query
APIHono / zod・サイト別アダプター
Cloudflare D1Drizzle ORM
購入サイト

Vite + React + TypeScriptのフロントエンドと、HonoによるAPIを同じCloudflare Workerで配信しています。
データはCloudflare D1にDrizzle ORMで保存し、UIはTailwind CSS・shadcn/ui・TanStack Query・React Router、入力検証はzodで構成しています。
サイトごとの対応はアダプターとして、サーバー側（URLの判定・正規化）とブックマークレット側（DOMからの抽出）に分けて実装しています。
認証はCloudflare Accessで行い、GitHub Actionsで本番デプロイとPRごとのプレビュー環境の作成・削除を自動化しています。
設計判断はADRとして記録しています。

技術的挑戦

課題購入サイトをまたいだ商品情報の取得解決サイトごとのアダプターでDOMから情報を抽出するブックマークレットと、サーバー側のOGP取得を併用
課題購入周期の予測解決予想周期を初期値に、実際の購入間隔を指数移動平均で反映（手動での固定も可能）
課題PRごとのプレビュー環境とデータの分離解決テーブル名にPR番号の接頭辞を付け、独自のマイグレーションランナーとGitHub Actionsでプレビュー用D1を管理
課題個人用アプリの認証解決Cloudflare Accessのみで保護し、Accessがかからない公開URLを無効化