Love web applications » データ収集

CasperJSとCoffee Scriptによるデータ収集

kapibarawebmaster1515 — Mon, 12 Jan 2015 04:51:20 +0000

２ヶ月ぶりの投稿です。今日は私が最近ちょいちょい利用しているCasperJSによるWebクロールについて、まとめておこうと思います。環境はMacです。

簡単な概要

CasperJSを使うには、Node.jsとPhantomJSが必要です。簡単に紹介します。

Node.js

サーバー上で動くJavaScript処理系です。JavaScriptはブラウザ上で動かす方がメジャーですが、Node.jsはサーバーサイドのJavaScriptです。

PhantomJS

Webkit（ChromeやSafariが搭載）ベースのブラウザです。普通のブラウザと違ってGUIの画面無しです。それだけで静的なWebスクレイピングを行えます。が、Node.jsと協業すればリンクを辿ったり、フォーム入力した後の情報を取得するなどの動的クローラを作成できます。

CasperJS

PhantomJSのユーティリティです。指定サイトにアクセスしてリンクをクリックしたり、キャプチャーを撮るなどについて、PhantomJS+Node.jsでの処理を簡単に記述できます。

Coffee Script

JavaScriptを生成するスクリプト言語です。CasperJSは直接CoffeeScriptを解釈してくれます。JavaScriptよりも見た目も量もすっきりしたコードが書けます。

文法：

CoffeeScript 言語リファレンス

qiita – CoffeeScript入門メモ

ちなみに、CasperJSはクローラー以外にも便利な利用方法はあります！例えば、One Clickでお買い物とか・・・w

CasperJSを使いコマンドラインからAmazon.co.jp で買い物するスクリプトでCoffeeScriptでコーヒーを買った

Macにインストール

これらをMacで環境構築するなら、nodebrewがおすすめです。

このサイトがわかりやすいです。ついでにCoffeeScriptもインストールしておきましょう♡

Qiita – node.jsのversionを管理するためにnodebrewを利用する

それから、PhantomJSとCasperJSをインストールします。

Qiita – CasperJSでWEBサイトの画面キャプチャを取得してみた

インストール後に、↑のサンプルを試してみるのをオススメします。

CentOS(6.5)にインストール

サーバーで動かしたい場合もあるので、一応インストール手順をメモ。>>参考

yum -y update
yum install nodejs npm --enablerepo=epel
npm install -g phantomjs
npm install -g casperjs

CoffeeScriptのエディタを用意する

私は基本的に何でもEclipseで開発しているので、CoffeeScriptエディタもEclipse Pluginで調達しました。

Nodecript CoffeeScript Editor

使い勝手は、ぶっちゃけ今ひとつ・・・。そのうち、他のエディタも試してみようと思っています。

CoffeeScriptはインデントが構文解釈に影響します。そのためインデントがずれていたり、タブと空白が変に混ざっていたりすると正しく動作しないです。そこがCoffeeScriptのコードを書く上での要注意事項です。

実行する方法

こんな感じでOKです。

casperjs sample.coffee

もしCoffeeScript自体に文法エラーがあれば、

Unable to load script test.coffee; check file syntax

という感じのメッセージが出るのですが、エラーの場所までは教えてくれません。そこで、

coffee -c sample.coffee

で一度コンパイルすればエラー箇所を表示してくれるので、デバッグに役立ちます。

実践編その１

配列に入れたURLに順にアクセスして、それぞれキャプチャーを撮ってみます。

links = [ 'http://google.co.jp/' 'http://yahoo.co.jp/' 'http://bing.com/' ] casper = require('casper').create() # iPhone 6 casper.userAgent('Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4') casper.start().each(links, (self, link) -> self.viewport(375, 667).thenOpen link, -> @wait 500, -> title = @getTitle() @echo(title) @capture("#{title}.png") ) casper.run()

iPhone6のUser-Agent, viewportを指定してみました。captureを撮る前に、0.5秒のwait timeを挿入しました。読み込み時の一連の処理が終わってからキャプチャを撮るためです（入れないと、正しい画面が撮れないことがある）。

実践編その２

いくつかのリンクを辿って、目的の情報を入手するコードを書いてみました。ローソンの店舗情報から、１軒目のリンクを順に辿って、店舗名と住所をコンソール出力します。

### * ローソンの店舗情報を１件スクレイピングする ### target_url = "http://store.lawson.co.jp" casper = require('casper').create() casper.userAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36') casper.start target_url # 都道府県リスト表示 casper.then -> @click('p.listSearch a') # 最初の都道府県（北海道）をクリック casper.waitForSelector "ul.mapOverLayLists li:nth-child(1) a", -> @echo(@fetchText('ul.mapOverLayLists li:nth-child(1) a')) @click('ul.mapOverLayLists li:nth-child(1) a') # 最初の市区町村（札幌市中央区）をクリック casper.wait(500).waitForSelector "ul.mapOverLayLists li:nth-child(1) a", -> @echo(@fetchText('ul.mapOverLayLists li:nth-child(1) a')) @click('ul.mapOverLayLists li:nth-child(1) a') # 店舗をクリック casper.wait(500).waitForSelector '#mapOverLay table a', -> @echo(@fetchText('#mapOverLay table a')) @click('#mapOverLay table a') # 結果確認 casper.wait(500).waitForSelector '#pr_address', -> @capture('hoge.png') @echo(@fetchText('#pr_address')) casper.run()

