--- title: "Lovable、Supabase、Bright Dataによるウェブデータ抽出アプリの構築" slug: lovable-with-supabase-and-bright-data date: 2025-08-12T06:55:33+00:00 modified: 2025-09-16T16:31:21+00:00 permalink: https://brightdata.jp/blog/ai/lovable-with-supabase-and-bright-data type: blog --- [ ブログ ](https://brightdata.jp/blog "ブログ") / [AI](https://brightdata.jp/blog/ai) [AI](https://brightdata.jp/blog/ai) # Lovable、Supabase、Bright Dataによるウェブデータ抽出アプリの構築 Lovable、Supabase、Bright Data、Gemini AIを使用して、クリーンで構造化されたウェブデータを抽出する最新のアプリを作成し、完全に自動化されたワークフローを実現します。 6 分読 [ ![Satyam Tripathi](https://media.brightdata.jp/2024/09/Satyam-Tripathi-50x50.png) ](https://brightdata.com/blog/authors/satyam-tripathi) [Satyam Tripathi Technical Writer ](https://brightdata.com/blog/authors/satyam-tripathi) ![Lovable + Bright Data + Supabase blog image](https://media.brightdata.jp/2025/07/Lovable-Bright-Data-Supabase-blog-image.png) 信頼性の高いWebデータ抽出ソリューションの構築は、適切なインフラストラクチャから始まります。このガイドでは、任意の公開ウェブページURLと自然言語プロンプトを受け付けるシングルページのアプリケーションを作成します。そして、スクレイピング、解析、クリーンで構造化されたJSONを返し、抽出プロセスを完全に自動化します。 このスタックは、Bright Dataのボットスクレイピング対策インフラ、Supabaseの安全なバックエンド、Lovableの迅速な開発ツールを1つのシームレスなワークフローに統合している。 ## 何を作るか ユーザーの入力から構造化されたJSONの出力と保存まで、あなたが構築する完全なデータ・パイプラインを紹介します： ```none User Input ↓ Authentication ↓ Database Logging ↓ Edge Function ↓ Bright Data Web Unlocker (Bypasses anti-bot protection) ↓ Raw HTML ↓ Turndown (HTML → Markdown) ↓ Clean structured text ↓ Google Gemini AI (Natural language processing) ↓ Structured JSON ↓ Database Storage ↓ Frontend Display ↓ User Export ``` 完成したアプリの外観はこんな感じだ： **ユーザー認証：**Supabaseの認証画面を使って、安全にサインアップやログインができます。 ![ウェブデータ抽出-署名フォーム](https://media.brightdata.com/2025/07/image-82-1024x537.png)**データ抽出インターフェース：**サインイン後、ユーザーはウェブページのURLを入力し、自然言語プロンプトで構造化データを取り出すことができる。 ![ウェブデータ抽出メインダッシュボード](https://media.brightdata.com/2025/07/image-83-1024x591.png)## 技術スタックの概要 以下は、私たちのスタックの内訳と、各コンポーネントが提供する戦略的優位性である。 - **ブライトデータ**ウェブスクレイピングはしばしばブロック、CAPTCHA、高度なボット検知に遭遇します。Bright Dataは、このような課題に対応するために開発されました。以下の機能を提供します： - 自動プロキシローテーション - CAPTCHA解決とボット保護 - 一貫したアクセスのためのグローバルインフラ - 動的コンテンツのためのJavaScriptレンダリング - レート制限の自動処理 このガイドでは、[Bright DataのWeb Unlockerを](/products/web-unlocker)使用します。この専用ツールは、最も保護されたページからも確実に完全なHTMLを取得します。 - **Supabase:**[Supabaseは](https://supabase.com/)、モダンアプリケーションのためのセキュアなバックエンド基盤を提供します： - 組み込みの認証とセッション処理 - リアルタイム対応のPostgreSQLデータベース - サーバーレスロジックのためのエッジ関数 - 安全な鍵の保管とアクセス制御 - **Lovable** [Lovableは](https://lovable.dev/)、AIを搭載したツールと**Supabaseとのネイティブな統合により**、開発を効率化します。Lovableは以下を提供します： - AIによるコード生成 - シームレスなフロントエンド／バックエンドの足場作り - React + TailwindのUIがそのまま使える - プロダクション対応アプリの迅速なプロトタイピング - **Google Gemini AI:**[Geminiは](https://ai.google.dev/gemini-api/docs/models)自然言語プロンプトを使って生のHTMLを構造化されたJSONに変換します。サポートしています： - 正確なコンテンツ理解と解析 - 全ページコンテキストのための大きな入力サポート - スケーラブルでコスト効率の高いデータ抽出 ## 前提条件とセットアップ 開発を始める前に、以下にアクセスできることを確認してください： 1. **ブライト・データ・アカウント** - 登録は[brightdata.comから](/) - [ウェブアンロッカーゾーンの作成](https://docs.brightdata.com/scraping-automation/web-unlocker/quickstart) - アカウント設定から[APIキーを取得する](https://docs.brightdata.com/api-reference/authentication) 2. **Google AI Studioアカウント** - [グーグルAIスタジオへ](https://aistudio.google.com/u/0/apikey) - 新しいAPIキーを作成する 3. **スーパーベース・プロジェクト** - [supabase.comに](https://supabase.com/)登録する - **新しい組織を作り**、新しいプロジェクトを立ち上げる。 - プロジェクトのダッシュボードで、\[*Edge Functions*\] →*\[Secrets*\] → \[**Add New Secret\]**を選択します。`BRIGHT_DATA_API_KEYや` `GEMINI_API_KEYなどの`シークレットをそれぞれの値で追加します。 4. **愛すべきアカウント** - [lovable.devに](https://lovable.dev/)登録する - **プロフィール**→**設定**→*統合* - *Supabase の*下にある**Connect Supabase**をクリックします。 - APIアクセスを承認し、作成したSupabase組織にリンクする。 ## Lovableのプロンプトでステップ・バイ・ステップでアプリケーションを構築する 以下は、フロントエンドからバックエンド、データベース、インテリジェントな解析まで、Webデータ抽出アプリを開発するための構造化されたプロンプトベースのフローです。 ![愛すべきチャット](https://media.brightdata.com/2025/07/Lovable-chat-1024x528.jpg)### ステップ1 – フロントエンドのセットアップ クリーンで直感的なユーザーインターフェイスをデザインすることから始める。 ```none Build a modern web data extraction app using React and Tailwind CSS. The UI should include: - A gradient background with card-style layout - An input field for the webpage URL - A textarea for the extraction prompt (e.g., "Extract product title, price, and ratings") - A display area to render structured JSON output - Responsive styling with hover effects and proper spacing ``` ### ステップ2 – Supabaseに接続し、認証を追加する。 Supabaseプロジェクトをリンクする： 1. Lovableの右上にある**Supabaseアイコンを**クリックします。 2. **コネクト・スーパーベースを**選択 3. 以前に作成した組織とプロジェクトを選択する LovableはあなたのSupabaseプロジェクトを自動的に統合します。リンクが完了したら、以下のプロンプトを使用して認証を有効にしてください： ```none Set up complete Supabase authentication: - Sign up and login forms using email/password - Session management and auto-persistence - Route protection for unauthenticated users - Sign out functionality - Create user profile on signup - Handle all auth-related errors ``` Lovableが必要なSQLスキーマとトリガーを生成します。 ### ステップ #3 – Supabaseデータベーススキーマの定義 抽出ア ク テ ィ ビ テ ィ を ロ グ ・ 格納す る ために必要なテーブルをセ ッ ト ア ッ プ し ます： ```none Create Supabase tables for storing extractions and results: - extractions: stores URL, prompt, user_id, status, processing_time, error_message - extraction_results: stores parsed JSON output Apply RLS policies to ensure each user can only access their own data ``` ### ステップ4 – Supabase Edge Functionの作成 この関数は、核となるスクレイピング、変換、抽出ロジックを処理する： ```none Create an Edge Function called 'extract-web-data' that: - Fetches the target page using Bright Data's Web Unlocker - Converts raw HTML to Markdown using Turndown - Sends the Markdown and prompt to Google Gemini AI (gemini-2.0-flash-001) - Returns clean structured JSON - Handles CORS, errors, and response formatting - Requires GEMINI_API_KEY and BRIGHT_DATA_API_KEY as Edge Function secrets Below is a reference implementation that handles HTML fetching using Bright Data, markdown conversion with Turndown, and AI-driven extraction with Gemini: import { GoogleGenerativeAI } from '@google/generative-ai'; import TurndownService from 'turndown'; interface BrightDataConfig { apiKey: string; zone: string; } // Constants const GEMINI_MODEL = 'gemini-2.0-flash-001'; const WEB_UNLOCKER_ZONE = 'YOUR_WEB_UNLOCKER_ZONE'; export class WebContentExtractor { private geminiClient: GoogleGenerativeAI; private modelName: string; private htmlToMarkdownConverter: TurndownService; private brightDataConfig: BrightDataConfig; constructor() { const geminiApiKey: string = 'GEMINI_API_KEY'; const brightDataApiKey: string = 'BRIGHT_DATA_API_KEY'; try { this.geminiClient = new GoogleGenerativeAI(geminiApiKey); this.modelName = GEMINI_MODEL; this.htmlToMarkdownConverter = new TurndownService(); this.brightDataConfig = { apiKey: brightDataApiKey, zone: WEB_UNLOCKER_ZONE }; } catch (error) { console.error('Failed to initialize WebContentExtractor:', error); throw error; } } /** * Fetches webpage content using Bright Data Web Unlocker service */ async fetchContentViaBrightData(targetUrl: string): Promise { try { // Append Web Unlocker parameters to the target URL const urlSeparator: string = targetUrl.includes('?') ? '&' : '?'; const requestUrl: string = `${targetUrl}${urlSeparator}product=unlocker&method=api`; const apiResponse = await fetch('https://api.brightdata.com/request', { method: 'POST', headers: { 'Authorization': `Bearer ${this.brightDataConfig.apiKey}`, 'Content-Type': 'application/json' }, body: JSON.stringify({ zone: this.brightDataConfig.zone, url: requestUrl, format: 'raw' }) }); if (!apiResponse.ok) { throw new Error(`Web Unlocker request failed with status: ${apiResponse.status}`); } const htmlContent: string = await apiResponse.text(); return htmlContent && htmlContent.length > 0 ? htmlContent : null; } catch (error) { console.error('Failed to fetch webpage content:', error); return null; } } /** * Converts HTML to clean Markdown format for better AI processing */ async convertToMarkdown(htmlContent: string): Promise { try { const markdownContent: string = this.htmlToMarkdownConverter.turndown(htmlContent); return markdownContent; } catch (error) { console.error('Failed to convert HTML to Markdown:', error); return null; } } /** * Uses Gemini AI to extract specific information from markdown content * Uses low temperature for more consistent, factual responses */ async extractInformationWithAI(markdownContent: string, userQuery: string): Promise { try { const aiPrompt: string = this.buildAIPrompt(userQuery, markdownContent); const aiModel = this.geminiClient.getGenerativeModel({ model: this.modelName }); const aiResult = await aiModel.generateContent({ contents: [{ role: 'user', parts: [{ text: aiPrompt }] }], generationConfig: { maxOutputTokens: 2048, temperature: 0.1, } }); const response = await aiResult.response; return response.text(); } catch (error) { console.error('Failed to extract information with AI:', error); return null; } } private buildAIPrompt(userQuery: string, markdownContent: string): string { return `You are a data extraction assistant. Below is some content in markdown format extracted from a webpage. Please analyze this content and extract the information requested by the user. USER REQUEST: ${userQuery} MARKDOWN CONTENT: ${markdownContent} Please provide a clear, structured response based on the user's request. If the requested information is not available in the content, please indicate that clearly.`; } /** * Main extraction workflow: fetches webpage → converts to markdown → extracts with AI */ async extractDataFromUrl(websiteUrl: string, extractionQuery: string): Promise { try { const htmlContent: string | null = await this.fetchContentViaBrightData(websiteUrl); if (!htmlContent) { console.error('Could not retrieve HTML content from URL'); return null; } const markdownContent: string | null = await this.convertToMarkdown(htmlContent); if (!markdownContent) { console.error('Could not convert HTML to Markdown'); return null; } const extractedInformation: string | null = await this.extractInformationWithAI(markdownContent, extractionQuery); return extractedInformation; } catch (error) { console.error('Error in extractDataFromUrl:', error); return null; } } } /** * Example usage of the WebContentExtractor */ async function runExtraction(): Promise { const TARGET_WEBSITE_URL: string = 'https://example.com'; const DATA_EXTRACTION_QUERY: string = 'Extract the product title, all available prices, ...'; try { const contentExtractor = new WebContentExtractor(); const extractionResult: string | null = await contentExtractor.extractDataFromUrl(TARGET_WEBSITE_URL, DATA_EXTRACTION_QUERY); if (extractionResult) { console.log(extractionResult); } else { console.log('Failed to extract data from the specified URL'); } } catch (error) { console.error(`Application error: ${error}`); } } // Execute the application runExtraction().catch(console.error); ``` Gemini AIに送信する前に[生のHTMLをMarkdownに](https://hackernoon.com/why-are-the-new-ai-agents-choosing-markdown-over-html)変換することには、いくつかの重要な利点がある。不要なHTMLのノイズを除去し、よりクリーンで構造化された入力を提供することでAIのパフォーマンスを向上させ、トークンの使用量を削減することで、より高速でコスト効率の高い処理につながります。 **重要な考慮事項：**Lovableは自然言語からアプリを構築することに長けていますが、*Bright Dataや* *Geminiの*ような外部ツールを適切に統合する方法を必ずしも認識しているとは限りません。正確な実装を保証するために、プロンプトにサンプルコードを含めてください。例えば、上記のプロンプトの`fetchContentViaBrightData`メソッドは、Bright Data の Web Unlocker の簡単な使用例を示しています。 Bright Dataは、[Web Unlocker](/products/web-unlocker)、[SERP API](/products/serp-api)、[Scraper APIなど](/products/web-scraper)複数のAPIを提供しており、それぞれにエンドポイント、認証方法、パラメータがあります。Bright Dataのダッシュボードで製品やゾーンを設定すると、**概要**タブに設定に合わせた言語固有のコードスニペット（Node.js、Python、cURL）が表示されます。これらのスニペットをそのまま使用するか、Edge Functionのロジックに合わせて変更してください。 ### ステップ #5 – フロントエンドをEdge Functionに接続する Edge関数の準備ができたら、Reactアプリに統合します： ```none Connect the frontend to the Edge Function: - On form submission, call the Edge Function - Log the request in the database - Update status (processing/completed/failed) after the response - Show processing time, status icons, and toast notifications - Display the extracted JSON with loading states ``` ### ステップ6 – 抽出履歴の追加 ユーザーに過去のリクエストを確認する方法を提供する： ```none Create a history view that: - Lists all extractions for the logged-in user - Displays URL, prompt, status, duration, and date - Includes View and Delete options - Expands rows to show extracted results - Uses icons for statuses (completed,failed,processing) - Handles long text/URLs gracefully with a responsive layout ``` ### ステップ#7 – UIの磨き上げと最終的な機能強化 便利なUIタッチで体験を洗練させる： ```none Polish the interface: - Add toggle between "New Extraction" and "History" - Create a JsonDisplay component with syntax highlighting and copy button - Fix responsiveness issues for long prompts and URLs - Add loading spinners, empty states, and fallback messages - Include feature cards or tips at the bottom of the page ``` ## 結論 この統合は、Supabaseによる安全なユーザーフロー、Bright Dataによる信頼性の高いスクレイピング、Geminiによる柔軟でAIを活用した解析など、最新のウェブオートメーションのベストを結集したものである。 ご自分で構築する準備はできていますか？[brightdata.comで](/)始めましょう。インフラに頭を悩ませることなく、どんなサイトにもスケーラブルにアクセスできる[Bright Dataのデータ収集ソリューションを](/products)ご覧ください。 お問い合わせ無料トライアル![google social icon](/wp-content/themes/brightdata/assets/images/ic_google.svg) 目次 日本企業向けデータソリューション 日本のトップ企業が信頼するスケーラブルなウェブデータプラットフォーム。日本語24時間サポート、GDPR・個人情報保護法準拠、日本企業20社以上の導入実績。 [詳細を見る](https://brightdata.jp/solutions/data-solutions-for-japanese-companies "詳細を見る") [ ](https://news.ycombinator.com/submitlink?t=Lovable%E3%80%81Supabase%E3%80%81Bright+Data%E3%81%AB%E3%82%88%E3%82%8B%E3%82%A6%E3%82%A7%E3%83%96%E3%83%87%E3%83%BC%E3%82%BF%E6%8A%BD%E5%87%BA%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E6%A7%8B%E7%AF%89&u=https://brightdata.jp/blog/ai/lovable-with-supabase-and-bright-data) [ ](https://www.linkedin.com/shareArticle?mini=true&title=Lovable%E3%80%81Supabase%E3%80%81Bright+Data%E3%81%AB%E3%82%88%E3%82%8B%E3%82%A6%E3%82%A7%E3%83%96%E3%83%87%E3%83%BC%E3%82%BF%E6%8A%BD%E5%87%BA%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E6%A7%8B%E7%AF%89&url=https://brightdata.jp/blog/ai/lovable-with-supabase-and-bright-data) [ ](http://www.reddit.com/submit?title=Lovable%E3%80%81Supabase%E3%80%81Bright+Data%E3%81%AB%E3%82%88%E3%82%8B%E3%82%A6%E3%82%A7%E3%83%96%E3%83%87%E3%83%BC%E3%82%BF%E6%8A%BD%E5%87%BA%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E6%A7%8B%E7%AF%89&url=https://brightdata.jp/blog/ai/lovable-with-supabase-and-bright-data) ## あなたは下記にもご興味がおありかもしれません [ ![OpenHuman with Bright Data](https://media.brightdata.jp/2026/09/OpenHuman-with-Bright-Data.png) ](https://brightdata.jp/blog/ai/openhuman-with-bright-data "Bright Data CLIを通じたOpenHumanにおける本番対応ウェブアクセス") [AI ![Antonello Zanini](https://media.brightdata.jp/2022/12/Antonello-Zanini-2-50x50.jpg) Antonello Zanini Technical Writer ### Bright Data CLIを通じたOpenHumanにおける本番対応ウェブアクセス Bright Data CLIをOpenHumanに統合して、AIエージェント向けの本番対応ウェブアクセスとデータ収集を実現します。 09-Sep-2026 3 分読 ](https://brightdata.jp/blog/ai/openhuman-with-bright-data) [ ![Multimodal Web Scraping with MiniMax](https://media.brightdata.jp/2026/09/Multimodal-Web-Scraping-with-MiniMax.png) ](https://brightdata.jp/blog/%e3%82%a6%e3%82%a7%e3%83%96%e3%83%87%e3%83%bc%e3%82%bf/multimodal-web-scraping-with-minimax "MiniMaxによるマルチモーダルウェブスクレイピング") [ウェブデータ ![Antonello Zanini](https://media.brightdata.jp/2022/12/Antonello-Zanini-2-50x50.jpg) Antonello Zanini Technical Writer ### MiniMaxによるマルチモーダルウェブスクレイピング Bright Data Web UnlockerとMiniMax M3ビジョンを組み合わせて、画像やウェブページのスクリーンショットから構造化データを抽出します。 09-Sep-2026 1 分読 ](https://brightdata.jp/blog/%e3%82%a6%e3%82%a7%e3%83%96%e3%83%87%e3%83%bc%e3%82%bf/multimodal-web-scraping-with-minimax) [ ![The 10 Best CLI Tools for Codex in 2026](https://media.brightdata.jp/2026/08/The-10-Best-CLI-Tools-for-Codex-in-2026.png) ](https://brightdata.jp/blog/ai/best-cli-tools-for-codex "2026年版 Codex向けCLIツール10選 – テスト＆ランキング") [AI ![Daniel Shashko](https://media.brightdata.jp/2022/04/Daniel-Shashko-2-50x50.png) Daniel Shashko Web Data & AI Expert ### 2026年版 Codex向けCLIツール10選 – テスト＆ランキング Codexをより速く、より有能にする10のCLIツール。サンドボックス内から実際のウェブアクセスを提供するBright Data CLIから始まります。 06-Sep-2026 4 分読 ](https://brightdata.jp/blog/ai/best-cli-tools-for-codex)