Crawl4AIで実現する動的コンテンツ対応スクレイピングとFlask UI構築術

はじめに

本記事を読めば、Crawl4AI を使った「動的コンテンツに対応したスクレイピング」と「UI付きFlaskアプリ」の構築方法がわかります。
具体的には、Playwright を内部で動かしながら JavaScript 実行結果を取得し、「もっと見る」ボタンや SPA（React/Vue/Angular）などの動的サイトにも対応可能なフルスタックスクレイピングを体験できます。
また、最後に掲載しているコードをそのまま実行すれば、ブラウザ経由で URL を入力し、Crawl4AI のスクレイピング結果を画面に表示できるアプリを動かせるようになります。

Clean mode: https://www.bbc.com/news

Basic mode: https://www.wikipedia.org

Dynamic mode: https://news.yahoo.co.jp

---

1. 背景と概要

1-1. 普通のスクレイピングとの違い

• 一般的なスクレイピング (requests + BeautifulSoup など)

  • HTML しか取得できないため、JavaScript で動的に生成されるコンテンツは見えない

  • 「もっと見る」ボタンなどを自動クリックしたり、ページ下部へのスクロールが必要なサイトの場合は、追加実装が必要

• Crawl4AI

  • 内部で Playwright を動かし、実際のブラウザ操作と同じ挙動でサイトを取得

  • JavaScript 実行後の最終的なページを丸ごと取得できる

  • 「自動スクロール」「もっと見るボタンのクリック」などの JavaScript コードを挿入できる

  • LLM（大規模言語モデル）を使った高度な抽出（要約・構造化）も可能

1-2. 今回のゴール

• Flask アプリを立ち上げ、

• ブラウザで URL とモードを指定して「Crawl」ボタンを押すだけで、

• 動的サイトを含むページのテキストをスクレイピングできるようにする。

---

2. よくあるエラー

1. Unsupported keyword エラー

   • wait_for_selector や wait_for_timeout などのパラメータは、現在の Crawl4AI バージョンではサポートされていない。

   • そのため、設定で余計な引数を渡すと「unexpected keyword argument」というエラーが出る。

2. 動的コンテンツの扱い

   • config.js_code に JavaScript を書くと、ページ読み込み後に実行される。

   • スクロールや「もっと見る」ボタンのクリックなどを自動化できる。

3. Flask + Hypercorn + asgiref

   • Flask は同期的なフレームワークだが、Crawl4AI は非同期処理を行う。

   • asgiref.wsgi.WsgiToAsgi と hypercorn.asyncio.serve を使い、Flask アプリを非同期で動かす。

4. UI付きサンプルコード

   • 最終的に、HTML テンプレートを返すエンドポイント (@app.route('/')) と

   • /crawl というエンドポイントで JSON リクエストを受け取り、Crawl4AI でクロールして結果を返す構成。

---

3. 実行手順

1. 必要なパッケージのインストール

pip install crawl4ai nest_asyncio asgiref hypercorn flask

1. ファイル構成

ファイル構成

bash
Copy
プロジェクトのディレクトリ構造は以下のようになります（app.py と templates フォルダを用意しましょう）。
.
├─ app.py               # Flaskサーバーのメインコード
└─ templates
    └─ index.html       # UI用のHTMLテンプレート

1. アプリを起動

python app.py

1. ブラウザで試す

   • ブラウザで http://localhost:5000 にアクセス

   • URL とモードを指定して「Crawl」ボタンを押す

   • 結果が JSON 形式で表示されます

---

4. 完成版コード

4-1. app.py (Flaskアプリ)