JavaScript(JQuery)で他サイトをスクレイピング(クローリング)する方法



JavaScriptでスクレイピングしたい!

JavaScriptというか、JQueryですね。どちらかと言うと。

WebサイトやWebアプリを作っていたりすると、たまーにスクレイピングしたい時ってありますよね。

「他所のサイトからちょっとデータを拝借して・・・」って時、APIが提供されていればいいんですが、そうじゃない場合、PHPとかでスクレイピングしようとすると、一気にめんどくさくなります。

JQueryをワードプレスで動かす方法に関する記事はこちら。

色々使ってみた結果、DOM操作の至上はやはりJQueryである

もちろんPHPでも出来るんですが、「そこまで必死にならなくていいし。」みたいなかるーいクローリングの場合サクッとJQueryでスクレイピング出来ないのか?とか、考えたことはありませんか?

僕自身スクレイピングは割と多様する技術の一つで、色んな言語の色んなライブラリを使ってきましたが、DOM操作という点において、もっとも優れているのはJQueryであり今のところ右に出る言語も、特定のライブラリもありません。

JavaScriptってスクレイピング出来るの?

結論から言うと、できません。何を持ってして「スクレイピング」と呼ぶのかという、細かいところはありますが、とりあえずJavaScriptでスクレイピングを完結させることは不可能です。

クロスドメイン制約

という、取り決めがJavaScriptには存在しており、ドメインを跨いだデータのリスエストを受け付けません。

HTTPリクエストだけ、他でやる

これが唯一無二の解答であります。

結局、何でJavaScriptでスクレイピングやりたいかって言うと、上でも述べた通り、JQueryによるDOM操作が楽だからなんですよね。

他ってのは、何の言語でも問題ないです。サーバーサイドで動きさえすれば。

この記事内ではPHPを使って実装してみます。

JavaScriptでのスクレイピング実装

実際、JSとPHPのコンビネーションによるサンプルを書いていきます。

ここではクエリストリングとして受け取ったURLにアクセスして、当該URLのページタイトルの取得を目指します。

PHPでターゲットURLにアクセス

まずはPHP側ですが、非常に単純です。

これだけ。

ファイル名は[mirror.php]として、FTPでサーバーにアップロードして、PHP側の準備は完了。

アップロードしたURLが仮に"https://lets-hack.tech/wp-content/php/mirror.php "だった場合、パラメータとして"?url=http://exemple.com"を付加してアクセスすると、そのurlにアクセスして、htmlをそのまま返します。

こんな感じ↓

https://lets-hack.tech/wp-content/php/mirror.php?url=https://yahoo.co.jp

phpのfile_get_contents関数を経由することによって、JavaScriptのクロスドメインの制約を回避して、自サイト内でスクレイピングを完結できる構造になるワケです。

JQueryでajaxでデータを取得

ワードプレスサイトの任意の位置に先ほどの[mirror.php]をアップロード。

そこにアクセスして帰ってきた[data]をJQueryでいじっていきます。

上記例ではtargetという変数にスクレイピングしたいURLを格納して使うことになります。

実際にJQueryによるスクレイピングの形を作ってみる

任意のURLを入力すると、そのサイトのH1タグを取得します。

フロントエンド側の実際のソースコード

ワードプレスで動かす場合はwindow.onloadやjQuery(function ($) {})などでのカプセル化が必要です。

ajax.done内の[data]変数のいじり方でどんな値でも取得することができます。

JQueryによるスクレイピング完成系

まとめ

JQueryはDOM操作で一番便利なのは普及度合いを見ても明らかです。

スクレイピングにJQueryを利用できるのは便利さアップです。