狠狠撸

Perl でファントムする！改め

Wight - Phantom's
new friend
YAPC::Asia 2012
motemen

About myself
? 株式会社はてな
? id:motemen?
? github:motemen?
? cpan:MOTEMEN?
- App::htmlcat
- AnyEvent::DAAP::Server?
? twitter:美顔器

Perl で楽しいこと
1.スクレイピングする
2.ウェブサービスを作る
3.その他

スクレイピングはみんな好き
? WWW::Mechanize
? Web::Scraper
? Web::Query
? Plagger

近年の JavaScript の隆盛

Wight: Phantom’s Perl friend - YAPC::Asia 2012

PhantomJS
? Ariya Hidayat 氏
? できること
- インターネットテキスト

- ただし見えない

PhantomJS
“PhantomJS is a headless WebKit with
JavaScript API. It has fast and native
support for various web standards:
DOM handling, CSS selector, JSON,
Canvas, and SVG.”
— http://phantomjs.org/

WebKit

? Web レンダリングエンジン
- HTML, JavaScript, …?
? Safari / Chrome

Headless
? ユーザ向けの（目に見える）インター
フェースなし

JavaScript API
var page = require('webpage').create();
var url = 'http://www.phantomjs.org/';
page.open(url, function (status) {
//Page is loaded!
phantom.exit();
});

? PhantomJS の JS API でブラウジング
- new WebPage()?
? Web ページとは別のコンテキストで実行

インストール
?? ＿
? ( ??ω?)
＿(__つ/￣￣￣/
??＼/?? /
????￣￣￣＼?
????????＼┗(ô^ )┛┗(ô^ )┛┗(ô^ )┛??┗( ô^)┛
????????? ＼┏┗? ?┏┗?? ┏┗????? ┛┓
?????????? ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣

? バイナリ
- phantomjs.org/download.html?
? brew install phantomjs

PhantomJS is for…
? Scraping
? JavaScript testing
? Network monitorning

“奥颈驳丑迟”
"Wight is a Middle English word, from
Old English wiht, and used to describe a
creature or living sentient being. It is
akin to Old High German wiht, meaning
a creature or thing."

キラキラネームの理由（わけ）
? CasperJS (JavaScript)
? Poltergeist (Ruby)
? GhostDriver (JavaScript)
? …etc

SYNOPSIS

use Wight;

my $w = Wight->new;

$w->visit('https://www.google.com/');

$w->find('//input[@name="q"]')->set('motemen');
$w->find('//input[@type="submit"]')->click();

foreach ($w->find('//h3[@class="r"]/a')) {
say ' * ', $_->text;
}

Wight->new

use Wight;

my $w = Wight->new;


?PhantomJS を起動
?通信を確立
say ' * ', $_->text;
}

$w->visit($url)

use Wight;

my $w = Wight->new;


?URL を開く
say ' * ', $_->text;
}

$node = $w->find($xpath)
@nodes = $w->find($xpath)
use Wight;

?XPathWight->new;
my $w =
でページ内の要素へアクセス


say ' * ', $_->text;
}

$node->set($value)

?要素の値を設定
use Wight;

?あわせてキーイベントも発生（！）
my $w = Wight->new;



say ' * ', $_->text;
}

$node->click()

?要素をクリック
use Wight;

my $w = Wight->new;
?クリックできない場所にあったらエラー


say ' * ', $_->text;
}

$w->evaluate($JavaScript)

$w->evaluate('document.title'); # => "はてな"

$w->evaluate('document.body.getBoundingClientRect()')
# {
# bottom => 1363,
# height => 1363,
# left => 0,
# right => 1024,
# top => 0,
# width => 1024
# }

$w->execute($JavaScript)

$w->execute(<<'JAVASCRIPT');
var nodes = document.querySelectorAll('img');
[].slice.call(nodes).forEach(function () {
…
});
JAVASCRIPT
# => JSON::XS::true

