最新の SPA、PWA、AI 駆動型動的サイトをスクレイピングする方法

❗免責事項: これは、高度な Web スクレイピングに関する 6 部構成のシリーズのパート 2 です。最初から始めたいですか?パート 1 を読んで追いつきましょう。

ウェブスクレイピングに興味があるなら、よくある課題のほとんどをすでによくご存知でしょう。しかし、ウェブは AI ブームのおかげで急速に変化しており、スクレイピングには数多くの新しい変数があります。ウェブスクレイピングの専門家としてレベルアップするには、それらすべてを把握する必要があります! 🔍

このガイドでは、高度な Web スクレイピング手法を紹介し、SPA、PWA、AI が混在する今日の最新サイトをスクレイピングする方法を解説します。💪

SPA、PWA、AI を活用したサイトとはどのようなものですか?

昔、ウェブサイトはウェブサーバーによって管理される静的なページの集まりに過ぎませんでした。しかし、現在ではウェブは活気に満ちた大都市のようになっています。🌇

私たちはサーバーサイドのレンダリングからクライアントサイドのレンダリングに移行しました。なぜでしょうか? モバイル デバイスがこれまで以上に強力になったため、負荷の一部を処理させるのは理にかなっているからです。📲

もちろん、あなたはすでにこれらすべてをご存知でしょう。しかし、私たちが今日ここにいる理由を知るには、出発点を知る必要があります。今日のインターネットには、静的サイト、動的サーバーレンダリングサイト、SPA、PWA、AI 駆動型サイトなどが混在しています。🕸️

心配しないでください。SPA、PWA、AI は政府機関の秘密の頭字語ではありません。このアルファベットの羅列を分解してみましょう。🥣

SPA: シングルページアプリケーション

SPA (シングル ページ アプリケーション) は文字通り 1 ページという意味ではありませんが、毎回すべてを再読み込みせずにナビゲーションを処理します。Netflixのようなものだと考えてください。クリックして、煩わしいページ再読み込みなしでコンテンツが瞬時に変化するのを見ることができます。🍿

スムーズかつ高速で、流れを維持できます。

PWA: プログレッシブウェブアプリ

PWA は、強化された Web アプリのようなものです。💊

技術的に言えば、PWA (プログレッシブ ウェブ アプリ) は最先端のウェブ機能を使用して、ブラウザーから直接ネイティブ アプリのような感覚を実現します。

• オフライン機能はありますか？✅

• プッシュ通知？✅

• キャッシュによりほぼ瞬時にロードできますか? ✅

  
  

ほとんどの場合、PWA をデバイスに直接インストールすることもできます。

AI を活用したサイト

AI を活用したサイトには、機械学習の魔法がちりばめられています。動的に生成されるデザインやチャットボットからパーソナライズされたおすすめまで、これらのサイトでは、まるでサイトがあなたのことを知っているかのような気分になります。🤖 ✨

単なるブラウジングではありません。ユーザーに合わせて調整されるインタラクティブな体験です。

ここが楽しいところ

これらのカテゴリーは相互に排他的ではありません。

これらをパフェのように重ねることができます。🍨 PWA は SPA にもなり、どちらも AI を活用して物事をよりスマートかつ高速化できます。つまり、少しワイルドになる可能性があるのです。

高度なデータスクレイピング: 今日の Web ジャングルをナビゲートする

簡単に言うと、SPA、PWA、AI を利用したサイトの台頭により、Web はより複雑になりました。つまり、Web スクレイピングはこれまで以上に困難になり、考慮すべき新しい要素が山ほどあるということです。😣

では、 Web 3.0についてはどうでしょうか? Web スクレイピングにどのような影響があるかを判断するのは時期尚早ですが、一部の専門家はすでに推測しています...

現代のサイトスクレイピングにおける最も一般的な（そして厄介な）障害を回避するための第一歩として、私たちの友人であるForrest Knightのこのビデオをご覧ください。第3章ではまさにあなたが探しているものがカバーされています。👇

では、最新のサイトで高度な Web スクレイピングを実行するときに考慮すべき点を見てみましょう。

⚠️警告:最初のいくつかのヒントが聞き覚えのある内容であっても、落胆しないでください。さらに深く掘り下げていくと、たくさんの新しい洞察が得られるので、そのまま読み進めてください! 🧠

AJAX とクライアント側レンダリングによる動的コンテンツ

最近では、ほとんどのサイトは JavaScript を介してクライアント側で完全にレンダリングされるか ( クライアント側レンダリング)、または、ユーザーがページを操作したときにデータを読み込んだりページのDOM を変更したりする動的なセクションがあります。

過去 10 年間にブラウザを使用したことがあるなら、私たちが何を言っているのかおわかりでしょう。この動的なデータ取得は魔法ではありません。AJAX テクノロジによって実現されています。(サッカー クラブ Ajax 🔴⚪ ではありません。ここでは別の種類の魔法です 😉)