casper.waitForSelectorは、指定セレクタの存在が確認できるまで処理を停止してくれます。もし、暫く待っても指定セレクタが確認できない場合は、処理が中断されます。待機する上限時間はcasper.timeout()で設定できます。

なおAPI Documentには、サンプルコードも載っており充実しています。

Perlで横浜市の区別年齢別人口データを自動入手する

kapibarawebmaster1515 — Wed, 09 Jul 2014 01:52:44 +0000

こんにちは。今日もPerlを使った横浜市の人口データを収集を進めます♪

前回の記事「Perlで横浜市統計webから人口データを入手する」で、個別のHTMLソースファイルから目的の人口データを入手するスクリプトを作成しました。今回はこのスクリプトを拡張して、区別データを自動入手、ファイル書き出しまで行います。

横浜市の区別年齢別人口データを入手する

横浜市の区別年齢別の人口データは、下記のサイトに掲載されています。

http://www.city.yokohama.lg.jp/ex/stat/jinko/age/new/age-j.html

区名タブを押すと、区別の人口データが出て来ますよね。これらを手でコピペするのも大変なので、Perlで自動収集して、最後にJSONファイルで書き出すスクリプトを作成しました。

read_yokohama_stat.pl

#! /opt/local/bin/perl use strict; use warnings; use 5.012; use Encode; use HTML::TableExtract; use utf8; use LWP::Simple; use JSON qw( decode_json encode_json ); my $url_dir = "http://www.city.yokohama.lg.jp/ex/stat/jinko/age/new/"; my @file_keys = qw(age tsurumi kanagawa nishi naka minami konan hodogaya asahi isogo kanazawa kohoku midori aoba tsuzuki totsuka sakae izumi seya); my $browser = LWP::UserAgent->new(keep_alive=>3, timeout=>30); my @stat; foreach my $key (@file_keys) { # URLフレーズを作成する my $url = $url_dir . $key . "-j.html"; print $url, "\n"; # HTMLソースを入手する my $content = get_content_by_url($url); # HTMLソースから目的の人口データのみ入手する my $res = get_stat_from_html($content); # 結果を入れる配列にpush push(@stat, {'key' => $key, 'stat' => $res, }); # Webサイトへのアクセスするタイミングを1sec開ける sleep(1); } my $json = encode_json(\@stat); open(FILE, ">yokohama_stat.json") or die "Cannot open json file."; print FILE $json; close(FILE); sub get_content_by_url { my $url = shift; my $response = $browser->get( $url ); # 正常に読み込みできたか確認する if ( $response->is_success ) { my $content = decode('Shift_JIS', $response->content) or die "Decode html source code failed."; return $content; } else { die "Get html form web failed."; } } sub get_stat_from_html { my $content = shift; my $te = new HTML::TableExtract(headers => [qw(年齢（歳）総数)]); $te->parse($content) or die "Parse file by htmlextract failed."; my $ts = ($te->tables)[0]; my %nums; if(defined $ts and defined $ts->rows) { foreach my $row ($ts->rows) { print encode('utf-8', join(": ",@$row)), "\n"; my $age; # 行見出しが0-5歳に該当する場合をそれぞれPickup（見出し数値は全角表記されている） if ($row->[0] eq '総数' ) { $age = "TTL"; } elsif ($row->[0] eq '０' ) { $age = 0; } elsif ( $row->[0] eq '１' ) { $age = 1; } elsif ( $row->[0] eq '２' ) { $age = 2; } elsif ( $row->[0] eq '３' ) { $age = 3; } elsif ( $row->[0] eq '４' ) { $age = 4; } elsif ( $row->[0] eq '５' ) { $age = 5; } else { next; } # 桁区切り文字を取り除いて、再度文字列として連結した後で数値に変換。Validationも兼ねて行う my $num = join('', split(/,/,$row->[1])) + 0 or die "The population number invalid."; # 結果をhashに追加 $nums{$age.""} = $num; } } return \%nums; }

L40〜のget_content_by_urlで、WebサイトにアクセスしてHTMLソースを入手するsubルーチンが定義されています。

L54〜のget_stat_from_htmlは、前回記事で作成したスクリプトをほぼ流用しています。↑のHTMLソースコードから、０−５歳各年齢別人口と総計値を入手してhashテーブルにまとめるsubルーチンです。

L16〜のforeachループで、上の２つのsubルーチンを呼び出して、行政区毎に処理を行うようにしてあります。

・・・

