【JavaScript】jquery.xdomainajax.jsで簡単スクレイピング

スクレイピングとは、ウェブサイトから情報を抽出する技術のこと。
簡単に言えば、とあるサイトのHTMLを取得できるってこと。

jQueryだけでスクレイピング

これを実現するためには、ajaxを使う。

var url = 'http://kuroeveryday.blogspot.com/';

$.ajax(url, {
  crossDomain: true,
  success    : function (res) {
    console.log(res);
  }
});

ただしこのままでは以下のようなエラーがでる。

XMLHttpRequest cannot load http://kuroeveryday.blogspot.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

アクセス先のサーバからのレスポンスに Access-Control-Allow-Origin が含まれていないとアクセスすることができないからだ。

クロスドメイン制限を突破する！

クロスドメインの制限を突破するためには、 jquery.xdomainajax.js というライブラリを使うのが簡単。

var url = 'http://kuroeveryday.blogspot.com/';

$.get(url, function(data) {
  console.log(data);
});

たったこれだけでスクレイピングすることができる。
使い方は Cross-domain requests with jQuery を参照。

某Copy__writtingのフォロワー数を5秒に1回スクレイピングするツール

××で有名な某Copy__writtingのフォロワー数がリロードするたびに減るというのがちょっと前に話題になった。
そこで5秒に1回、スクレイピングをして @Copy__writting のフォロワー数を取得するツールを作ってみた。

※ 現在はアカウントが削除されているため動作しない
※ uriの部分を変更すれば他の人のフォロワー数もスクレイピングすることができる

uri = 'https://twitter.com/Copy__writing';

// yyyy-mm-dd hh:mi:ss を取得
var getDate = () => {
  now = new Date();
  
  year   = "" + now.getFullYear();
  month  = "" + (now.getMonth() + 1); if (month.length == 1)  { month  = "0" + month; }
  day    = "" + now.getDate();        if (day.length == 1)    { day    = "0" + day; }
  hour   = "" + now.getHours();       if (hour.length == 1)   { hour   = "0" + hour; }
  minute = "" + now.getMinutes();     if (minute.length == 1) { minute = "0" + minute; }
  second = "" + now.getSeconds();     if (second.length == 1) { second = "0" + second; }
  
  return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
}

setInterval(() => {
  // スクレイピング
  $.get(uri, (data) => {
    $('#app').prepend(getDate() + '  : ' + data.responseText.match(/title="([0-9,]+) Followers"/)[1] + ' Forrows');
  });
}, 5000);

以上

written by @bc_rikko