【ChatGPT】英語解説を日本語で読む【2023年4月25日｜@Beyond Fireship】

PuppeteerとBrightDataのスクレイピングブラウザを使って、高度なウェブスクレイピング技術を学びます。Amazonなどのサイトからeコマースデータを収集し、ChatGPTでそのデータを分析します。
公開日：2023年4月25日
※動画を再生してから、インタビューを読むのがオススメです。

---

The internet is packed with useful data, but unfortunately that data is often buried deep within a mountain of complex HTML.

インターネットには有用なデータがたくさんありますが、残念ながらそのデータは複雑なHTMLの山の奥深くに埋もれていることが多いのです。

The term data mining is the perfect metaphor because you literally have to dig through a bunch of useless dirty markup to extract the precious raw data you're looking for.

データマイニングという言葉は、文字通り、探している貴重な生データを抽出するために、役に立たない汚いマークアップの束を掘り起こさなければならないので、完璧な比喩と言えるでしょう。

One of the most common ways to make money on the internet is with e-commerce and dropshipping, but it's highly competitive and you need to know what to sell and when to sell it.

インターネットでお金を稼ぐ最も一般的な方法の1つはEコマースとドロップシッピングですが、競争が激しく、何をいつ売ればいいのかを知っておく必要があります。

Don't worry, I'm not about to scam you with my own dropshipping masterclass.

心配しないでください、私はドロップシッピングのマスタークラスであなたを騙すつもりはありません。

Instead, I'm going to teach you about web scraping with a headless browser called Puppeteer.

その代わり、Puppeteerというヘッドレスブラウザを使ったウェブスクレイピングについて教えるつもりです。

It allows you to extract data from virtually any public-facing website, to access precious data, even for websites like Amazon that don't offer an API.

Puppeteerを使えば、AmazonのようにAPIを提供していないウェブサイトであっても、ほぼすべての一般向けウェブサイトからデータを抽出し、貴重なデータにアクセスすることができます。

What we'll do is find trending products on websites like Amazon and eBay, build up a data set, and then bring in AI tools like GPT-4 to analyze the data.

やることは、AmazonやeBayのようなウェブサイトでトレンドの商品を見つけ、データセットを構築し、GPT-4のようなAIツールを持ち込んでデータを分析することです。

We'll write reviews, write advertisements, and automate virtually any other task you might need.

レビューを書いたり、広告を書いたり、その他必要な作業をほぼすべて自動化します。

In addition, I'll teach you some tricks with ChatGPT to write your web scraping code way faster, which is historically very annoying code to write.

さらに、ChatGPTを使って、歴史的に非常に煩わしいコードであるウェブスクレイピングのコードをずっと速く書くためのトリックもお教えします。

But first, there's a big problem.

しかしその前に、大きな問題があります。

Big e-commerce sites like Amazon don't love big traffic like bots and will block your IP address or make you solve captchas if they suspect you're not a human.

Amazonのような大きなECサイトはボットのような大きなトラフィックを好まず、人間ではないと疑えばIPアドレスをブロックしたり、キャプチャを解かせたりします。

But, that's kind of racist to non-biological life.

しかし、それは生物以外の生命に対する差別のようなものです。

Luckily, Brightdata, the sponsor of today's video, provides a special tool called the Scraping Browser.

幸いなことに、今日のビデオのスポンサーであるBrightdataは、Scraping Browserという特別なツールを提供しています。

It runs on a proxy network and provides a variety of built-in features like captcha solving, fingerprints, retries, and so on that allow you to scrape the web at an industrial scale.

これはプロキシネットワーク上で動作し、キャプチャ解決、指紋、再試行などのさまざまな組み込み機能を提供し、産業規模でウェブをスクレイピングすることができます。

That being said, if you're serious about extracting data from the web, you'll very likely need a tool that does automated IP address rotation and you can try Brightdata for free using this code.

とはいえ、ウェブからデータを抽出することを真剣に考えるなら、自動IPアドレスローテーションを行うツールが必要になる可能性が非常に高く、このコードを使って無料でBrightdataを試すことができます。

After you sign up for an account, you'll notice a product called the Web Scraper IDE.

アカウントにサインアップすると、Web Scraper IDEと呼ばれる製品に気づくでしょう。

We're not going to use it in this video, however, if you're serious about web scraping, it provides a bunch of templates and additional tools that you'll likely want to take advantage of.

このビデオでは使いませんが、もしあなたが本気でウェブスクレイピングに取り組んでいるのであれば、テンプレートや追加ツールがたくさん用意されているので、それを活用するのがいいでしょう。

As a developer myself, I want full control over my workflow.

私自身は開発者として、ワークフローを完全にコントロールしたいのです。

So, for that, I'm going to use an open-source tool from Google called Puppeteer.

そこで、Puppeteerと呼ばれるGoogleのオープンソースツールを使うことにしています。

It is a headless browser that allows you to view a website like an end user, and interact with it programmatically by executing JavaScript, clicking on buttons, and doing everything else a user can do.

