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側ですが、非常に単純です。
<?php $html = file_get_contents($_GET['url']); echo $html;
これだけ。
ファイル名は[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でデータを取得
var target = $('#target').val()
$.ajax({
url: `/wp-content/php/mirror.php?url=${target}`,
type: 'GET',
dataType: 'html',
cache: false
}).done(function(data) {
console.log("ok");
$('#result').html($(data).find('h2').text());
}).fail(function(XMLHttpRequest, textStatus, errorThrown) {
console.log("error");
})
ワードプレスサイトの任意の位置に先ほどの[mirror.php]をアップロード。
そこにアクセスして帰ってきた[data]をJQueryでいじっていきます。
上記例ではtargetという変数にスクレイピングしたいURLを格納して使うことになります。
実際にJQueryによるスクレイピングの形を作ってみる
任意のURLを入力すると、そのサイトのH1タグを取得します。
フロントエンド側の実際のソースコード
<div class="search-box">
<input id="target" class="target" type="text" placeholder="任意のURLを入力" value="" name="kw">
<button class="btn-search">
<img src="https://lets-hack.tech/wp-content/themes/keni80_wp_standard_all/images/icon/search_black.svg" width="18" height="18">
<noscript>
<img src="https://lets-hack.tech/wp-content/themes/keni80_wp_standard_all/images/icon/search_black.svg" width="18" height="18">
</noscript>
</button>
</div>
var main = function(){
var target = $('#target').val()
$('#result').html('<img class="loading" src="/wp-content/themes/keni8-child/images/loading.svg">')
$.ajax({
url: `/wp-content/php/mirror.php?url=${target}`,
type: 'GET',
dataType: 'html',
cache: false
}).done(function(data) {
console.log("ok");
$('#result').html($(data).find('h1').text());
}).fail(function(XMLHttpRequest, textStatus, errorThrown) {
console.log("error");
})
}
$('.btn-search').on('click',main);
$( '#target' ).keypress( function ( e ) {
if ( e.which == 13 ) {
console.log("key" + e.which);
main();
return false;
};
});
ワードプレスで動かす場合はwindow.onloadやjQuery(function ($) {})などでのカプセル化が必要です。
ajax.done内の[data]変数のいじり方でどんな値でも取得することができます。
JQueryによるスクレイピング完成系
まとめ
JQueryはDOM操作で一番便利なのは普及度合いを見ても明らかです。
スクレイピングにJQueryを利用できるのは便利さアップです。
コメント