eBay、Amazon、Flipkart などの大手ストアからリアルタイムで商品データを簡単に取得できる e コマース プラットフォームを構築することを想像してみてください。確かに、Shopify や同様のサービスはありますが、正直に言うと、プロジェクトのためだけにサブスクリプションを購入するのは少し面倒に感じるかもしれません。そこで、これらのサイトをスクレイピングして製品をデータベースに直接保存してはどうだろうかと考えました。これは、当社の電子商取引プロジェクト用の製品を入手するための効率的かつコスト効率の高い方法となるでしょう。

Webスクレイピングとは何ですか?

Web スクレイピングには、Web ページの HTML を解析してコンテンツを読み取って収集することにより、Web サイトからデータを抽出することが含まれます。これには多くの場合、ブラウザの自動化や HTTP リクエストのサイトへの送信が含まれ、その後 HTML 構造を分析してテキスト、リンク、画像などの特定の情報を取得します。Puppeteer は、Web サイトをスクレイピングするために使用されるライブラリの 1 つです。

?パペッティアとは？

Puppeteer は Node.js ライブラリです。ヘッドレス Chrome または Chromium ブラウザを制御するための高レベル API を提供します。ヘッドレス Chrome は、UI なしですべてを実行する Chrome のバージョンです (バックグラウンドで実行するのに最適です)。 &&&]

puppeteer を使用すると、次のようなさまざまなタスクを自動化できます:

• Web スクレイピング: Web サイトからコンテンツを抽出するには、ページの HTML と JavaScript を操作する必要があります。通常、CSS セレクターをターゲットにしてコンテンツを取得します。
• PDF 生成: プログラムによる Web ページの PDF への変換は、スクリーンショットを撮ってからそのスクリーンショットを PDF に変換するのではなく、Web ページから PDF を直接生成する場合に最適です。 (追記: すでに回避策がある場合は申し訳ありません)。
• 自動テスト: ボタンをクリックする、フォームに記入する、スクリーンショットを撮るなどのユーザーアクションをシミュレートすることにより、Web ページ上でテストを実行します。これにより、すべてが適切に配置されていることを確認するために長いフォームを手動で処理するという面倒なプロセスが不要になります。

?Puppetter を始めるにはどうすればよいですか?

まずライブラリをインストールする必要があります。先に進んでこれを行ってください。

npm の使用:

npm i puppeteer # インストール中に互換性のある Chrome をダウンロードします。 npm i puppeteer-core # あるいは、Chrome をダウンロードせずにライブラリとしてインストールします。

npm i puppeteer # Downloads compatible Chrome during installation.
npm i puppeteer-core # Alternatively, install as a library, without downloading Chrome.

使用糸:

yarn add puppeteer // インストール中に互換性のある Chrome をダウンロードします。 yarn add puppeteer-core // または、Chrome をダウンロードせずにライブラリとしてインストールします。

npm i puppeteer # Downloads compatible Chrome during installation.
npm i puppeteer-core # Alternatively, install as a library, without downloading Chrome.

pnpm の使用:

pnpm add puppeteer # インストール中に互換性のある Chrome をダウンロードします。 pnpm add puppeteer-core # または、Chrome をダウンロードせずにライブラリとしてインストールします。

npm i puppeteer # Downloads compatible Chrome during installation.
npm i puppeteer-core # Alternatively, install as a library, without downloading Chrome.

? puppeteer の使用例を示す例

Web サイトをスクレイピングする方法の例を次に示します。 (追記: このコードを使用して、電子商取引プロジェクトの Myntra Web サイトから商品を取得しました。)

const puppeteer = require("puppeteer"); const カテゴリスキーマ = require("./models/Category"); // スクレイプ関数を名前付きの非同期関数として定義します const scrape = async () => { // 新しいブラウザ インスタンスを起動します const browser = await puppeteer.launch({ headless: false }); // 新しいページを開く const page = ブラウザを待ちます.newPage(); // ターゲット URL に移動し、DOM が完全にロードされるまで待ちます await page.goto('https://www.myntra.com/mens-sport-wear?rawQuery=メンズ スポーツウェア', { waitUntil: 'domcontentloaded' }); // すべてのコンテンツが確実にロードされるまでさらに時間を待ちます await new Promise((resolve) => setTimeout(resolve, 25000)); // ページから製品の詳細を抽出します const items = await page.evaluate(() => { // すべての製品要素を選択します const 要素 = document.querySelectorAll('.product-base'); const elementsArray = Array.from(elements); // 各要素を必要なプロパティを持つオブジェクトにマッピングします const results = elementsArray.map((要素) => { const image = element.querySelector(".product-imageSliderContainer img")?.getAttribute("src"); 戻る { 画像: 画像??ヌル、 ブランド: element.querySelector(".product-brand")?.textContent、 タイトル: element.querySelector(".product-product")?.textContent、 discountPrice: element.querySelector(".product-price .product-discountedPrice")?.textContent, actualPrice: element.querySelector(".product-price .product-strike")?.textContent, discountPercentage: element.querySelector(".product-price .product-discountPercentage")?.textContent?.split(' ')[0]?.slice(1, -1), total: 20, // プレースホルダーの値、必要に応じて調整します available: 10, // プレースホルダー値、必要に応じて調整します ratings: Math.round((Math.random() * 5) * 10) / 10 // デモンストレーション用のランダムな評価 }; }); 結果を返します。 // 製品の詳細のリストを返します }); // ブラウザを閉じます ブラウザを閉じるのを待ちます(); // データを保存する準備をします 定数データ = { カテゴリー: "メンズスポーツウェア"、 サブカテゴリ: "メンズ"、 リスト: アイテム }; // 新しいカテゴリドキュメントを作成し、データベースに保存します // 電子商取引ストアに商品情報を保存したいため、スキーマを使用してデータベースに保存します。 // データを保存する必要がない場合は、この手順を省略できます。 const category = 新しいカテゴリスキーマ(データ); コンソール.ログ(カテゴリ); category.save(); を待ちます。 // スクレイピングされたアイテムを返す 返品品。 }; // スクレイピング関数をデフォルトのエクスポートとしてエクスポートします module.exports = スクレイピング;

npm i puppeteer # Downloads compatible Chrome during installation.
npm i puppeteer-core # Alternatively, install as a library, without downloading Chrome.

？説明：

このコードでは、Puppeteer を使用して Web サイトから製品データを収集しています。詳細を抽出した後、スキーマ (CategorySchema) を作成してこのデータを構造化し、データベースに保存します。このステップは、スクレイピングした製品を e コマース ストアに統合する場合に特に役立ちます。データをデータベースに保存する必要がない場合は、スキーマ関連のコードを省略できます。
スクレイピングの前に、ページの HTML 構造を理解し、抽出するコンテンツがどの CSS セレクターに含まれているかを特定することが重要です。
私の場合は、Myntra Web サイトで特定された関連する CSS セレクターを使用して、対象とするコンテンツを抽出しました。