Firecrawl × Lovable｜任意サイトを構造化データに変える

Firecrawlは「URLを投げるだけで綺麗なMarkdown/構造化JSONが返ってくる」AIフレンドリーなクローラーです。価格比較・記事要約・社内検索などに最適。

セットアップ#

1. Lovable CloudのSecretsに FIRECRAWL_API_KEY を追加
2. サーバーファンクションから fetch で呼ぶ
3. 結果をDBに保存して再利用可能に

サンプル#

const r = await fetch("https://api.firecrawl.dev/v1/scrape", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${process.env.FIRECRAWL_API_KEY}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ url, formats: ["markdown"] }),
});
const { data } = await r.json();

実例ケーススタディ：競合価格モニタリングを週次自動化#

1. Firecrawl で競合10社のプライシングページをmarkdown取得
2. AIに『価格・プラン名・含まれる機能をJSON配列で抽出』
3. Lovable Cloudの prices_history テーブルに日次保存
4. 前週比で価格変動があったら Slack 通知（Slackコネクタ）
5. ダッシュボードで時系列チャート表示

つまずきポイント集#

• 症状：JSの動的描画が取れない → 対処：Firecrawlの『waitFor』『actions』オプションでレンダリング待機
• 症状：robots.txtで拒否されている → 対処：取得を即停止。代替として公式APIや公開データを利用
• 症状：取得結果が大きすぎてトークン超過 → 対処：『includeTags』で必要セクションだけ抽出、または事前に正規表現で絞る
• 症状：レイアウト変更で抽出が壊れた → 対処：HTMLのclassに依存せず『AIに自然言語で抽出』設計に変更

FAQ追加#

Q. 法的に問題ない？

対象サイトの利用規約・robots.txtを必ず確認してください。公開価格情報の参照は一般的に問題視されにくいですが、ログイン後ページ・大量取得・再配布は要注意です。

Q. PuppeteerやPlaywrightと比べて何が違う？

Firecrawlはサーバ側で起動・スケジュール・LLM抽出までAPI一本でできるのが強み。自前運用が不要で、定期ジョブ用途に向きます。