PhantomJSが消えた今(クラウドサービスは生きてる)、ウェブの情報スクレイピングする手段としては、SeleniumとPuppeteerくらいかなぁというのも、最近のウェブは動的に情報を生成しているので、例えばGoogle Apps Scriptで拾いに行っても、JavaScript実行前の骨組みしか取得できないケースがあったりします。

しかし、PuppeteerはただChromeの操作を自動化するだけじゃなく、ウェブスクレイピングでも力を発揮します。ということで、今回世間を騒がせているマスク情報を手に入れるべく、対象のページの商品情報を取得してみたいと思います。実際には、このコードに更にIFTTTのWebhooksを使ってLINEに通知したり、TeamsのIncoming Webhookを叩いたり、また「アイマスク」などのノイズ情報も除去したり、Node-Cronで定期的に自動実行させてやる必要があるので、こんな事も出来るよってサンプルです。

難易度:


今回使用するモジュール

今回はスクレイピングさせる為の補助として、cheerioと呼ばれるNode.js上でjQueryのようにDOM操作をする事のできるモジュールを入れています。

また、macOS用に作っているので、executablePath/Applications/Google Chrome.app/Contents/MacOS/Google Chromeとなります。

※スクレイピングは相手のサーバに負荷を掛ける手法です。よって、非常に短いスパンで連続アクセスするような行為はNGです。

事前準備

セレクターの取得

今回のPuppeteerは自動操作というよりは、ウェブスクレイピングの処理なのでほぼほぼNode.jsでコーディングする形になります。しかし、ページのどこの部分をスクレイピングするか?ということで、はじめにセレクターを渡してあげる必要があります(でないと全体取得になってしまう)

このセレクタですが、Chromeデベロッパーツールで簡単に取得が可能です。以下の手順でページの対象部分のセレクタを取得しておきます。

  1. Chromeで対象のページを表示する
  2. 商品群の情報が出てるエリアを右クリック⇒検証でデベロッパーツールが起動
  3. 商品エリアの部分が今回の取得対象となる部分。
  4. 3.を右クリック⇒Copy⇒Copy Selectorを選択
  5. 今回のコードのselector変数に入れる。これで完了。

図:セレクタの取得は意外と簡単

モジュールのインストール

これはとても簡単。

  1. フォルダを作成し、npm init -yを実行
  2. 以下のコマンドでモジュールをインストール
  3. index.jsを作成して、node index.jsで実行。これだけ

ソースコード

スクレイピングするコード

  • 今回はmacOS上で動かしてるので、executablePathは異なります。
  • ロードするURLは検索結果画面からのスタートになります。
  • selector変数には前項の事前準備で取得した対象のセレクタを指定します。
  • html変数にawait page.$evalにてまずは、セレクター内のHTMLを取得させておきます。
  • 取得したHTMLはそのままでは扱いが面倒なので、cheerioに渡してjQuery風にDOM操作出来るようにしておきます。
  • 最初のクラス以下をforEachで回して各商品の情報を取得させていきますので、配列等を用意しておく
  • その中に子要素や孫要素が入ってるのですが1個ずつ掘っていくのは骨が折れるので、class指定でfindで探させます
  • URLの場合には、hrefをattrにて取得するようにします。
  • これらの情報は用意しておいた{}にkey名と共に突っ込んでいく
  • 最後に配列に情報の塊をぶっこむ。
  • 相手のウェブの仕様が変われば作り直しになるのは、ウェブスクレイピングの宿命

関連リンク

共有してみる: