Tableauによるhtmlスクレイピング
WDCを用いたhtmlスクレイピングの実現手段はいくつか考えられますが、ここでは、その中でも環境整備が比較的容易と考えられるWDC-SDK上での、htmlスクレイピングの例を取り上げたいと思います。
WDC-SDKは、Tableau-GitHub上で公開されており、SDKには検証用Webサーバが含まれています。また、検証用Webサーバには、プロキシ機能が備わっています。
データ
サンプル・データ
今回はサンプル・データとして、「国の公債残高と公債依存度の推移」(図表1参照)を用いました。
図表1：国の公債残高と公債依存度の推移
出所：「国の公債残高と公債依存度の推移」(なるほど統計学園：総務省統計局)
データ取得
サンプル・コード
本サンプルでのデータ取得は、ローカルPCに立ち上げたプロキシ経由となります。
具体的には、
http://localhost:8889/<URL>
といったURI指定になります。
データ要求箇所
var xhr = $.ajax({
beforeSend: function(xhr){
xhr.overrideMimeType('text/html; charset=shift_jis');
},
type: 'GET',
url: 'http://localhost:8889/www.stat.go.jp/naruhodo/c1data/***.html',
dataType: 'html',
scriptCharset: 'utf-8',
async: false
}).done(function(resp, textStatus) {
var tableRowObj = $(resp).find('tbody tr');
var eraHeiseiFlg = false;
for(i = 0; i < tableRowObj.length; i++){
var order = i + 1;
var year = $(tableRowObj[i]).find('td.txtc').text();
var balance = $(tableRowObj[i]).find('td.txtr:eq(0)').text().replace(",", "");
var dependency = $(tableRowObj[i]).find('td.txtr:eq(1)').text();
if(year.substr(0, 2) == "平成"){eraHeiseiFlg = true;}
if(dependency.substr(0, 2) == "注)"){dependency = dependency.replace("注)", "");}
if(eraHeiseiFlg){
if(!(year.substr(0, 2) == "平成")){year = "平成" + year;}
}else{
if(!(year.substr(0, 2) == "昭和")){year = "昭和" + year;}
}
tableData.push({
"Order": order,
"Year": year,
"Balance": balance,
"Dependency": dependency
});
}
}).fail(function() {
tableau.abortWithError('An error has occured while trying to connect to html site.');
});
プロキシ概念図
WDCのフレームワークを通して、Tableauがデータを取得する大まかな流れは、以下のようになります(図表2参照)。
- TableauがWDCサーバからスクリプトを取得
- TableauがProxyサーバへデータを要求
- ProxyサーバがWebサーバから代理でデータを取得
- TableauがProxyサーバからデータを取得
*) WDCサーバとProxyサーバが同一ドメインの場合には、CORS制約を回避できることになります。
図表2：プロキシ概念図
見える化
以下は、htmlスクレイピングによって取得した「国の公債残高と公債依存度の推移」データを見える化したサンプルとなります。
