この作品について
URLを貼って「商品名と価格を表で」と日本語で指示するだけで、AIがWebページから欲しいデータを表・CSV・JSONで抜き出すツール。CSSセレクタもコードも不要。JavaScriptで描画される動的サイトにも対応し、これまでエンジニアに頼むしかなかったデータ収集を誰でも3ステップで完結できる。
Summary
この作品の要点
- 非エンジニアでもWebデータ収集ができるようになった。
Problem
困りごとと、解き方
スクレイピングにはCSSセレクタとコードの知識が必要
自然言語の指示をAIが解釈して抽出ルールを自動生成
動的サイトは通常のスクレイピングでは取得できない
ヘッドレスブラウザで描画後のDOMから確実に取得
毎回エンジニアに依頼するとコストと時間がかかる
CSV/JSONで business ツールにそのまま流し込める
Result
できあがったもの
成果
- 非エンジニアでもWebデータ収集が可能に
- セレクタ探しの工程を丸ごと不要化
- 動的サイト対応でカバー範囲を大幅拡大
見どころ
- URLを貼って日本語で指示するだけでデータ抽出
- CSSセレクタ・コード記述が一切不要
- JavaScript描画の動的サイトにも対応
- 表・CSV・JSONでそのまま使える形式に出力
How
どう作ったか
- 企画・UI設計・フルスタック開発・生成AI統合
- Next.js・TypeScript・Tailwind CSS・生成AI・ヘッドレスブラウザ・CSV/JSON出力
主要機能
- URLを貼って日本語で指示するだけでデータ抽出
- 自然言語の指示をAIが解釈して抽出ルールを自動生成
- CSSセレクタ・コード記述が一切不要
- ヘッドレスブラウザで描画後のDOMから確実に取得
- JavaScript描画の動的サイトにも対応
- CSV/JSONで business ツールにそのまま流し込める
技術的詳細
- AI・連携・データ
- 生成AI / ヘッドレスブラウザ / CSV/JSON出力
活用シーン
- スクレイピングにはCSSセレクタとコードの知識が必要
- 自然言語の指示をAIが解釈して抽出ルールを自動生成
- 動的サイトは通常のスクレイピングでは取得できない
- ヘッドレスブラウザで描画後のDOMから確実に取得
- 毎回エンジニアに依頼するとコストと時間がかかる
- CSV/JSONで business ツールにそのまま流し込める
Next
この作品に近いものを作りたい
同じ種類の制作実績（Webアプリ）
似た課題を解いた他の事例です。
