CasperJSを使ってみる
CasperJS というツールを使ってみたので今回記事にしました。
CasperJS は PhantomJS というヘッドレスブラウザ(GUIなしのブラウザ)の拡張ライブラリで、ブラウザの操作を行ったりキャプチャをとったりできます。主にウェブアプリの自動テストに使用したりするそうです。
参考情報: Wikipedia
環境
ノートPC(OS: Arch Linux)
<余談>
Raspberry Pi に環境を構築する予定でしたが、ラズパイ用 PhantomJS のパッケージがないのでソースからビルドする必要があるらしいです。長時間がかかるそうなので後日設定してみようと思います。
作業手順
- PhantomJS のインストール
- ChasperJS のインストール
PhantomJS のインストール
<参考文献>
PhantomJSをインストールする
公式サイトよりパッケージをダウンロード。
$ cd /usr/local/src/ $ wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2
ダンロードファイルを展開し配置する。
$ sudo tar xvf phantomjs-2.1.1-linux-x86_64 $ sudo ln -s phantomjs-2.1.1-linux-x86_64 phantomjs $ sudo ln -s /usr/local/src/phantomjs/bin/phantomjs /usr/local/bin/phantomjs
インストールの確認。
$ phantomjs -v 2.1.1
CasperJS のインストール
<参考文献>
WEB
書籍
JS+Node.jsによるWebクローラー/ネットエージェント開発テクニック
公式サイトの手順に従ってインストールする。
$ cd /usr/local/src $ git clone git://github.com/casperjs/casperjs.git $ ln -s casperjs/bin/casperjs /usr/local/bin/casperjs
インストールの確認。
$ casperjs --version 1.1.3
動作確認
グーグルトップページの全アンカータグのURLを取得するプログラムを作成してみます。
ソースコード
// getAnchors.js var casper = require('casper').create(); // グーグルにアクセスする。 casper.start('http://www.google.com', function() { // ページのタイトルを表示する。 this.echo(this.getTitle()); }); //アクセス後、ページの全アンカータグのURLを取得する。 casper.then(function() { // 全アンカータグを取得 var hrefs = this.evaluate(function() { var alist = document.querySelectorAll("a"); var hrefList = []; for (var i=0; i<alist.length; i++) { hrefList.push(alist[i].href); } return hrefList; }); // アンカータグのURLを表示する。 for (var i in hrefs) { this.echo(hrefs[i]); } }); casper.run();
プログラム実行
$ casperjs getAnchors.js Google https://plus.google.com/?gpsrc=ogpy0&tab=wX https://www.google.co.jp/webhp?tab=ww ...
プログラム解説
「start(URL, 処理)」で「URL」のページへアクセスします。
そして、アクセス後の処理は「then(処理)」を使って作成します。
「casper.then(); casper.then(); ...」と実装していくことで、ブラウザ操作を順次実行することができます。
DOM操作を実装するには、「evaluate(処理)」を使います。evaluate関数内にコードを書き、関数の戻り値からセレクタの情報を拾います。
上記のようなコードが、CasperJSの基本的な実装のようです。
後書き
今回はノートPC環境で CasperJS の実装を行いましたが、Raspberry Pi で実行できるように環境を整えて行きたいです。