おそらく、AJAX が何であるかはすでにご存知でしょうが、そうでない場合は、 MDN のドキュメントから始めるのが最適です。では、AJAX は Web スクレイピングにとって重要なのでしょうか?

Playwright、Selenium 、 Puppeteerなどのブラウザ自動化ツールを使用すると、スクリプトに AJAX リクエストを含む Web ページをブラウザに読み込むように指示できます。 最高のヘッドレス ブラウザ ツールの 1 つを入手するだけで準備完了です。

詳しいガイダンスについては、 Python で動的サイトをスクレイピングする方法についての完全なチュートリアルをお読みください。

🚨 でも、ちょっと待ってください…プロのヒントがあります！🚨

ほとんどの AJAX ベースのページは、API 呼び出しを通じて動的データを取得します。ページの読み込み中にブラウザの DevTools で[ネットワーク]タブを開くと、これらのリクエストをキャッチできます。

次のいずれかが表示されます:

• 異なるエンドポイントへの 1 つ以上のREST API 。

• GraphQL を使用してクエリできる、単一のエンドポイントへの 1 つ以上の GraphQL API 呼び出し。

  
  

どちらの場合も、これらの API 呼び出しを直接ターゲットにしてスクレイピングを行うことが可能となります。データを傍受して取得するだけです。とても簡単です! 🎉

簡単なウォークスルーについては、以下のビデオをご覧ください。

遅延読み込み、無限スクロール、動的ユーザーインタラクション

Web ページはこれまで以上にインタラクティブになり、デザイナーはユーザーの関心を引き続けるための新しい方法を常に模索しています。一方で、無限スクロールなどの一部のインタラクションは標準になっています。(Netflix を無限にスクロールし続けたことはありませんか?適切なシリーズを必ずチェックしてください!)

では、Web スクレイピングにおけるこうした複雑なやり取りにはどのように対処すればよいのでしょうか? ドラムロール...🥁

ブラウザ自動化ツールを使用！ （はい、また！🎉）

Playwrightのような最新のものには、一般的なインタラクションを処理するための組み込みメソッドがあります。では、それらのメソッドではカバーされていない独自の状況が発生した場合はどうでしょうか? 通常は、カスタム JavaScript コードを追加して対処できます。

特に：

• Playwright は、ページ上でカスタム JS を実行するためのassess()メソッドを提供します。

• Selenium は、ブラウザで JavaScript を実行できるexecute_script()を提供します。

  
  

おそらく、これらの基本事項はすでに理解されていると思いますので、ここで深く掘り下げる必要はありません。ただし、詳細を知りたい場合は、次の完全なガイドを参照してください。

• Playwright ウェブスクレイピング
• Selenium ウェブスクレイピング

PWA におけるコンテンツ キャッシュ

ここからが辛いところです！🌶️

PWA はオフラインで動作するように構築されており、キャッシュに大きく依存しています。これはエンドユーザーにとっては素晴らしいことですが、最新のデータを取得する必要があるため、Web スクレイピングにとっては頭痛の種となります。

では、スクレイピングの際、特に PWA を扱う際に、キャッシュをどのように処理するのでしょうか。ほとんどの場合、ブラウザ自動化ツールを使用することになります。結局のところ、PWA は通常、クライアント側でレンダリングされ、動的なデータ取得に依存しています。

良いニュースは？ブラウザ自動化ツールは、実行するたびに新しいブラウザセッションを開始します。また、Puppeteer と Playwright の場合は、デフォルトでシークレット モードで起動します。ただし、ここに落とし穴があります。シークレット/新しいセッションは、キャッシュや Cookie なしではありません! 🤯

スクレイピング スクリプトでサイトとやり取りする回数が増えるほど、ブラウザーがリクエストをキャッシュし始める可能性が高くなります (シークレット モードでも)。この問題に対処するには、ヘッドレス ブラウザーを定期的に再起動します。

または、Puppeteer を使用すると、簡単なコマンドでキャッシュを完全に無効にすることができます。

 await page.setCacheEnabled(enabled)

しかし、PWA の背後にあるサーバーがデータをキャッシュしている場合はどうなるでしょうか? それはまったく別の話です…👹

残念ながら、サーバー側のキャッシュについてはできることはあまりありません。同時に、一部のサーバーは、受信リクエストのヘッダーに基づいてキャッシュされた応答を提供します。したがって、 User-Agentなどのリクエスト ヘッダーを変更してみることができます。🔄

Web スクレイピングに最適なユーザーエージェントを見つけましょう。

コンテキスト固有のコンテンツ

ウェブサイトが、なぜ自分が興味を持ちすぎているコンテンツを表示するのか疑問に思ったことはありませんか? それは魔法ではなく、機械学習の働きによるものです。💡

今日では、ユーザーの好みに合わせてカスタマイズされたコンテンツを提供するウェブページが増えています。検索、サイトでのやり取り、購入、閲覧、その他のオンライン行動に基づいて、 ML アルゴリズムがユーザーの好みを理解し、ウェブページはそれに応じてコンテンツを提供します。