$w->cookie_jar
? PhantomJS Perl でクッキー受け渡し
? HTTP::Cookies
my $w = Wight->new(cookie => 1);
some_complicated_authentication();

my $cookie_jar = $w->reload_cookie_jar;
my $ua = LWP::UserAgent->new(
cookie_jar => $cookie_jar
);
usual_downloading_routine();

?$w->body
?$w->source
?$w->current_url
?$node->visible
?$node->attribute($name)
?$node->value
?etc…

Test::Wight
my $w = Test::Wight->new;
my $port = $w->spawn_psgi($app);

$w->visit('/');
is $w->evaluate('document.title'), 'title';

my $link = $wight->find('//p/a')
$link->click;
is $w->current_url->path, '/foo';

Test::Wight
? 内部でアクセスを閉じたい場合に
? $port = $w->spawn_psgi($app)?
- ‘fork’ or ‘twiggy’

Why Perl?
? コールバックのない平坦なコードに
? CPAN モジュールの再利用
- LWP family?
- Coro による並列化
? Perl アプリケーションからの利用
? prove したい

Tumblr dashboard
? “J” キーの押下をエミュレート
? img 要素の href を取得
? （ダウンロード）は Perl に任せる

Uses Poltergeist
github.com/jonleighton/poltergeist

Poltergeist

? “A PhantomJS driver for Capybara”?
? Jon Leighton 氏
? これの JavaScript を流用
? ルビースト最高！

出演者

? ( ???) Perl
? (?⊙ω⊙) PhantomJS
? ( ?ω?) Page Content

Perl PhantomJS
? Wight->new?
- Twiggy を起動
- PhantomJS を起動
- WebSocket 接続を待つ
? connection.js
this.socket =
new WebSocket("ws://127.0.0.1:" + this.port + "/");
this.socket.onmessage = this.commandReceived;

Perl PhantomJS
? $w->call($method, @args)?
- WebSocket メッセージを送信
- $cv->recv してじっと待つ
? main.js / browser.js?
- 結果 (エラー) が出しだい返答
- リンクのクリックの場合 URL が変わるまで

PhantomJS Page Content
? browser.js, web_page.js?
- Perl 側から来た要求を実行
? agent.js をページ内に埋め込み
- 要素の発見
- イベントの発生

コールバック

// in PhantomJS
page.onPrompt = function () {
return answer;
};

? 関数の返り値がユーザの返答代わり

コールバック
? 非同期な通信は使えない
- WebSocket ×
- Ajax ×
- Synchronous XMLHttpRequest ○?
? ふつうに HTTP リクエストをさばく
$w->on_confirm(sub {
my ($w, @args) = @_;
return rand() < 0.5;
});

TODO
? Mechanize 等との連携
? フレーム対応
- PhantomJS 1.7 ～
? poltergeist に pull-req
- （ルビーストになりたい）

jQuery
(????)?…
$w->evaluate('$("img").attr("src")');

jQuery
└( ＾ω＾ )」?
$w->evaluate(jQuery('img')->attr('src'));

SYNOPSIS
jQuery; # => '$'

jQuery('#foo'); # => '$("#foo")'
jQuery('#foo')->val(); # => '$("#foo").val()'
jQuery('#foo')->val(23); # => '$("#foo").val(23)'

jQuery('document'); # => '$(document)'

jQuery->ajax({ method => 'POST' });
# => '$.ajax({"method":"POST"})'

? 文字列化すると jQuery の式に
? それっぽいメソッドチェーン

プロパティ/コールバック

jQuery('body')->position().'left';
# => '$("body").position().left'

jQuery('body')->click(sub {
e => 'console.log(e); return false'
});
# => '$("body").click(function (e)
{ console.log(e); return false })'

まとめ
? PhantomJS?
? Wight?
- スクレイピングやテストに使えます
- API と実装の紹介

狠狠撸

Wight: Phantom’s Perl friend - YAPC::Asia 2012

More Related Content

Wight: Phantom’s Perl friend - YAPC::Asia 2012

Editor's Notes