Web開発者向けのWebスクレイピング：簡単な要約

Webスクレイピングに対する1つのアプローチのみを知っていれば、短期的には問題は解決しますが、すべての方法には長所と短所があります。 これを認識することで時間を節約し、問題をより効率的に解決するのに役立ちます。







多数のリソースが、Webページからデータを取得する唯一の真の方法について語っています。 しかし、現実には、このためにいくつかのソリューションとツールを使用できます。

• Webページからプログラムでデータを取得するためのオプションは何ですか？
• 各アプローチの長所と短所は？
• クラウドリソースを使用して自動化の度合いを高める方法

この記事は、これらの質問に対する回答を得るのに役立ちます。



HTTPリクエスト、 DOM （ドキュメントオブジェクトモデル）、 HTML 、 CSSセレクター 、 非同期JavaScriptが何であるかを既に知っていると仮定します。



そうでない場合は、理論を詳しく調べてから記事に戻ることをお勧めします。

静的コンテンツ

HTMLソース



最も簡単なアプローチから始めましょう。



Webページのスクレイピングを計画している場合は、これが最初の開始点です。 コンピューターの電力はほとんど必要なく、最小限の時間で済みます。



ただし、これは、HTMLソースコードに対象のデータが含まれている場合にのみ機能します。 Chromeでこれをテストするには、ページを右クリックして[ページコードの表示]を選択します。 HTMLソースコードが表示されます。



データを見つけたら、後でリンクできるように、ラッピング要素に属するCSSセレクターを記述します。



実装のために、ページURLにHTTP GETリクエストを送信し、HTMLソースコードを取得できます。



Nodeでは 、 CheerioJSツールを使用して生のHTMLを解析し、セレクターを使用してデータを取得できます。 コードは次のようになります。

