開発しているAIエージェントが、思ったほど賢くないと感じることはありませんか？
プロンプトエンジニアリングに時間を費やし、最新のLLMモデルに切り替えても、回答が的外れだったり、存在しない情報を自信満々に語ったりすることがあります。いわゆる「ハルシネーション（幻覚）」です。
ここでモデルの性能を疑いがちですが、実務の現場では、問題の根本が「Input（入力データ）」にあるケースが非常に多く見受けられます。
特にWeb上の情報をリアルタイムに収集して回答するRAG（検索拡張生成）システムの場合、データ収集プロセスがボトルネックになりがちです。
もし、BeautifulSoup や Requests だけでスクレイピングをしているなら、それは「目隠しをしたまま」AIに道を教えようとしているのと同じことかもしれません。
現代のWebは、JavaScriptが主役のSPA（シングルページアプリケーション）が主流です。HTMLがサーバーから届いた時点では、肝心の中身はまだ空っぽということも珍しくありません。
今回は、ブラウザ自動化ツール Playwright を活用し、AIエージェントに「完全な視界」を与えるための実践的なアプローチを解説します。
これは単なるスクレイピングの手法ではなく、ビジネスの現場で即座に機能する「高品質なコンテキスト取得パイプライン」を構築するための第一歩です。
なぜAIエージェントには「待てる」ブラウザが必要なのか
従来の静的なスクレイピング（requests.get() して BeautifulSoup でパースする手法）は、サーバーから返ってきた初期HTMLしか見ることができません。
しかし、ReactやVue.jsで作られたモダンなWebサイトでは、初期HTMLには <div id="root"></div> しか書かれておらず、その後JavaScriptが非同期でAPIを叩き、データを取得して初めて画面にコンテンツが表示される構造が一般的です。
静的スクレイピングでは、この重要な「中身」が取得できません。結果として、AIには空っぽのタグやローディング表示のテキストだけが渡されることになります。
「申し訳ありませんが、そのページには情報がありませんでした」とAIが答えるならまだしも、最悪なのは、断片的な情報からAIが勝手にストーリーを捏造してしまうことです。これではビジネス要件を満たすシステムとは言えません。
静的取得 vs 動的レンダリングの壁
AIエージェントに必要なのは、人間がブラウザで見ているのと同じ「レンダリング後の状態（DOM）」です。
ここでPlaywrightの出番となります。Seleniumよりも高速で、モダンなWeb標準に準拠し、非同期処理（async/await）との相性も抜群です。プロトタイプを素早く構築し、仮説を即座に検証するアジャイルな開発スタイルに非常に適しています。
Playwrightはヘッドレスブラウザ（GUIを持たないブラウザ）を立ち上げ、JavaScriptを実行し、DOMが完成するのを「待つ」ことができます。
この「待つ」という行為こそが、データ品質を劇的に向上させ、AIモデルの真のポテンシャルを引き出す鍵となります。
Tip 1: 「networkidle」でロード完了を確実に捉える
スクレイピングの実装でよく見られるミスとして、time.sleep(5) のような固定時間の待機を入れてしまうことが挙げられます。
5秒で読み込みが終わる保証はなく、逆に1秒で終わるページで4秒も無駄に待つことになります。AIエージェントにとって、レスポンス速度はUXそのものであり、ビジネス価値に直結します。無駄な待機は徹底的に排除すべきです。
Playwrightには、よりスマートで実践的な待ち方が用意されています。
ネットワーク活動が落ち着く瞬間を待つ実装法
page.goto() のオプションや、page.waitForLoadState() を使うことで、「ネットワーク通信がアイドル状態（静かになった状態）になるまで待つ」ことが可能です。
import asyncio
from playwright.async_api import async_playwright
async def fetch_dynamic_content(url: str):
async with async_playwright() as p:
browser = await p.chromium.launch(headless=True)
page = await browser.new_page()
# ネットワーク接続が500ms以上ない状態（networkidle）になるまで待機
# タイムアウトは30秒に設定（適宜調整）
try:
await page.goto(url, wait_until='networkidle', timeout=30000)
except Exception as e:
print(f"Loading timeout or error: {e}")
# タイムアウトしてもその時点のDOMを取得するなどのフォールバックが必要
content = await page.content()
await browser.close()
return content
wait_until='networkidle' は非常に強力な機能です。これは「最低500ミリ秒間、新たなネットワークリクエストが発生しなかった」時点をロード完了とみなします。
ただし、チャットウィジェットや定期的なポーリングを行っているサイトでは、永遠にアイドル状態にならないこともあります。その場合は domcontentloaded を使うか、特定の要素が表示されるのを page.wait_for_selector('div.main-content') で待つなど、状況に応じた柔軟な対応が求められます。
Tip 2: 画像・CSSを遮断してトークンと時間を節約する
AIエージェントが解釈するのはテキスト情報です。美しい背景画像も、洗練されたCSSアニメーションも、LLMにとってはノイズとなりえます。
それどころか、画像のロードは帯域幅を消費し、スクレイピングの完了時間を遅らせます。これをブロックすることで、処理速度を劇的に向上させ、サーバーへの負荷も軽減できます。リソースの最適化は、システム全体のパフォーマンス向上に不可欠です。
route.abort() によるリソース制御
Playwrightの page.route() 機能を使えば、特定のリクエストパターンをインターセプトして遮断できます。
async def fetch_text_only(page):
# 画像、スタイルシート、フォントをブロック
await page.route("**/*", lambda route:
route.abort()
if route.request.resource_type in ["image", "stylesheet", "font", "media"]
else route.continue_()
)
await page.goto("https://example.com", wait_until='domcontentloaded')
この数行を追加するだけで、データ取得速度が飛躍的に向上する可能性があります。特に画像が多いニュースサイトやECサイトでは非常に効果的です。
AIにとっては「テキスト構造」こそが本質的な情報です。見た目の装飾は大胆に切り捨て、最短距離で必要なデータにアクセスする設計を心がけましょう。
Tip 3: AIが読みやすい形式へ：HTMLからMarkdownへの変換
Playwrightで取得した page.content() は生のHTMLです。これをそのままLLMのプロンプトに渡してはいないでしょうか。
HTMLタグ（<div>, <span>, class="..."）は大量のトークンを消費する割に、意味的な情報はほとんど含まれていません。LLMのコンテキストウィンドウは有限であり、コストにも直結します。不要なデータで埋め尽くすのは避けるべきです。
主要コンテンツのみを抽出するロジック
取得したDOMから主要なテキストを抽出し、Markdown形式に変換して渡すのが、極めて効率的な手法です。Pythonなら html2text や BeautifulSoup を組み合わせて前処理を行うことができます。
from bs4 import BeautifulSoup
import html2text
def clean_html_to_markdown(html_content):
soup = BeautifulSoup(html_content, 'html.parser')
# 不要なタグを削除（スクリプト、スタイル、ナビゲーション、フッターなど）
for tag in soup(['script', 'style', 'nav', 'footer', 'iframe', 'svg']):
tag.decompose()
# Markdownへ変換
converter = html2text.HTML2Text()
converter.ignore_links = False
markdown = converter.handle(str(soup))
return markdown
Playwright側でも、評価関数（evaluate）を使ってブラウザ内で不要なDOMを削除してからHTMLを取得するというアプローチもあります。
# ブラウザ内で直接クリーニングを実行
await page.evaluate("""
document.querySelectorAll('script, style, nav, footer').forEach(el => el.remove());
""")
content = await page.content()
このように、単にデータを取得するだけでなく「LLMが消化しやすい形」に加工してから提供することが、AIパイプライン最適化の要となります。
Tip 4: ヘッドレスモード検知を回避する「人間らしさ」の演出
最近のWebサイトは防衛機能が非常に高くなっています。Cloudflareなどのボット検知システムは、リクエストヘッダーやブラウザの指紋（Fingerprint）を解析して、Botか人間かを判断しています。
デフォルトのPlaywright（ヘッドレスモード）でアクセスすると、navigator.webdriver というプロパティが true になっており、自ら「私は自動化ブラウザです」と通知しているようなものです。これではブロックされ、AIエージェントは必要なデータを取得できなくなる可能性があります。
User-Agentだけでは不十分
単にUser-AgentをChromeに変えるだけでは不十分です。より高度な対策が求められるケースが増えています。
Pythonには playwright-stealth というパッケージがありますが、標準機能でも十分に対策可能です。ブラウザコンテキスト作成時に引数を渡すことで、webdriverプロパティを隠蔽できます。
async with async_playwright() as p:
# Chromeの実ブラウザに近い引数を設定
browser = await p.chromium.launch(headless=True)
context = await browser.new_context(
user_agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) ...", # 実際のブラウザのUA
viewport={'width': 1920, 'height': 1080},
locale='ja-JP',
# webdriverプロパティを隠す引数
java_script_enabled=True,
bypass_csp=True
)
# 追加のスクリプトでnavigator.webdriverを削除
await context.add_init_script("Object.defineProperty(navigator, 'webdriver', {get: () => undefined})")
page = await context.new_page()
# ...以降の処理
データガバナンスの観点から、倫理的なスクレイピング（robots.txtの遵守やアクセス頻度の制御）は大前提です。しかし、公開情報を正当に取得しようとしているのにブロックされるのを防ぐための実践的な対策として、このテクニックは確実に押さえておきましょう。
Tip 5: トレースビューアで「AIが見た世界」をデバッグする
開発を進める中で、「なぜか要素が見つからない」「タイムアウトする」というエラーに直面することは日常茶飯事です。
ログだけを見ていても原因が特定できないことも多々あります。そんなとき、Playwrightの Trace Viewer が強力な武器となります。
これはスクレイピングの実行過程を録画し、タイムライン、ネットワークログ、コンソール出力、そしてその瞬間のDOMスナップショットをGUIで視覚的に確認できる機能です。
失敗した瞬間のスナップショット確認
# トレースの開始
await context.tracing.start(screenshots=True, snapshots=True, sources=True)
try:
# ... スクレイピング処理 ...
await page.goto(url)
finally:
# 処理終了後（エラー時含む）にトレースを保存
await context.tracing.stop(path = "trace.zip")
保存された trace.zip を playwright show-trace trace.zip コマンドで開くと、ブラウザの内部で何が起きていたかが一目瞭然になります。
「ここでポップアップが出て邪魔していたのか」「ネットワークが混雑していたのか」といった根本原因を即座に特定できます。
AIエージェントの開発は、いわば「見えないロボット」の制御です。こうした可視化ツールを駆使し、仮説検証のサイクルを高速に回すことこそが、システムを安定稼働へと導く最短距離となります。
まとめ：堅牢なデータパイプラインが賢いAIを作る
今回は、AIエージェントのためのデータ取得にPlaywrightを活用する5つの実践的なテクニックを解説しました。
- Networkidle: 動的コンテンツの読み込み完了を待つ。
- Resource Block: 画像やCSSを遮断して高速化する。
- HTML to Markdown: LLMに渡す前に情報を加工する。
- Stealth: 人間らしい振る舞いでブロックを回避する。
- Trace Viewer: 実行プロセスを可視化してデバッグする。
これらを組み合わせることで、AIエージェントは「幻覚」を見る回数が減り、より正確で、ビジネスの現場で信頼できるパートナーへと進化するはずです。
まずは手元のスクリプトから、動くプロトタイプを作って試してみてください。入力データが改善されれば、AIの出力は劇的に変わります。皆さんのプロジェクトで、その変化をぜひ実感していただければと思います。何か疑問があれば、ぜひ深掘りして検証してみてください。
コメント