これはヘッドレスブラウザで、エンドユーザーのようにウェブサイトを表示し、JavaScriptを実行したり、ボタンをクリックしたり、ユーザーができることすべてを行うことで、プログラム的にウェブサイトと対話することができる。

That's pretty cool, but if you use it a lot on the same website, they'll eventually flag your IP and ban you from using it.

これはかなりクールだが、同じウェブサイトで何度も使っていると、いずれIPフラグを立てられ、使用禁止にされる。

Then, your mom will be pissed that she can no longer order her groceries from Walmart.com.

そうなれば、お母さんはWalmart.comで食料品を注文できなくなったと怒ることになります。

That's where the scraping browser comes in.

そこで登場するのがスクレイピング・ブラウザです。

It's a remote browser that uses the proxy network to avoid these problems.

プロキシネットワークを利用して、このような問題を回避するリモートブラウザなのです。

To get started, I'm creating a brand new Node.js project with npm, and then installing Puppeteer.

まず、npmで新しいNode.jsプロジェクトを作成し、Puppeteerをインストールします。

Well, actually Puppeteer Core, which is the automation library without the browser itself, because again, we're connecting to a remote browser.

まあ、実際にはPuppeteer Coreをインストールするのだが、これはブラウザそのものを含まない自動化ライブラリであり、今回もリモートブラウザに接続するからだ。

Now go ahead and create an index.js file and import Puppeteer.

次に、index.jsファイルを作成し、Puppeteerをインポートします。

From there, we'll create an async function called run that declares a variable for the browser itself.

そこから、runという非同期関数を作成し、ブラウザ自体の変数を宣言します。

Inside this try catch block, we'll try to connect to the browser.

このtry catchブロックの中で、ブラウザへの接続を試行します。

If it throws an error, we'll make sure to console log that error.

エラーが発生した場合は、コンソールログに記録するようにします。

And then finally, when all of our scraping is done, we'll want to automatically close the browser.

そして最後に、すべてのスクレイピングが終了したら、ブラウザを自動的に閉じます。

You don't want to leave the browser opened unintentionally.

意図せずブラウザを開いたままにしておくのは避けたいものです。

Now inside of try, we're going to await a Puppeteer connection that uses a browser WebSocket endpoint.

さて、tryの中で、ブラウザのWebSocketエンドポイントを使用するPuppeteer接続を待ちます。

At this point, we can go to the proxy section on the bright data dashboard and create a new scraping browser instance.

この時点で、ブライトデータダッシュボードのプロキシセクションに移動し、新しいスクレイピングブラウザインスタンスを作成することができます。

Once created, go to the access parameters and you'll notice a host username and password back in the code.

作成したら、アクセスパラメータに移動し、コードにホストユーザー名とパスワードが戻っていることに気づくでしょう。

We can use these values to create a WebSocket URL.

これらの値を使用して、WebSocket URLを作成することができます。

You'll have your username and password separated by a colon, followed by the host URL.

ユーザー名とパスワードはコロンで区切り、その後にホストのURLを記述することになります。

Now that we're connected to this browser, we can use Puppeteer to do virtually anything a human can do programmatically.

これでブラウザに接続できたので、Puppeteerを使って、人間がプログラムでできることはほとんど何でもできるようになりました。

Let's create a new page and then set the default navigation time out to two minutes.

新しいページを作成し、デフォルトのナビゲーションタイムアウトを2分に設定してみましょう。

From there, we can go to any URL on the Internet.

そこから、インターネット上のあらゆるURLにアクセスすることができます。

Then Puppeteer has a variety of API methods that can help you parse a Web page like the dollar sign, which feels like jQuery corresponds to document query selector in the browser.

Puppeteerには、ドル記号のようにウェブページを解析するのに役立つさまざまなAPIメソッドがあり、これはjQueryがブラウザのドキュメントクエリーセレクタに相当するように感じられます。

It allows you to grab any element in the DOM, then extract text content from it.

これを使うと、DOM内の任意の要素を取得し、そこからテキストコンテンツを抽出することができます。

Or as an alternative, you can use page evaluate, which takes a callback function that gives you access to the browser APIs directly.

また、別の方法として、ブラウザのAPIに直接アクセスできるコールバック関数を受け取るpage evaluateを使用することもできます。

Like here, we can grab the document element and get its outer HTML, just like you might do in the browser console.

このように、ブラウザのコンソールで行うように、document要素を取得して、その外側のHTMLを取得することができます。

Let's go ahead and console log the documents outer HTML.

それでは、ドキュメントの外側のHTMLをコンソールログに記録してみましょう。

And now we're ready to test our scraper out to make sure everything is working as expected.

そして、このスクレイパーをテストして、すべてが期待通りに動作していることを確認する準備が整いました。

Open up the terminal and run the node command on your file and you should get the HTML for that page back as a result.

ターミナルを開き、ファイルに対してnodeコマンドを実行すると、結果としてそのページのHTMLが返ってくるはずです。

Congratulations, you're now ready to do industrial scale web scraping.

これで、産業規模のウェブスクレイピングを行う準備が整いました。

Now I'm going to go ahead and update the code to go to the Amazon bestsellers page.

