1. Perl でファントムする！ 改め
Wight - Phantom's
new friend
YAPC::Asia 2012
motemen

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

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

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

5. 近年の JavaScript の隆盛

9. PhantomJS
テキスト

10. PhantomJS
• Ariya Hidayat 氏
• できること
- インターネット テキスト
- ただし見えない

11. 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/

12. 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/

13. WebKit
• Web レンダリングエンジン
- HTML, JavaScript, …
• Safari / Chrome

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

15. 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 ページとは別のコンテキストで実行

16. インストール
＿
( ･ω･)
＿(__つ/￣￣￣/
＼/ /
￣￣￣＼
＼┗(^o^ )┛┗(^o^ )┛┗(^o^ )┛ ┗( ^o^)┛
＼┏┗ ┏┗ ┏┗ ┛┓
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
• バイナリ
- phantomjs.org/download.html
• brew install phantomjs

17. 使う

18. PhantomJS is for…
• Scraping
• JavaScript testing
• Network monitorning

19. “Wight”

22. “Wight”
"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."

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

24. 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;
}

25. Wight->new
use Wight;
my $w = Wight->new;
$w->visit('https://www.google.com/');
•PhantomJS を起動
$w->find('//input[@name="q"]')->set('motemen');
$w->find('//input[@type="submit"]')->click();
•通信を確立
foreach ($w->find('//h3[@class="r"]/a')) {
say ' * ', $_->text;
}

26. $w->visit($url)
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();
•URL を開く
foreach ($w->find('//h3[@class="r"]/a')) {
say ' * ', $_->text;
}

27. $node = $w->find($xpath)
@nodes = $w->find($xpath)
use Wight;
•XPathWight->new;
my $w =
でページ内の要素へアクセス
$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;
}

28. $node->set($value)
•要素の値を設定
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;
}

29. $node->click()
•要素をクリック
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;
}

30. $w->render($filename)

31. $w->evaluate($JavaScript)
$w->evaluate('document.title'); # => "はてな"
$w->evaluate('document.body.getBoundingClientRect()')
# {
# bottom => 1363,
# height => 1363,
# left => 0,
# right => 1024,
# top => 0,
# width => 1024
# }

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

33. $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();

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

35. Testing

36. 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';

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

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

39. Example

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

43. IMPLEMENTATION

44. Uses Poltergeist
github.com/jonleighton/poltergeist

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

46. 出演者
• ( ╹◡╹) Perl
• (´⊙ω⊙) PhantomJS
• ( ˘ω˘) Page Content

47. 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;

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

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

50. コールバック
// in PhantomJS
page.onPrompt = function () {
return answer;
};
• 関数の返り値がユーザの返答代わり

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

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

53. おまけ

54. jQuery
(☝◞‸◟)☝…
$w->evaluate('$("img").attr("src")');

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

56. Wight::jQuery

57. 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 の式に
• それっぽいメソッドチェーン

58. プロパティ/コールバック
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 })'

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

60. github.com/motemen/Wight