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


casperjs


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

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

yahoo2

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

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

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

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

タグを選択するとそれに対応した部分がブラウザ上でハイライト表示されるので、HTMLタグと実際に表示されている部分との対応関係がわかります。
スクリーンショット_2015-11-02_19_33_58

CSS Pathを知りたいタグを選択した状態で右クリックして「Copy CSS Path」を選択します。
スクリーンショット_2015-11-02_19_40_20
何も表示されませんが、クリップボードにCSS Pathがコピーされているので、適当な場所(メモ帳とか)にペーストすればCSS Pathが取得できます。上記の例では「#yahooservice > ul > li:nth-child(1) > a」が取得できます。

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

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

実行結果

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

特定の場所の記事一覧を取得するには次のようにやると取得できます。
スクリーンショット 2015-11-02 22.57.09
ニュースの一覧を取得する場合も、CSS Pathを利用します。

実行結果

以上となります。これらのやり方をページ内のいろいろな要素に適用すればページ内の全ての要素を取得することができます。

CasperJSについて書かれている本

CasperJSについて詳しく書かれている本。Amazonのサイトで本書の目次を見ることができるので内容を確認して役に立ちそうなら。

Javascriptフレームワーク CasperJS 基本的な使い方 目次

こちらの記事も参考にして頂ければと思います。
Javascriptフレームワーク CasperJS 基本的な使い方(1) 画面キャプチャをとってみる
Javascriptフレームワーク CasperJS 基本的な使い方(2) ページ内の特定の要素を取得する
Javascriptフレームワーク CasperJS 基本的な使い方(3) ボタンやチェックボックスをクリックする
Javascriptフレームワーク CasperJS 基本的な使い方(4) Webスクレイピングしてみる
Javascriptフレームワーク CasperJS 基本的な使い方(5) ファイル入出力

シェアして頂けると嬉しいです

















チャーム本店



価格.com ブロードバンド

価格.com 自動車保険









■コメントはお気軽にどうぞ