概要

簡単に理解すると、PhantomJSという中身がwevkitの仮想ブラウザがあって、それをより簡単に使うためのツールがCasperJSです。
そのCasperJSを使用してFacebookにログインして近況を投稿してキャプチャを撮るところまでをやってます。

CasperJSの詳しい話は公式サイトで　( CasperJS )

Casper（カスパー）と言えば、あの映画で有名なキャラクターを思い出しますが、公式サイトで見たやつは随分イメージが違ってて、一言で言えばカスパー劣化版みたいでした.

CasperJSを導入する(mac)

phantomjsとcasperjsを導入する必要があります。
どちらもnpmでインストール可能です。グローバル環境にインストールします。

$ npm install -g phantomjs
$ npm install -g casperjs

処理の流れ

Facebookにログイン
近況の投稿
結果をキャプチャする

では、sample.jsを作成してコードを書きます。
CasperJSでは各種コマンドのCSSのパスでの記述が可能なので、そのあたりも見てやってください。

sample.js


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

//フェイスブックにログインする

casper.start("https://ja-jp.facebook.com/", function(){
  //ログイン
  this.fill('.menu_login_container > form', 
{ email: 'フェイスブックの登録メールアドレス', pass: 'フェイスブックのパスワード' }, true);

});

//近況を投稿

casper.then(function(){
    casper.wait(5000, function() {
        this.evaluate(function() {
            document.querySelector('#u_0_11').value = 'お化けがでたよー by CasperJS';
            document.querySelector('#u_0_x > div > div._1dsp > div > ul > li:nth-child(2) > button').click();
        });
    });
});

//結果のキャプチャを撮る

casper.wait(10000, function() {
        this.capture('result.png');
});


casper.run();

キャプチャされた画像は、sample.jsと同一ディレクトリに出力されます。

ロード時間に引っかからないようにwait()系で、投稿とキャプチャに入る前に時間に余裕を持たせました。（時間は適当です）
投稿の部分も.fill()系でやろうと思いましたが、少しパターンを変えて、evalute内でDOMを操作してみました。

セレクターを指定する際は、Chrome Developer Toolsで右クリックのCSSのパスをコピーすると間違いが無く便利です。

実行


$ casperjs sample.js

結果はこんな感じ

(※キャプチャの一部を切り取ってます)

タイムカードで出社と退社ボタンを押すようにして、cronでまわせば「忘刻」というのも無くなりますね。

【CasperJS】Facebookをスクレイピングして近況を投稿してみる

概要

CasperJSを導入する(mac)

処理の流れ

実行