それは便利ですか？もちろんです。時間の節約になります！⏱️

それは倫理的でしょうか？まあ、あなたはその利用規約に同意したので... はい、そうしましょう。🤷

しかし、Web スクレイピングには課題があります。昔は、サイトの HTML 構造が時々変更されることだけを気にしていました。現在では、Web ページは継続的に変更され、訪問するたびに異なるエクスペリエンスが提供される可能性があるのです。

では、これをどのように処理すればよいでしょうか。一貫した結果を得るには、事前に保存されたセッションを使用してブラウザ自動化ツールを起動し、コンテンツが予測可能な状態を保つようにします。Playwright などのツールは、この目的のためにBrowserContextオブジェクトも提供します。

 const browserContext = await browser.newContext({ // load the context storage state from a JSON file storageState: "session.json" }); const page = await context.newPage();

パーソナライズされたコンテンツを避けるためには、言語や IP ロケーションなどのパラメータも標準化することを目指す必要があります。これらも表示されるコンテンツに影響を与える可能性があるためです。🗺️

最後にもう 1 つアドバイスがあります。スクレイピングを行う前に、必ずシークレット モードでサイトを調べてください。こうすることで、パーソナライズされたデータがない「白紙」のセッションが得られます。これにより、サイトで通常利用できるコンテンツをよりよく理解できるようになります。🥷

AI生成サイトとウェブページ

今、一番ホットな話題はAIです！🔥

AI は、サイトの構築方法のルールを書き換えています。かつては数か月かかっていた作業が、今では数秒または数分で完了します。⏱️

AI ベースの Web 構築テクノロジーがゲームにどのような変革をもたらしているかを簡単に知るには、次のビデオをご覧ください。

その結果、サイトのレイアウト、構造、デザインはかつてないほど速く変化しています。コンテンツも AI 処理の対象となり、編集者は大量のテキスト、画像、動画を瞬時に作成しています。⚡

そしてそれはまだ始まりに過ぎません…

クリックや検索に基づいてサイトが動的にページを生成できる未来を想像してみてください。まるでサイトがリアルタイムで変化し、各ユーザーに適応しているかのようです。

こうしたランダム性は、従来の Web スクレイピング スクリプトにとっては悪夢です。😱

しかし、その逆もあります。AI が Web サイトの更新を高速化するのと同じように、 AI を活用した Web スクレイピングを使用してスクリプトを即座に適応させることができます。さらに詳しく知りたいですか? Web スクレイピングのための AIに関するガイドをお読みください。

特にエラーを回避するためのもう 1 つの解決策は、ページの変更を監視し、スクリプトが中断する前に警告する独立したプロセスを作成することです。たとえば、Telegram メッセージを通じて警告します。📩

ページ変更の Telegram 通知ボットの構築方法をご覧ください。

AIボット検出: すべてのボット保護技術の母

これまで取り上げたほぼすべてのソリューションは、現代のサイトが高度にインタラクティブであることを前提としています。つまり、現代のサイトをスクレイピングするには、ブラウザ自動化ツールを使用する必要があります。しかし、このアプローチには弱点があります。それは、ブラウザ自体です。

ブラウザはスクレイピング用に作られていません! 😲

もちろん、拡張機能（ Puppeteer Extraなど）を使用して調整したり、上記のすべての調整を実装したりすることもできます。しかし、今日の AI 駆動型ボット検出により、特にサイトがユーザー行動分析などの高度なスクレイピング防止技術を採用している場合は、従来のブラウザがますます簡単に検出されるようになっています。

では、解決策は何でしょうか? 次のような強力なスクレイピング ブラウザです。

• 通常のブラウザのようにヘッダーモードで実行され、実際のユーザーに溶け込みます。

• クラウド内で簡単に拡張できるため、時間とインフラストラクチャのコストが節約されます。

• 最大かつ最も信頼性の高いプロキシ ネットワークの 1 つからローテーション IP を統合します。

• CAPTCHA を自動解決し、ブラウザのフィンガープリントを管理し、Cookie とヘッダーをカスタマイズしながら、再試行も自動的に処理します。

• Playwright、Selenium、Puppeteer などのトップクラスの自動化ツールとシームレスに連携します。

  
  

これは単なる未来的なアイデアではありません。それはここにあり、まさにBright Data の Scraping Browser が提供するものです。詳しく知りたいですか? このビデオをご覧ください:

最後に

これで、特に AI 駆動型 SPA や PWA に取り組む場合の、最新の Web スクレイピングに何が求められるかがわかりました。

ここではプロのヒントをいくつか学んだと思いますが、これは高度な Web スクレイピングに関する 6 部構成の冒険の第 2 部に過ぎないことを覚えておいてください。シートベルトを締めたままにしておいてください。これからさらに最先端の技術、巧妙なソリューション、内部のヒントについて詳しく説明していきます。

次は？より高速でスマートなスクレーパーのための最適化の秘訣！🚀