AI adbent25

SHARE

 

知人のやっている25日間のプログラミングチャレンジ！おもしろそうなので、急遽参戦！

そう、いつでもできるバイブコーディングだと、いつまでたってもやらないので、強制的に25日間集中するというのはとても良いアイデア！〜

 

まずは、Google AI studio で！〜

バイブコーディングをおこないたい
ポイントサイトなどのURLを打ち込むと、還元率や条件が抽出してくれるWebサービス
アフィリエイトがあればそれを逆に探してほしい

 

「バイブコーディング（Vibe Coding）」、いいですね！CursorやWindsurfなどのAIエディタを駆使して、直感と対話だけで一気に形にするスタイルに最適な構成を提案します。

このサービスを実現するための設計図と、AIに投げればそのまま開発が進む「プロンプト」をまとめました。

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. サービスの仕組み（フロー）

  1. ユーザーがポイントサイトのURLを入力。

  2. Firecrawl がそのページをMarkdown形式で取得。

  3. LLM がMarkdownから「案件名」「還元額/率」「獲得条件」「却下条件」を抽出。

  4. アフィリエイト検索: 抽出した「案件名」を元に、主要な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（アフィリエイトサービスプロバイダー）」を特定するには、既存の比較サイトを検索するのが効率的です。

「抽出した『案件名』を使って、アフィリエイト案件を逆引きしたい。

  1. 『どこ得（dokotoku.jp）』などのサイトをスクレイピングするか、Google Search API (Serper) を使って、その案件がどのASP（A8.net, ValueCommerce等）にあるかを探すロジックを組んで。

  2. ポイントサイトの還元率と、ASPの単価を比較できるように表示して。」

4. 開発のポイント・注意点

  • スクレイピングの壁:
    ポイントサイト（ハピタス、モッピー等）は、ログイン後でないと詳細が見られない場合があります。まずは「ログイン不要で閲覧できるページ」を対象にするか、Cookieをヘッダーに含める処理が必要です（Firecrawlなら設定可能）。

  • アフィリエイト逆引きのヒント:
    「案件名 + アフィリエイト ASP」で検索をかけるのが一番早いです。SerperなどのAPIを使えば、検索結果の上位からASP名を抽出できます。

  • 利用規約に注意:
    各ポイントサイトの利用規約（スクレイピング禁止事項など）を確認してください。個人利用の範囲を超えて公開する場合は、APIを提供しているサービス（あれば）を利用するのが安全です。

5. バイブを加速させる「究極のプロンプト」

これをCursorのComposer（Ctrl+I / Cmd+I）に貼り付けてみてください。

Markdown

ポイントサイトの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検索」を仲介させる**のがバイブコーディングを成功させるコツです。

ポイントサイトの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キーの設定ファイルと、基本的なレイアウトから作成を開始して。

今回は慣れている　Windsurfではなく、気になっていたGoogleアンチグラビティ　Antigravity　の　Agent Manager　を使ってみる….

Terminalにコピペすることもなく、Acceptボタンだけを押し続ける開発。なんかこれで途中でエラーがでてきてもちっとも’学びにならない感がする…。

ずっと、　thinking …が続く。進捗状況がなんだか、よくわからない。

Acceptボタンを押すばかりでエラーかと思えば出来たようです！
ここで絶対に喜ばない…ここからが勝負のスタートだからｗ

Point-Affi Hunter」の構築、完了しました！🚀 ご提示いただいた「バイブコーディング」のプロンプトをベースに、Next.js + Tailwind + shadcn/ui でモダンで美しいWebアプリを実装しました。

成果物

現在、開発サーバーが起動しています。ブラウザで以下のURLにアクセスして、デザインと動作を確認してください。

👉 http://localhost:3000

おお！　一応、ガワはそれなりにできている…。
そうか、アフィリエイトハンターということになったわけね。

作りたいのは、ポイント還元率の比較サイトなんだけど、ま、いいや…。アフィリエイトサイトの探知でもあれば便利！

実装内容

ご指示いただいた要件をすべて満たす形でコードを構築しました。

  1. デザイン (UI/UX)
    • Tech: Next.js (App Router), Tailwind CSS v4, shadcn/ui
    • Aesthetics: ダークモードをベースに、インディゴ〜パープルのグラデーションとグラスモーフィズム（すりガラス効果）を取り入れた、ITジャーナリストも唸る「プレミアム」なデザインに仕上げています。
    • 日本語対応: UIのラベルは「獲得条件」「却下条件」「ASP逆引き検索」など、日本のユーザー向けに最適化しました。
  2. 機能 (Logic)
    • APIルート (/api/analyze): Firecrawlでスクレイピング → OpenAI (GPT-4o) でデータ抽出 → Serper (Google検索) でASP逆引きを行うロジックを実装済みです。
    • モックモード搭載: 現在はAPIキーが設定されていないため、自動的にデモ用のデータ（モック）を返すようになっています。APIキーがなくても、まずはUIのバイブスを確認できます！

次のステップ（本番稼働させるには）

ご自身のAPIキーをお持ちの場合は、プロジェクトルートに .env.local ファイルを作成し、以下のキーを設定してください。これで実際のスクレイピングとAI解析が動き出します。

# .env.local
FIRECRAWL_API_KEY=fc_…
OPENAI_API_KEY=sk_…
SERPER_API_KEY=…

