XAPPSXAPPS
← Blog
·3分で読めます

Amazon の API で「売れ筋ランキング」サイトを作ってみた

#個人開発#API#自動化#Supabase

「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,        -- その日の順位
  price       int,                  -- その日の価格
  captured_at date not null,        -- 取得日
  unique (asin, category, captured_at)
);

ポイントは「上書きしない」ことです。毎日の値を新しい行として足していくだけにしておくと、あとから「先週と比べてどう変わったか」を captured_at で並べるだけで出せます。unique 制約を付けておくと、同じ日に二重実行しても重複しないので、再実行が怖くありません。最初に少し手間をかけてでも、時系列でデータを持っておくと、後から表現の幅がぐっと広がります。

つまずいたところ

API には呼び出し回数の制限があるので、一度に全ジャンルを取りにいくとすぐ上限に当たります。対策として、ジャンルごとに少し間隔を空けて取得し、失敗したら次回に回す作りにしました。「全部きれいに取れなくても、毎日少しずつ貯まればいい」と割り切ったら、運用が一気に楽になりました。

ちょっとした余談

コンテンツの性質上、検索エンジンにはあまりインデックスされません(笑)。それでも、自分が売れ筋やトレンドを眺めて楽しめるツールとして、十分に元は取れたなと思っています。「誰かのため」だけでなく「まず自分が使いたいもの」を作るのも、個人開発の醍醐味ですね。この考え方は「「まず自分が使いたいもの」を作る、という個人開発のススメ」にも書いています。