では、Amazonのベストセラー・ページにアクセスするためのコードを更新してみます。

And my first goal is to get a manageable chunk of HTML.

最初の目標は、管理しやすいHTMLの塊を手に入れることです。

What I'm doing is opening up the browser DevTools in Chrome to inspect the HTML directly until we highlight the list of products that we want to scrape.

ChromeのブラウザDevToolsを開いて、スクレイピングしたい商品のリストをハイライトするまで、HTMLを直接検査します。

Ideally, we'd like to get all these products and their prices as a JSON object.

理想的には、これらの商品とその価格をすべてJSONオブジェクトとして取得したいです。

You'll notice all the products are wrapped in a div that has a class of a carousel.

すべての商品が、カルーセルのクラスを持つdivに包まれていることに気づくでしょう。

We can use that selector as our starting point.

このセレクタを出発点として使用することができます。

Chrome DevTools also has a copy selector feature, which is pretty cool, but usually it's a bit of overkill.

Chrome DevToolsにはコピーセレクタの機能もあり、これはかなりクールですが、通常は少しやりすぎです。

Back in the code, we can make sure that the page will wait for that selector to appear.

コードに戻って、そのセレクタが表示されるまでページが待機するようにします。

Then we can use the dollar sign query selector to grab it from the DOM and finally evaluate it to get its inner HTML.

そして、ドル記号のクエリーセレクタを使ってDOMからそれを取得し、最後にそれを評価して内部のHTMLを取得することができます。

Now let's go ahead and console log that and run the script once again.

それでは、コンソールログに記録して、もう一度スクリプトを実行してみましょう。

At this point, we have a more manageable chunk of HTML and I could analyze it myself.

この時点で、より扱いやすいHTMLの塊ができたので、自分で解析することができます。

But the faster way to get this job done is to use a tool like ChatGPT.

しかし、この仕事を終わらせるには、ChatGPTのようなツールを使うのが手っ取り早い方法です。

We can simply copy and paste this HTML into the chat and ask it to write puppeteer code that will grab the product title and price and return it as a JSON object.

このHTMLをコピーしてチャットに貼り付け、商品のタイトルと価格を取得し、JSONオブジェクトとして返す人形劇コードを書いてもらうだけでいいのです。

Literally, on the first try, it writes some perfect evaluation code that grabs the elements with the proper query selectors and then formats the data we requested as a JSON object.

文字通り、最初のトライで、適切なクエリセレクタで要素を取得し、JSONオブジェクトとして要求したデータをフォーマットする、完璧な評価コードを書いてくれます。

Let's copy and paste that code into the project and then run the node script once again.

そのコードをプロジェクトにコピー＆ペーストして、もう一度ノード・スクリプトを実行してみましょう。

Now we're in business.

これで、ビジネスがスタートしたことになります。

We just built our own custom API for trending products on Amazon and we could apply the same technique to any other e-commerce store like eBay, Walmart, etc.

Amazonのトレンド商品に関する独自のカスタムAPIを構築したところですが、eBayやWalmartなど、他のeコマースストアにも同じ手法を適用することができます。

That's pretty cool.

これはかなりクールなことです。

And if we wanted to extract even more data, we could also grab the link for each one of these products, then use the scraping browser to navigate there and extract even more data.

さらに多くのデータを抽出したい場合は、これらの商品のリンクを取得し、スクレイピング・ブラウザを使ってそこに移動し、さらに多くのデータを抽出することも可能です。

We loop over each product and use the go-to method to navigate to that URL just like we did before.

各製品をループして、先ほどと同じように、そのURLに移動する方法を使用します。

However, when doing this, I would recommend also implementing a delay of at least two seconds or so between pages just so you're not sending an overwhelming amount of server requests.

ただし、この作業を行う際には、サーバーへのリクエストを過剰に送信しないよう、ページ間に少なくとも2秒程度の遅延を設けることをお勧めします。

Now that we have all this wonderful data, the possibilities are endless.

さて、このように素晴らしいデータを手に入れたことで、可能性は無限に広がっています。

Like, for example, we could use GPT-4 to write advertisements that target different demographics for each one of these products.

例えば、GPT-4を使って、商品ごとに異なる層をターゲットにした広告を書くことができます。

Or, we might want to store millions of products in a vector database where they could be used to build a custom AI agent of some sort, like an AutoGPT tool that can take this data and then build you an Amazon dropshipping business plan.

あるいは、何百万もの商品をベクターデータベースに保存して、AutoGPTツールのようなカスタムAIエージェントを構築し、このデータを使ってAmazonドロップシッピングのビジネスプランを構築することもできるかもしれません。

The bottom line is that if you want to do cool stuff with AI, you're going to need data.

要するに、AIでクールなことをしたいのであれば、データが必要だということです。

But in many cases, the only way to get the data you need is through web scraping, and now you know how to do it in a safe and effective way.

しかし、多くの場合、必要なデータを入手する唯一の方法はウェブスクレイピングであり、安全で効果的な方法でそれを行う方法を知っていることになります。

Thanks for watching, and I will see you in the next one.

ご視聴ありがとうございました！次回でお会いしましょう。