4

環境

OS:CentOS release 6.6 (Final)
casperjs:1.1.0-beta3
phantomjs:1.9.8

概要

上記環境からスクレイピングを行い、指定したページの全画面をキャプチャしたいと考えております。
現状、指定ページの一部キャプチャは保存できるようになりましたが、そのページはマウスの↓スクロール操作で徐々にリストが表示されるタイプ動的サイトのため、全画面を取得できていません。

最下層まで画像取得をするため scrollToBottom() 関数を下記の通り用いてキャプチャを撮りましたが、スクロールができておらず、全画面が取得できておりません。
有識者の方がいましたらアドバイスお願いいいたします。

詳細

キャプチャを取っているソースは下記の通りです。

casper.thenOpen("https://hoge.hoge/list", function(){
    this.wait(4000,function(){
        this.capture("before.png");
        });
});
casper.then(function(){
    this.scrollToBottom();
    this.capture("after.png");
});

→before.pngとafter.png差分が出ていない。


参考サイト

http://casperjs.readthedocs.org/en/latest/modules/casper.html

2
  • 差分が出ていないというのは、全く同じ画像が保存されるということでしょうか?またそのサイトは「スクロールする→リストの続きが読み込まれ、表示される→さらにスクロールする→さらに続きが(略」というような動きをするのでしょうか?
    – unarist
    2015年2月23日 5:22
  • >全く同じ画像が保存されるということでしょうか? おっしゃるとおりです。(サイドバーの広告とかが変わるだけで、リストは変化しませんでした。) >スクロールする→リストの続きが読み込まれ、表示される→さらにスクロー‌​ルする→さらに続きが(略」というような動きをするのでしょうか? はい。リストは有限ですが、リストが全部でるまでそのループが続くイメージです。 2015年2月23日 13:01

1 件の回答 1

2

実際に似たようなサイトで検証してみたところ、同じような状況が再現できました。

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

casper.start("http://isotope.metafizzy.co/v1/demos/infinite-scroll.html");

casper.then(function(){
    this.capture("before.png");
});

casper.then(function(){
    this.scrollToBottom();
    this.capture("after.png");
});

casper.run();

これは続きの読み込みや表示が終わる前に after.png を取得しているからです。

例えば、after.png を取得する前に1秒待つようにすると、このサイトではうまく取得できます。

...

casper.then(function(){
    this.capture("before.png");
    this.scrollToBottom(); // スクロールして
});

casper.wait(1000, function(){ // 少し待って
    this.capture("after.png"); // キャプチャ
});

...

一定時間待つ代わりに waitFor などで読み込み完了を検知するのもよいでしょう。

参考 http://www.andykelk.net/tech/web-scraping-with-casperjs

この記事ではローディングサークルが消えるのを waitWhileVisible で待って、再度スクロールを試しているようです。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。