効率的な Web スクレイピング:ブラウザ コンソールを使用して JavaScript でデータを抽出および保存する

プラヴィーン・ダベイ著

少し前まで、サイトをクロールしてリンクを取得し、さらにそれらのページ リンクを使用して Selenium または puppeteer を使用してデータをクロールする必要がありました。サイトのコンテンツのセットアップが少し奇妙だったので、Selenium と Node を直接開始することができませんでした。また、残念なことに、サイト上のデータは膨大でした。私は、最初にすべてのリンクをクロールし、各ページの詳細をクロールするためにリンクを渡すというアプローチを急いで考え出す必要がありました。

そこで私は、ブラウザーのコンソール API に関するこの素晴らしい機能を学びました。これは単なる JavaScript であるため、大きな設定をせずにどの Web サイトでも使用できます。

技術的な詳細に移りましょう。

概要

ページ上のすべてのリンクをクロールするために、コンソールに小さな JS を書きました。この JavaScript はすべてのリンクをクロールし (ページネーションも行うため、1 ～ 2 時間かかります)、json をダンプします。 クロールされたすべてのデータを含むファイル。留意すべき点は、Web サイトが単一ページのアプリケーションと同様に動作することを確認する必要があるということです。 それ以外の場合、複数のページをクロールする場合にページはリロードされません。 そうしないと、コンソール コードが失われます。

[中] では、一部のシナリオではページが更新されません。ここでは、ストーリーをクロールし、スクラップ後にコンソールからスクレイピングされたデータをファイルに自動的に保存してみましょう。

ただし、その前に、最終的な実行の簡単なデモをここに示します。

デモ

1.ブラウザからコンソール オブジェクト インスタンスを取得します

// Console API to clear console before logging new data

console.API;

if (typeof console._commandLineAPI !== 'undefined') { console.API = console._commandLineAPI; //chrome

} else if (typeof console._inspectorCommandLineAPI !== 'undefined'){ console.API = console._inspectorCommandLineAPI; //Safari

} else if (typeof console.clear !== 'undefined') { console.API = console;

}

このコードは、ユーザーの現在のブラウザに基づいてコンソール オブジェクト インスタンスを取得しようとしているだけです。無視して、インスタンスをブラウザに直接割り当てることができます。

例:Chrome を使用している場合 、以下のコードで十分です。

if (typeof console._commandLineAPI !== 'undefined') { console.API = console._commandLineAPI; //chrome

}

2.ジュニアヘルパー関数の定義

現在、ブラウザで Medium ストーリーを開いていると仮定します。 6 行目から 12 行目は、ストーリーのタイトル、拍手回数、ユーザー名、プロフィール画像の URL、プロフィールの説明、 ストーリーの読み取り時間を抽出するために使用できる DOM 要素属性を定義します。

これらは、この物語で私が示したい基本的なものです。ストーリー、すべての画像、埋め込みリンクからリンクを抽出するなど、さらにいくつかの要素を追加できます。

3.シニアヘルパー機能の定義 — 野獣

ページをクロールしてさまざまな要素を探しているので、それらをコレクションに保存します。このコレクションはメイン関数の 1 つに渡されます。

関数名 console.save を定義しました。 。この関数のタスクは、渡されたデータを含む csv / json ファイルをダンプすることです。

データを使用して Blob オブジェクトを作成します。 Blob object は、不変の生データのファイルのようなオブジェクトを表します。 BLOB は、必ずしも JavaScript ネイティブ形式であるとは限らないデータを表します。

作成された BLOB はリンク タグ < に添付されます;a> クリック イベントがトリガーされます。

console.save の簡単なデモは次のとおりです。 array が小さい場合 データとして渡されます。

コードのすべての部分をまとめると、次のようになります。

<オル>

コンソール API インスタンス

要素を抽出するヘルパー関数

ファイルを作成するためのコンソール保存機能

ブラウザで console.save() を実行して、データをファイルに保存しましょう。このためには、Medium のストーリーに移動し、ブラウザ コンソールでこのコードを実行します。

単一のページからデータを抽出するデモを示しましたが、同じコードを調整して、出版社のホームページから複数のストーリーをクロールすることができます。 freeCodeCamp の例を見てみましょう。 あるストーリーから別のストーリーに移動し、（ブラウザの戻るボタンを使用して）戻ることができます。 ページを更新せずにサイト運営者のホームページに移動します。

以下は、出版社のホームページから複数のストーリーを抽出するために必要な最低限のコードです。

複数のストーリーからプロフィールの説明を取得するコードの動作を見てみましょう。

このような種類のアプリケーションの場合、データを破棄したら、それを console.save に渡すことができます。 関数を作成してファイルに保存します。

コンソール保存機能はコンソール コードにすぐに追加でき、ファイル内のデータをダンプするのに役立ちます。私はあなたが持っていると言っているのではありません コンソールを使用してデータをスクレイピングすることもできますが、CSS セレクターを使用して DOM を操作することに慣れているため、場合によってはこの方法のほうが手っ取り早いこともあります。

コードは Github からダウンロードできます

この記事を読んでいただきありがとうございます!多くの設定を行わずにデータをすばやくスクレイピングするという素晴らしいアイデアが得られたことを願っています。面白かったら拍手ボタンを押してください！ご質問がある場合は、電子メール (praveend806 [at] gmail [dot] com) をお送りください。

コンソールについて詳しく知るためのリソース:

コンソールの使用 | Web 開発者向けツール | Google 開発者
_Chrome DevTools JavaScript コンソールの操作方法については、こちらをご覧ください。_developers.google.comブラウザ コンソール
_ブラウザ コンソールは Web コンソールに似ていますが、単一のコンテンツ タブではなくブラウザ全体に適用されます。_developer.mozilla.orgBlob
_Blob オブジェクトは、不変の生データのファイルのようなオブジェクトを表します。 BLOB は、必ずしも…_developer.mozilla.org

に存在するとは限らないデータを表します。

無料でコーディングを学びましょう。 freeCodeCamp のオープンソース カリキュラムは、40,000 人以上の人々が開発者としての職に就くのに役立ちました。始めましょう