Amazon の API で「売れ筋ランキング」サイトを作ってみた
「Amazon の API を使って、何か動くものを作ってみたい」。そんな軽い動機から始まったのが、Amazon売れ筋ランキングというまとめサイトです。いろいろなジャンルの売れ筋商品をランキング形式で取得・表示し、順位の推移も見られるようにしています。
どんなサイトか
ざっくり言うと、次のことをしています。
「今このジャンルで何が売れているのか」を眺めているだけで、地味に楽しいサイトになりました。
仕組み
構成はシンプルです。
- フロント: Next.js（App Router）+ TypeScript
- データストア: Supabase（順位の履歴）+ JSON ファイル（ランキング本体）
- データ収集: GitHub Actions で毎日 JST 9:00 に実行
毎朝、GitHub Actions が Amazon の商品 API を叩いて最新データを取得し、Supabase に積み上げていきます。サーバーを常時動かさなくても、スケジュール実行だけで日々のデータが貯まっていくのが個人開発と相性が良いところです。スケジュール実行そのものの作り方は「GitHub Actions で毎日データを自動収集する」に切り出して書きました。
データを「貯める」設計の工夫
このサイトの肝は、表示そのものより履歴を貯めることでした。ランキングの順位は「その時点のスナップショット」をひたすら蓄積していく形にしています。イメージとしては、こんなテーブルです。
create table ranking_snapshots (
id bigint generated always as identity primary key,
asin text not null, -- 商品ID
category text not null, -- ジャンル
rank int not null, -- その日の順位
captured_at date not null, -- 取得日
unique (asin, category, captured_at)
);
ポイントは「上書きしない」ことです。毎日の値を新しい行として足していくだけにしておくと、あとから「先週と比べてどう変わったか」を captured_at で並べるだけで出せます。unique 制約を付けておくと、同じ日に二重実行しても重複しないので、再実行が怖くありません。最初に少し手間をかけてでも、時系列でデータを持っておくと、後から表現の幅がぐっと広がります。
つまずいたところ
API には呼び出し回数の制限があるので、一度に全ジャンルを取りにいくとすぐ上限に当たります。対策として、ジャンルごとに少し間隔を空けて取得し、失敗したら次回に回す作りにしました。「全部きれいに取れなくても、毎日少しずつ貯まればいい」と割り切ったら、運用が一気に楽になりました。
ちょっとした余談
貯めた履歴が増えてくると、表示の幅も広がってきました。いまは週ごとの急上昇商品を分析する「週間トレンド」や、迷いがちな2機種をスペックで比べる「比較ガイド」も作っています。まず自分が売れ筋やトレンドを眺めて楽しめるツールとして、十分に元は取れたなと思っています。「誰かのため」だけでなく「まず自分が使いたいもの」を作るのも、個人開発の醍醐味ですね。この考え方は「「まず自分が使いたいもの」を作る、という個人開発のススメ」にも書いています。