const fetch = require('node-fetch'); const cheerio = require('cheerio'); const url = 'https://example.com/'; const selector = '.example'; fetch(url) .then(res => res.text()) .then(html => { const $ = cheerio.load(html); const data = $(selector); console.log(data.text()); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

動的コンテンツ

多くの場合、DOMはバックグラウンドで実行されるJavaScriptによって制御されているため、未加工のHTMLから情報にアクセスすることはできません。 この典型的な例は、SPA（シングルページアプリケーション）です。HTMLドキュメントには最小限の情報が含まれており、実行時にJavaScriptが情報を入力します。



この状況での解決策は、ブラウザーと同様に、DOMを作成し、HTMLソースコードにあるスクリプトを実行することです。 その後、セレクタを使用してこのオブジェクトからデータを抽出できます。



ヘッドレスブラウザ



ヘッドレスブラウザーは通常のブラウザーと同じですが、ユーザーインターフェイスはありません。 バックグラウンドで実行され、マウスをクリックしてキーボードから入力する代わりに、プログラムで制御できます。



Puppeteerは 、最も人気のあるヘッドレスブラウザーの1つです。 これは使いやすいNodeライブラリで、Chromeをオフラインで管理するための高レベルAPIを提供します。 ヘッダーなしで実行するように構成でき、開発中に非常に便利です。 次のコードは以前と同じことを行いますが、動的ページでも機能します。

 const puppeteer = require('puppeteer'); async function getData(url, selector){ const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto(url); const data = await page.evaluate(selector => { return document.querySelector(selector).innerText; }, selector); await browser.close(); return data; } const url = 'https://example.com'; const selector = '.example'; getData(url,selector) .then(result => console.log(result));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

もちろん、Puppeteerを使用するとさらに興味深いことができるので、 ドキュメントを確認してください。 URLをナビゲートし、スクリーンショットを取得して保存するコードのスニペットを次に示します。

 const puppeteer = require('puppeteer'); async function takeScreenshot(url,path){ const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto(url); await page.screenshot({path: path}); await browser.close(); } const url = 'https://example.com'; const path = 'example.png'; takeScreenshot(url, path);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ブラウザーは、単純なGET要求を送信して応答を分析するよりもはるかに多くの処理能力を必要とします。 したがって、実行は比較的遅くなります。 それだけでなく、依存関係としてブラウザを追加すると、パッケージが巨大になります。



一方、この方法は非常に柔軟です。 これを使用して、ページのナビゲート、クリックのシミュレーション、マウスの動きとキーボードの使用、フォームへの入力、スクリーンショットの作成またはPDFページの作成、コンソールでのコマンドの実行、テキストコンテンツの抽出項目の選択を行うことができます。 基本的に、ブラウザで手動で実行できるすべてのこと。



DOMを構築する



DOMを作成するためだけにブラウザー全体をシミュレートする必要はないと思うでしょう。 実際、少なくとも特定の状況では、これは事実です。



Jsdomは、ブラウザが行うように、送信されるHTMLを解析するノードライブラリです。 ただし、これはブラウザではなく、 特定のHTMLソースコードからDOMを構築するためのツールであり 、このHTMLでJavaScriptコードを実行するためのツールです 。



この抽象化のおかげで、Jsdomはヘッドレスブラウザーよりも高速に実行できます。 速い場合は、常にヘッドレスブラウザーの代わりに使用しないでください。



ドキュメントから引用 ：

多くの場合、jsdomを使用すると、非同期でスクリプトを読み込むときに問題が発生します。 多くのページはスクリプトを非同期的に読み込みますが、これがいつ発生したか、したがっていつコードを実行して結果のDOM構造を検証するかを判断することは不可能です。 これは基本的な制限です。

このソリューションを例に示します。 100ミリ秒ごとに、要素が出現したか、タイムアウトが発生したか（2秒後）がチェックされます。



また、Jsdomがページに一部のブラウザー機能を実装していない場合、「 エラー：実装されていない：window.alert ...」または「エラー：実装されていない：window.scrollTo ... 」などのエラーメッセージも表示されます。 この問題は、いくつかの回避策（ 仮想コンソール ）でも解決できます 。



これは通常、Puppeteerよりも低レベルのAPIであるため、いくつかのことを自分で実装する必要があります。



例からわかるように、これにより使用が少し複雑になります。 Jsdomは同じ仕事に迅速なソリューションを提供します。



同じ例を見てみましょうが、 Jsdomを使用します 。

 const jsdom = require("jsdom"); const { JSDOM } = jsdom; async function getData(url,selector,timeout) { const virtualConsole = new jsdom.VirtualConsole(); virtualConsole.sendTo(console, { omitJSDOMErrors: true }); const dom = await JSDOM.fromURL(url, { runScripts: "dangerously", resources: "usable", virtualConsole }); const data = await new Promise((res,rej)=>{ const started = Date.now(); const timer = setInterval(() => { const element = dom.window.document.querySelector(selector) if (element) { res(element.textContent); clearInterval(timer); } else if(Date.now()-started > timeout){ rej("Timed out"); clearInterval(timer); } }, 100); }); dom.window.close(); return data; } const url = "https://example.com/"; const selector = ".example"; getData(url,selector,2000).then(result => console.log(result));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

リバースエンジニアリング



Jsdomは迅速で簡単なソリューションですが、さらにシンプルにすることもできます。



DOMをモデル化する必要がありますか？



スクラップするWebページは、同じHTMLとJavaScript、すでに知っている同じテクノロジーで構成されています。 したがって、 ターゲットデータの取得元のコードフラグメントが見つかった場合、同じ操作を繰り返して同じ結果を得ることができます 。



物事を簡素化するために、探しているデータは次のとおりです。

• ソースHTMLコードの一部（記事の最初の部分からわかるように）、
• HTMLドキュメントで参照される静的ファイルの一部（たとえば、javascriptファイルの行）、
• ネットワーク要求への応答（たとえば、一部のJavaScriptコードは、JSON文字列で応答するサーバーにAJAX要求を送信しました）。

これらのデータソースには、ネットワーククエリを使用してアクセスできます 。 WebページがHTTP、WebSocket、またはその他の通信プロトコルを使用するかどうかは問題ではありません。これらはすべて理論的に再現可能であるためです。



データを含むリソースを見つけたら、元のページと同じサーバーに同様のネットワーク要求を送信できます。 その結果、正規表現、文字列メソッド、JSON.parseなどを使用して簡単に抽出できるターゲットデータを含む回答が得られます。



簡単に言えば、すべての材料を処理してロードする代わりに、データが配置されているリソースを使用できます。 したがって、前の例で示した問題は、ブラウザーまたは複雑なJavaScriptオブジェクトを制御する代わりに、単一のHTTP要求で解決できます。



このソリューションは理論的には単純に見えますが、ほとんどの場合、時間がかかり、Webページとサーバーの経験が必要です。



ネットワークトラフィックを監視することから始めます。 これに最適なツールは、 Chrome DevToolsの [ ネットワーク ]タブです 。 すべての発信要求とその応答（静的ファイル、AJAX要求などを含む）が表示され、それらを繰り返し処理してデータを検索します。



画面に表示される前にコードによって回答が変更された場合、プロセスは遅くなります。 この場合、コードのこの部分を見つけて、何が起こっているのかを理解する必要があります。



ご覧のとおり、このような方法では、上記の方法よりもはるかに多くの作業が必要になる場合があります。 一方、最高のパフォーマンスを提供します。



この図は、JsdomとPuppeteerと比較した、必要なランタイムとパケットサイズを示しています。







結果は正確な測定値に基づくものではなく、異なる場合がありますが、これらの方法の間にはおおよその差があります。

クラウドサービスの統合

これらのソリューションのいずれかを実装したとします。 スクリプトを実行する1つの方法は、コンピューターの電源を入れ、ターミナルを開いて手動で起動することです。



しかし、面倒で非効率になるため、サーバーにスクリプトをアップロードするだけで、設定に応じて定期的にコードを実行することができればより良いでしょう。



これは、実際のサーバーを起動し、スクリプトを実行するタイミングを設定することで実行できます。 それ以外の場合、クラウド機能が簡単な方法です。



クラウド機能は、イベントが発生したときにロードされたコードを実行するように設計されたストレージです。 つまり、サーバーを管理する必要はありません。これはクラウドプロバイダーによって自動的に行われます。



トリガーは、スケジュール、ネットワーク要求、および他の多くのイベントです。 収集したデータをデータベースに保存したり、 Googleシートに書き込んだり、 電子メールで送信したりできます。 それはすべてあなたの想像力にかかっています。



人気のあるクラウドプロバイダー- アマゾンウェブサービス （AWS）、 Googleクラウドプラットフォーム （GCP）、およびMicrosoft Azure ：

• AWSラムダ
• GCPクラウド機能
• Azure関数

これらのサービスは無料で使用できますが、長くは使用できません。



Puppeteerを使用する場合、 Google Cloud 機能が最も簡単なソリューションです。 Headless Chrome形式のパッケージサイズ（約130 MB）は、AWS Lambdaの最大許容アーカイブサイズ（50 MB）を超えています。 Lambdaで動作させるにはいくつかの方法がありますが、GCP機能はデフォルトでヘッダーなしのChromeをサポートしているので、 package.jsonに依存関係としてPuppeteerを含めるだけです。



一般的なクラウド機能の詳細については、サーバーレスアーキテクチャの情報をご覧ください。 多くの優れたガイドがすでにこの主題について書かれており、ほとんどのプロバイダーはわかりやすいドキュメントを持っています。