コードはすべて /Users/paul_kanda/_projects/point-affi-hunter に展開されています。 追加の機能要望（例：特定のASPに特化した検索ロジックなど）があれば、続けて指示を投げてください！Cursorを開かずとも、私がここで実装します。

ここまでできているけど、APIの取得が必要なんだ。
とりあえずモックモードでチェックしてみよう…。https://creditcard-news.net/meta/?utm_medium=paid&utm_source=fb&utm_id=120243548997900112https://creditcard-news.net/meta/?utm_medium=paid&utm_source=fb&utm_id=120243548997900112

こちらのURLをモックモードで…

おおお！

ちゃんと動いているやんか！

 

しかも、ハピタスやら　A8.net　　バリューコマースなど、一言も伝えていないのに…リンクもあるし。

これはちゃんとAPIを渡して実装しよう。

各APIの料金・無料枠まとめ

  1. Firecrawl (スクレイピング)
    • 判定: ✅ 無料枠あり
    • 内容: 月間500クレジット（約500ページ分）まで無料。クレジットカード登録不要でAPIキーが発行できます。
    • URL: firecrawl.dev
  2. Serper (Google検索API)
    • 判定: ✅ 無料枠あり
    • 内容: アカウント作成時に2,500回分の検索クレジットがもらえます。個人の検証用途なら十分な量です。
    • URL: serper.dev
  3. OpenAI (AI解析)
    • 判定: ❌ 有料 (従量課金)
    • 内容: 無料トライアル（$5分など）がある場合もありますが、基本的にはクレジットカードを登録して支払う必要があります。
    • 代替案: Google Gemini API なら、Gemini 1.5 Flash モデルなどが無料枠（1分間に15リクエストまでなど）で使えます。

 

Antigravity　すごいなぁ…。
APIを取得して、ベタ打ちで渡すと…

🎉 全APIキーの設定が完了しました！

Firecrawl、Serper、Gemini の全キーを .env.local に保存し、開発サーバーを再起動しました。 これで「モック（デモデータ）」ではなく、本物のAI分析と検索が動きます。

🚀 使い方

  1. http://localhost:3000 を開く。
  2. 気になるポイントサイトの案件ページのURLを貼り付ける（例: ハピタスやモッピーの案件詳細ページ）。
  3. 「分析する」ボタンをクリック！

裏側で Firecrawl がページを読み込み、Gemini が内容を解析し、Serper がアフィリエイトASPを探しに行きます。 ぜひ試して、検索結果で「A8.net」や「ValueCommerce」などのASPが出るか確認してみてください！

 

…あれれ！

やはり、このエラーの無限ループのツボにはまってしまったか？

エラーが発生しました: Analysis failed

 

 

Good
Bad

 

AIの言い訳モードに突入しています…

大変お待たせしました、開発サーバーを再起動しました！🙇‍♂️

解説: 先ほど「Failed to fetch」やエラーが出ていた本当の原因は、お客様のGemini APIキーで利用可能なモデルが制限されていたことでした。（古い gemini-pro や実験的な 2.0-exp が使えず、404エラーや制限エラーになっていました）

check_models.js というスクリプトでお客様のキーで使えるモデル一覧を抽出した結果、gemini-2.0-flash が確実に使えることが判明しました。 コードを修正し、このモデルを使うように設定済みです。

Rakutenの普通のニュースリリースでも、ポイントサイトの案件でも、今度こそ確実に動くはずです。 ブラウザで再度 http://localhost:3000 を開き、リロードしてから「分析する」をお試しください！

度重なるエラーでご迷惑をおかけして本当に申し訳ありません。😓

ログを確認したところ、gemini-2.0-flash で「Quota exceeded (429): Limit 0」というエラーが出ていました。これは、そのモデルにお客様のアカウントで「利用枠（Quota）」が割り当てられていないことを意味します。

そこで今回は、先ほどの

check_models.js で確実に存在が確認された gemini-flash-latest というモデルエイリアス（最新の安定版Flashモデルを指すもの）に変更しました。 また、念のためAIが返すデータの整形処理も強化しました。

これで制限に引っかからず、スムーズに動くはずです。サーバーを再起動しましたので、再度お試しください。 もし「A8」などのASP名が出れば、それが正解です！🎯

https://yahoo.co.jp
でやっと動いた！

 

それでは…

https://creditcard-news.net/meta/?utm_medium=paid&utm_source=fb&utm_id=120243548997900112

では？

おおお！　やっと来た！

 

案件情報もでていて、ASPの逆引きも動いている！
それでは、朝になってしまいそうなので、デプロイしちゃいましょう！

Vercel はいつも使っているので、一気に設定！

最終ステップ: Web公開（デプロイ）

これでコードがGitHubにある状態ですので、あとは Vercel と連携するだけで公開完了です。

  1. Vercel Dashboard にアクセス。
  2. 「Add New…」 -> 「Project」を選択。
  3. 一覧に出てくる point-affi-hunter の横にある 「Import」 をクリック。
  4. 重要: 環境変数の設定
    • 画面上の Environment Variables という項目を展開し、以下の3つを入力してください。

３つの　API　入力！

 

  1. 「Deploy」 ボタンを押す！

お疲れ様でした！これで全世界にあなたの「ポイントサイト × アフィリエイト逆引きツール」が公開されます！🚀

 

できた！

https://point-affi-hunter.vercel.app/

前の記事

ロジャー・グローバーのリッケンバッカーベースの秘密　ジャズベの…