Day 19 - 12/19
ポイント還元率スクレイピング
Next.js
Google AntigravityGoogle AI Studio

概要
サービスの仕組み(フロー)
ユーザーがポイントサイトのURLを入力。
Firecrawl がそのページをMarkdown形式で取得。
LLM がMarkdownから「案件名」「還元額/率」「獲得条件」「却下条件」を抽出。
アフィリエイト検索: 抽出した「案件名」を元に、主要なASP比較サイト(どこ得など)や、Google検索API(Serper等)を叩いて、どこのASPに案件があるか逆引きする。
出力をMarkdownにして、Obsidianなどに格納する できれば日付とタグをつけて自動保存
または、出力をYAML形式にして、グラレコ調でnanobananaで図解化
ユーザーがポイントサイトのURLを入力。
Firecrawl がそのページをMarkdown形式で取得。
LLM がMarkdownから「案件名」「還元額/率」「獲得条件」「却下条件」を抽出。
アフィリエイト検索: 抽出した「案件名」を元に、主要なASP比較サイト(どこ得など)や、Google検索API(Serper等)を叩いて、どこのASPに案件があるか逆引きする。
出力をMarkdownにして、Obsidianなどに格納する できれば日付とタグをつけて自動保存
または、出力をYAML形式にして、グラレコ調でnanobananaで図解化
制作時間
5時間
学んだこと・振り返り
Automodeをつかったことによってエラーがでてからがさあ大変!
ターミナルを使って階層も理解してやはりプログラミングはすべきと反省!
ターミナルを使って階層も理解してやはりプログラミングはすべきと反省!
初回プロンプト(計画)
1. 推奨技術スタック
バイブコーディングで最速で形にするなら、以下の組み合わせが鉄板です。
Frontend/Backend: Next.js (App Router)
Styling: Tailwind CSS + shadcn/ui
Scraping: Firecrawl (AIフレンドリーなスクレイピングツール。JSレンダリングも余裕)
LLM: GPT-4o または Claude 3.5 Sonnet (情報を抽出・構造化するため)
Deployment: Vercel
2. サービスの仕組み(フロー)
ユーザーがポイントサイトのURLを入力。
Firecrawl がそのページをMarkdown形式で取得。
LLM がMarkdownから「案件名」「還元額/率」「獲得条件」「却下条件」を抽出。
アフィリエイト検索: 抽出した「案件名」を元に、主要なASP比較サイト(どこ得など)や、Google検索API(Serper等)を叩いて、どこのASPに案件があるか逆引きする。
3. 実装ステップ(AIへの指示用)
CursorやWindsurfを開き、以下の順番でプロンプトを入力して「バイブ」を加速させてください。
ステップ1:プロジェクトの初期化
「Next.js (App Router), Tailwind CSS, shadcn/ui を使って、モダンでクリーンなWebサービスの土台を作って。名前は『Point-Affi Hunter』。URLを入力する大きな検索バーがあるメインページをデザインして。」
ステップ2:スクレイピングとデータ抽出のロジック
「FirecrawlのAPIを使って、入力されたURLのコンテンツを取得するAPIルートを作成して。取得したMarkdownデータを、GPT-4oに渡して以下のJSON形式で抽出するように設定して。
{
“service_name”: “案件名”,
“reward”: “還元額/率”,
“conditions”: “獲得条件(箇条書き)”,
“denial_conditions”: “却下条件(箇条書き)”
}」
ステップ3:アフィリエイト逆引き機能(ここが肝)
ポイントサイトの裏側にある「ASP(アフィリエイトサービスプロバイダー)」を特定するには、既存の比較サイトを検索するのが効率的です。
「抽出した『案件名』を使って、アフィリエイト案件を逆引きしたい。
『どこ得(dokotoku.jp)』などのサイトをスクレイピングするか、Google Search API (Serper) を使って、その案件がどのASP(A8.net, ValueCommerce等)にあるかを探すロジックを組んで。
ポイントサイトの還元率と、ASPの単価を比較できるように表示して。」
4. 開発のポイント・注意点
スクレイピングの壁:
ポイントサイト(ハピタス、モッピー等)は、ログイン後でないと詳細が見られない場合があります。まずは「ログイン不要で閲覧できるページ」を対象にするか、Cookieをヘッダーに含める処理が必要です(Firecrawlなら設定可能)。
アフィリエイト逆引きのヒント:
「案件名 + アフィリエイト ASP」で検索をかけるのが一番早いです。SerperなどのAPIを使えば、検索結果の上位からASP名を抽出できます。
利用規約に注意:
各ポイントサイトの利用規約(スクレイピング禁止事項など)を確認してください。個人利用の範囲を超えて公開する場合は、APIを提供しているサービス(あれば)を利用するのが安全です。
5. バイブを加速させる「究極のプロンプト」
これをCursorのComposer(Ctrl+I / Cmd+I)に貼り付けてみてください。
code Markdown
downloadcontent_copy
expand_less
ポイントサイトのURLを投げると、以下の処理を行うフルスタックアプリを作ってください。
1. UI: shadcn/uiを使用し、ダークモード対応のモダンなデザイン。
2. Scraping: Firecrawl APIを使用してURLの情報を取得。
3. AI Analysis: 取得したテキストから「還元率」「獲得条件」「案件名」をJSONで抽出。
4. Affiliate Search: 抽出した「案件名」に基づき、Serper APIを使って「[案件名] アフィリエイト ASP」で検索を実行。検索結果のタイトルやスニペットから、関連するASP名(A8.net, afb, ValueCommerce等)を特定してリストアップする。
5. Result: ユーザーに「ポイントサイトの条件」と「見つかったアフィリエイト情報」を並べて比較表示する。
まずは、APIキーの設定ファイルと、基本的なレイアウトから作成を開始して。
もし特定のASP(A8など)に絞って調べたい場合は、「A8.netの管理画面にログインして検索する」のは規約上・技術上ハードルが高いので、まずは**「どこ得」や「Google検索」を仲介させる**のがバイブコーディングを成功させるコツです。
次に何を具体的に作りたい(例:まずはハピタス専用にしたい、など)があれば、さらに詳細なコード構成も出せますよ!
チャレンジ生成ツールで作成した最初の計画です
メインAIツールの評価
Google Antigravity
⭐
良かった点
なにもわからないままでも Acceptを押していけばプロトタイプが完成してしまう。
改善してほしい点
作っている途中で後戻りができない。エラーがでた時の原因究明が大変で時間もかかる。
総合コメント
ターミナルでコピペしながらのほうが初学者にとっては勉強になる。
公開日: 2025/12/18