Javascriptフレームワーク CasperJS 基本的な使い方(2)　ページ内の特定の要素を取得する

CasperJSの基本的な使い方を具体的なサンプルプログラムで紹介したいと思います。インストール済みという前提で話を進めます。まだインストールしていない場合はこちらを参考にインストールしてください。
「Macにcasperjsをインストール」
「Windowsにcasperjsをインストール」

前回記事「Javascriptフレームワーク CasperJS 基本的な使い方(1)」では画面キャプチャを取得したので今回はページ内の特定の要素を取得してみることにします。yahooのトップページの左側に並んでいるサービスメニューのリンク一覧を取得してみることにします。

CSS Pathを利用して要素の場所を特定する

ページ内の特定の要素にアクセスするにはその場所を指定する必要がありますがそれにはCSS Pathというのを使います。これはページ内の要素をHTMLタグ要素を利用して構造を明確に示したもので、例えば左側に並んでいるサービスメニューのリンクの場合は、次のような表現になります。「#yahooservice > ul > li > a」
ページのHTMLソースを解析すれば良いのですが、そんな面倒くさいことをしなくてもGoogle Chromeを使えば一発でCSS Pathを取得できます。

Google ChromeでCSS Pathを取得する方法

CSS Pathを知りたい要素のあたりで右クリックして「要素の検証」を選択すると、HTMLソースが表示されます。

タグを選択するとそれに対応した部分がブラウザ上でハイライト表示されるので、HTMLタグと実際に表示されている部分との対応関係がわかります。

CSS Pathを知りたいタグを選択した状態で右クリックして「Copy CSS Path」を選択します。

何も表示されませんが、クリップボードにCSS Pathがコピーされているので、適当な場所(メモ帳とか)にペーストすればCSS Pathが取得できます。上記の例では「#yahooservice > ul > li:nth-child(1) > a」が取得できます。

サービスメニューのリンク一覧を取得する

yahooのサイトへ遷移してサービスメニューのリンク一覧を取得します。サービスメニューのリンクのCSS Path「#yahooservice > ul > li > a」をgetElementsAttributeに引数として渡しています。

//
//-------sample.js-------
//

//casperオブジェクトを生成
var casper = require('casper').create();

//指定のURLへ遷移する
casper.start('http://www.yahoo.co.jp', function() {
    //サービスメニューのリンク一覧を取得(配列として取得)
    var AnchorArrays = this.getElementsAttribute('#yahooservice > ul > li > a', 'href');
    //取得した内容を表示する
    require('utils').dump(AnchorArrays);
});

//処理の実行
casper.run();

//-------sample.js-------

//casperオブジェクトを生成

var casper = require('casper').create();

//指定のURLへ遷移する

casper.start('http://www.yahoo.co.jp', function() {

//サービスメニューのリンク一覧を取得(配列として取得)

var AnchorArrays = this.getElementsAttribute('#yahooservice > ul > li > a', 'href');

//取得した内容を表示する

require('utils').dump(AnchorArrays);

});

//処理の実行

casper.run();

実行結果

$casperjs sample.js

[

"http://shopping.yahoo.co.jp/?sc_e=ytc",

"http://auctions.yahoo.co.jp/",

"http://lohaco.jp/?bk=t&sc_e=j_as_ya_tc_n",

"http://travel.yahoo.co.jp/",

"http://news.yahoo.co.jp/",

"http://weather.yahoo.co.jp/weather/",

"http://sports.yahoo.co.jp/",

"http://finance.yahoo.co.jp/",

"http://tv.yahoo.co.jp/",

"http://gyao.yahoo.co.jp/",

"http://games.yahoo.co.jp/",

"http://yahoo-mbga.jp/?_ref=aff%3Dysm001",

"http://map.yahoo.co.jp/",

"http://transit.yahoo.co.jp/",

"http://tabelog.com/",

"http://job.yahoo.co.jp/",

"http://realestate.yahoo.co.jp/",

"http://carview.yahoo.co.jp/",

"http://textream.yahoo.co.jp/",

"http://blogs.yahoo.co.jp/",

"http://beauty.yahoo.co.jp/",

"https://partner.yahoo.co.jp/",

"http://cookpad.com/"

]

ニュースの一覧を取得する

特定の場所の記事一覧を取得するには次のようにやると取得できます。

ニュースの一覧を取得する場合も、CSS Pathを利用します。

//
//-------sample.js-------
//

//casperオブジェクトを生成
var casper = require('casper').create();

//指定のURLへ遷移する
casper.start('http://www.yahoo.co.jp', function() {
    //ニュースの一覧を取得(配列として取得)
    var NewsArrays = this.evaluate(function() {
                var Nodes = document.querySelectorAll('#topicsfb > div.topicsindex > ul.emphasis > li > a');
                //Nodesを配列として取得
                return Array.prototype.map.call(Nodes, function(element) {
                    return element.innerHTML;
                });
            });
    //取得した内容を表示する
    require('utils').dump(NewsArrays);
});

//処理の実行
casper.run();