JSONファイルが出来ました♪

次はこのJSONファイルを元にD3.jsを使ってグラフでも描いてみようかと思います。

それでは、よい１日をお過ごしください♪

Perlで横浜市統計webから人口データを入手する

kapibarawebmaster1515 — Mon, 07 Jul 2014 01:42:00 +0000

こんにちは。今日は梅雨らしいジトジトしたお天気ですね。

雨ニモ負ケズ、元気に行こうと思います♥︎

さて、前回はようやく普通の横浜市地図を入手したところでした。その次に、地図を人口の大小で塗り分けたいので、今日は元となる人口データを調達したいと思います！

横浜市の人口データを入手する

横浜市のページを開くと、おおっ、統計ポータルサイトがあります。

横浜市統計ポータルサイト http://www.city.yokohama.lg.jp/ex/stat/

ちょっと寄り道

つい気になって、寄り道。「大都市推計人口」を見てみました。

http://www.city.yokohama.lg.jp/ex/stat/jinko/city/new-j.html

横浜市統計ポータルサイトより引用

男女の性比が載っているのですが、地方都市は軒並み男性少ないじゃないですかー。東京に移動しているのかな・・・と見てみても、関東圏もほぼ男女比１：１みたいです。男性はどこへ行ったのでしょう・・・？女性の方が長生きするからでしょうか。もっと年代別の詳しいデータが無いと分からないですね。

本題に戻ります

先ほどの統計ポータルサイトに、年齢（各歳・５歳階級）別男女別人口が掲載されています。

こちら

http://www.city.yokohama.lg.jp/ex/stat/jinko/age/new/age-j.html

案の上、HTMLのテーブルデータとExcelですね・・・（正直メンドクサイ…；-；）。

行政区毎のデータが欲しいので、ちまちまコピペは嫌なので自動処理がしたい！

Web屋さんらしく、HTMLの方から目的のデータを入手するスクリプトを作ってみました。

今日はPerlで実装します。TableExtractというモジュールが使えそうです。

日本語で使い方を書いてくれているサイト発見：

http://www.geocities.co.jp/SiliconValley-Sunnyvale/6128/perl/tableextract.html

上のサイトを参考にして、早速小さいスクリプトを書いてみました。
※目的のhtmlをtest.htmlとしてローカルに保存してあります。

read_yokohama_population.pl

#! /opt/local/bin/perl use strict; use warnings; use 5.012; use Encode; use HTML::TableExtract; use utf8; my $filepath = "test.html"; open(FILE, $filepath) or die "Open a html file failed."; my $content = ""; while (my $line = ) { $content .= decode('Shift_JIS', $line);; } close(FILE); my $te = new HTML::TableExtract(headers => [qw(年齢（歳）総数)]); $te->parse($content) or die "Parse file by htmlextract failed."; my $ts = ($te->tables)[0]; my %nums; if(defined $ts and defined $ts->rows) { foreach my $row ($ts->rows) { print encode('utf-8', join(": ",@$row)), "\n"; my $age; # 行見出しが0-5歳に該当する場合をそれぞれPickup（見出し数値は全角表記されている） if ($row->[0] eq '０' ) { $age = 0; } elsif ( $row->[0] eq '１' ) { $age = 1; } elsif ( $row->[0] eq '２' ) { $age = 2; } elsif ( $row->[0] eq '３' ) { $age = 3; } elsif ( $row->[0] eq '４' ) { $age = 4; } elsif ( $row->[0] eq '５' ) { $age = 5; } else { next; } # 桁区切り文字を取り除いて、再度文字列として連結した後で数値に変換。Validationも兼ねて行う my $num = join('', split(/,/,$row->[1])) + 0 or die "The population number invalid."; # 結果をhashに追加 $nums{$age.""} = $num; } } # 結果を出力してみる print "Age 0-5\n"; foreach my $age (keys(%nums)) { print $age, " ", $nums{$age}, "\n"; } 1;

TableExtractモジュール、とっても便利ですね！カラムの見出し値を指定することで、抽出するテーブル＆カラムを限定することが出来るようです。

他に注意点としては、

お役所のホームページなので、エンコードがShift_JISです。読み込んだHTMLソースは、Shift_jisでdecodeにてPerl内部リテラルに変換します。出力時は自分の標準出力環境がutf-8なので、utf-8でencodeします。

行見出しが0-5の各年齢に合致する値を入手したいのですが、見出しの年齢が全角表記になっていますね。見出しが全角の0-5各年齢と一致する行を選択して、その後の処理のしやすさを考えて、半角数値に置き直しています。

人口は３桁毎にカンマ（,）で区切られているので、カンマを除去、再度文字列連結してから、数値データに変換しています。数値データへの変換が上手くいくかどうかでvalidationの機能を持たせているつもりです。

次回は、各行政区のデータを一気にWebから取得して、目的の人口データを入手してファイルに書き出す処理を実装したいと思います。

それでは、よい一日をお過ごしください♥︎