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に引数として渡しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// //-------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(); |
実行結果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
$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を利用します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// //-------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(); |
実行結果
1 2 3 4 5 6 7 8 9 10 11 12 |
$casperjs sample.js [ "杭改ざん横行 うなだれる幹部", "小保方氏「早大決定に失望」", "女性トイレ禁止は差別 提訴へ", "通知カード 誤配・紛失相次ぐ", "USJ 転売券4000枚無効と通告", "カスピ海ヨーグルト 一時休止", "虎キャンプ「金本効果」沸く", "V6ライブ「音漏れ参戦」賛否" ] |
以上となります。これらのやり方をページ内のいろいろな要素に適用すればページ内の全ての要素を取得することができます。
CasperJSについて書かれている本
CasperJSについて詳しく書かれている本。Amazonのサイトで本書の目次を見ることができるので内容を確認して役に立ちそうなら。
Javascriptフレームワーク CasperJS 基本的な使い方 目次
こちらの記事も参考にして頂ければと思います。
「Javascriptフレームワーク CasperJS 基本的な使い方(1) 画面キャプチャをとってみる」
「Javascriptフレームワーク CasperJS 基本的な使い方(2) ページ内の特定の要素を取得する」
「Javascriptフレームワーク CasperJS 基本的な使い方(3) ボタンやチェックボックスをクリックする」
「Javascriptフレームワーク CasperJS 基本的な使い方(4) Webスクレイピングしてみる」
「Javascriptフレームワーク CasperJS 基本的な使い方(5) ファイル入出力」