NAVER まとめを題材に、ウェブから情報を集めるクローラ、スクレイパーの設計について

1. ウェブから情報をあつめる
2012/12/11 1 UT Startup Gym

2. UT Startup Gym とは？
アイデアをカタチにするプログラム
プロジェクト
企画から実装まで
スタートアップ
2012/12/11 2 UT Startup Gym

3. スケジュール
Keywords:
• プログラミング入門 ソーシャルウェブアプリケーション, API,
Oct, 12 bot, HTML5
• プラニング
リーンスタートアップ, ビジネスプラニン
Nov, 12 • プロジェクトスタート
グ, HTML, CSS, PHP, javascript
• 開発開始
Dec, 12 • 冬季開発合宿 チーム結成, 企画, ディスカッション
git, フレームワーク, MySQL, Apache
• ウェブデザイン
Jan, 13 • 週間報告会
シナリオ, ペルソナ, ワイヤフレーム,
サイトマップ, DB スキーム
• jQuery, 中間発表
Feb, 13
ゲーミフィケーション, 仮説検証, データマ
イニング, アクセシビリティ
• 作業会
Mar, 13
レスポンシブデザイン, プレゼンテーショ
• リリース会 ン
Apr, 13
2012/12/11 3 UT Startup Gym

4. M D 講師（敬称略） タイトル 要素
10 13 飯塚 かんたん Facebook アプリをつくる HTML, CSS, js
21 飯塚 かんたん Twitter アプリをつくる UNIX, vim, PHP
27 川上 かんたん アンケートフォームをつくる MySQL, MVC
11 4 AWS 高山様 サーバを立てよう AWS
10 飯塚・石村 スタートアップの心構え ビジネスプラン、リーンスタートアップ
17 飯塚・佐藤 プロダクトデザイン シナリオ、ペルソナ、ワイヤフレーム
24 お休み（飯塚@ジャカルタ）
12 1 ゆーすけべー様 ウェブサービスの企画のコツ 企画プロセス、ウェブサービス運用
8 飯塚 ウェブから情報をあつめる クローラ, XPath, 正規表現
15 プロジェクトキックオフ アンカンファレンス
22 ハッカソン
1 12 石村 ユーザがハマるアプリデザイン ゲーミフィケーション
19 飯塚 かんたん・きれい・便利なウェブデザイン Twitter Bootstrap, Responsive Design, LESS
26 未定 Git
2 2 斎藤 アニメーションをつくる javascript, jQuery
9 ゲスト ゲストスピーカー
16 中間発表
3 作業会
4 13 プレゼンテーション
20 リリース会
2012/12/11 4 UT Startup Gym

5. 目次
• イントロダクション
• ソースコードを取ってくる
– PHP file_get_contents($url)
• HTML を解析する
– 正規表現
– XPath
• 自動的で動かす
– cron
2012/12/11 5 UT Startup Gym

6. クローラってなに？
• 自動的にウェブページにアクセスし、データを
収集するプログラム。ロボットとも言う。
• これを走らせることを「クローリング」とい
う。
• スクレイピング＝HTMLを解析して、必要な情
報を抜き出すこと。
2012/12/11 6 UT Startup Gym

7. クローラとウェブアプリ
• いきなり充実したコンテンツのサイトができる
• 広告をつければ「サーバに稼いでもらう感覚」を
手っ取り早く味わうことができる
2012/12/11 7 UT Startup Gym

8. Spysee
2012/12/11 8 UT Startup Gym

9. Bijostagram
2012/12/11 9 UT Startup Gym

10. ソースコードを取ってくる
• とりあえず名言ページを題材に
file_get_contents() の使い方に慣れる
2012/12/11 10 UT Startup Gym

11. ソースコードを取ってくる１
<?
$url = "http://www.meigensyu.com/quotations/view/random";
$html = file_get_contents($url);
echo $html;
2012/12/11 11 UT Startup Gym

12. ソースコードを取ってくる２
<?
$url = "http://www.meigensyu.com/quotations/view/random/";
$html = file_get_contents($url);
preg_match('/<div class="text">(.+)</div‟>/', $html, $match);
var_dump($match);
2012/12/11 12 UT Startup Gym

13. 正規表現
• 任意の文字列に対して、指定したパターンに
マッチしているかを試す
• パーサーではないので、構造を持ったデータに
は弱い
• 構造を持たないフラットなデータに良い。
– トークナイザ
– バリデータ
2012/12/11 13 UT Startup Gym

14. 正規表現の例
• ^d+$ → 1234 とか 39843452 にマッチ。１２
324 とか ff0000 とかにはマッチしない。
– ^: 行頭
– d: 半角数字
– +: １回以上の繰り返し
– $: 行末
• ^[A-Z]*(d+)$ → 13 とか ADB1132 にマッチ。し
かも、13 とか 1132 が抜き出せる。
– *: ０回以上の繰り返し
– (): 抜き出す
2012/12/11 14 UT Startup Gym

15. HTML を解析する１
• NAVER まとめの記事ページから、写真の URL
だけを収集する
• とりあえず単一ページで動作
2012/12/11 15 UT Startup Gym

16. HTML を解析する１
<?
$url = "http://matome.naver.jp/odai/2133765614325689001";
$res = file_get_contents($url);
$dom = @DOMDocument::loadHTML($res);
$xml = simplexml_import_dom($dom);
$imgs = $xml->xpath("//img[@class='MTMItemThumb']");
foreach ($imgs as $img) {
echo $img["src"]."n";
//echo "<img src='".$img["src"]."'>n";
}
2012/12/11 16 UT Startup Gym

17. XPath
• XML や HTML の任意の位置を取得するための式
– プログラミング言語に依らない
• XPath エンジンがあれば、XPath を指定して
HTML 上の値を簡単に持って来ることができる
2012/12/11 17 UT Startup Gym

18. XPath の例
• //img[@class=„MTMItemThumb‟]
→class属性の値が„MTMItemThumb‟の img 要素
– // は /html/body の短縮形
– @ は属性のこと (@id=, @src=, @href= etc.)
• 他にも、様々な表現方法がある
2012/12/11 18 UT Startup Gym

19. ブラウザで表示する
生成された HTML ファイルをブラウザで表示してみよう。
//echo $img[“src”].“n”;
echo “<img src=„”.$img[“src”].“‟>n”;
$ php hoge.php > piyo.html
2012/12/11 19 UT Startup Gym

20. HTML を解析する２
• 食べログの検索結果から店名とURL、食べログ
得点を取得する。
2012/12/11 20 UT Startup Gym

21. HTML を解析する２
<?
$url = 食べログ検索結果の URL;
$res = file_get_contents($url);
$dom = @DOMDocument::loadHTML($res);
$xml = simplexml_import_dom($dom);
$shops = $xml->xpath("//li[contains(@class,'rank')]");
foreach ($shops as $shop) {
$name = $shop->div[0]->div[0]->div[0]->strong[0]->a;
echo "Shop Name: $namen";
echo "URL: ".$name["href"]."n";
$rank = $shop->div[2]->div[0]->p[0]->em;
echo "Rank: $ranknn";
}
2012/12/11 21 UT Startup Gym

22. HTML を解析する３
• アルク 英辞郎
• 英単語の難度、発音を知りたい
• 普通にやると、詰まる
– User Agent で制限をかけている
※このコードが実行できない場合、PHP むけ
cURL をインストールすること。
$ sudo apt-get install php5-curl
2012/12/11 22 UT Startup Gym

23. HTML を解析する３（できない）
<?
if (isset($argv[1])) {
$query = $argv[1];
$res = file_get_contents("http://eow.alc.co.jp/$query/UTF-8/");
// ブラウザでは見られるのに、ソースコードを取得できない
$dom = @DOMDocument::loadHTML($res);
$xml = simplexml_import_dom($dom);
$properties = $xml->xpath('//span[@class="label" and .= "【＠】" ]/following-sibling::text()[1]');
if (!empty($properties)) {
$prop_array = explode("、", $properties[0]);
echo "[".$query."] レベル: ".$prop_array[0]." ヨミ: ".$prop_array[1]."n";
} else {
echo "結果を取得できませんでした。正しい英単語を入力してください。n";
}
}
2012/12/11 23 UT Startup Gym

24. HTML を解析する３（できる）
<?
if (isset($argv[1])) {
$query = $argv[1];
$doc = new DOMDocument();
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "http://eow.alc.co.jp/$query/UTF-8/");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); //標準出力でなく、文字列として取得
curl_setopt($ch, CURLOPT_USERAGENT, “Mozilla/5.0 (Windows; U; Windows NT 5.1; rv:1.7.3) Gecko/20041001
Firefox/0.10.1” ); //Firefox のふりをしてアクセス
$res = curl_exec($ch);
curl_close($ch);
$dom = @DOMDocument::loadHTML($res);
$xml = simplexml_import_dom($dom);
$properties = $xml->xpath('//span[@class="label" and .= "【＠】" ]/following-sibling::text()[1]');
if (!empty($properties)) {
$prop_array = explode("、", $properties[0]);
echo "[".$query."] レベル: ".$prop_array[0]." ヨミ: ".$prop_array[1]."n";
} else {
echo "結果を取得できませんでした。正しい英単語を入力してください。n";
}
} else {
echo "検索する英単語を入力してください。n";
}
2012/12/11 24 UT Startup Gym

25. HTML を解析する４
• NAVER まとめふたたび
• このままだと、１ページ目しか収集できない
• 自動で次ページの収集もできないか？
2012/12/11 25 UT Startup Gym

26. HTML を解析する４
if (isset($argv[1])) {
if (preg_match("/http://matome.naver.jp/odai/(d+)$/", $argv[1])) {
$url = $argv[1];
$res = @file_get_contents($url);
while ($res) {
$data = getData($res);
foreach ($data["image"] as $image) {
echo "<img src='".$image["src"]."'>n";
}
if (!$data["nextPage"]) {
$res = null;
} else {
$res = @file_get_contents($url."?page=".$data["nextPage"]);
}
sleep(1);
}
}
}
つづく...
2012/12/11 26 UT Startup Gym

27. HTML を解析する４
function getData ($html) {
$dom = @DOMDocument::loadHTML($html);
$xml = simplexml_import_dom($dom);
$result["image"] = $xml->xpath("//img[@class='MTMItemThumb']");
$pager = $xml->xpath("//div[@class='MdPagination03']");
$result["nextPage"] = null;
if (!empty($pager)) {
$last_anchor = $pager[0]->a[count($pager[0]->a)-1];
$current_page = $pager[0]->strong;
if ($last_anchor + 1 != $current_page) {
$result["nextPage"] = $current_page + 1;
}
}
return $result;
}
2012/12/11 27 UT Startup Gym

28. cron
• 定期的にプログラムを実行
• とても簡単
• コマンドラインで動くプログラムをその
まま使える
2012/12/11 28 UT Startup Gym

29. cron
$ vim crontab.txt
# フルパスで記述すること
# 毎日 4 時 12 分に実行
12 4 * * * php /home/user/crawl_user_page.php
# 毎分実行
* * * * * php /home/user/crawl_top_page.php >>/home/user/log.txt
$ crontab < crontab.txt # ジョブの登録
$ crontab –l # 登録されたジョブの確認
$ crontab –e # ジョブの編集
$ crontab –r # ジョブの全消去
2012/12/11 29 UT Startup Gym

30. 自動でプログラムを動かす
<?
$article = getRSS();
$res = @file_get_contents($article->link);
while ($res) {
$data = getData($res);
foreach ($data["image"] as $image) {
echo "<img src='".$image["src"]."'>n";
}
if (!$data["nextPage"]) {
$res = null;
} else {
$res = @file_get_contents($url."?page=".$data["nextPage"]);
}
sleep(1);
} つづく...
2012/12/11 30 UT Startup Gym

31. 自動でプログラムを動かす
function getData ($html) {
$dom = @DOMDocument::loadHTML($html);
$xml = simplexml_import_dom($dom);
$result["image"] = $xml->xpath("//img[@class='MTMItemThumb']");
$pager = $xml->xpath("//div[@class='MdPagination03']");
$result["nextPage"] = null;
if (!empty($pager)) {
$last_anchor = $pager[0]->a[count($pager[0]->a)-1];
$current_page = $pager[0]->strong;
if ($last_anchor + 1 != $current_page) {
$result["nextPage"] = $current_page + 1;
}
}
return $result;
} つづく...
2012/12/11 31 UT Startup Gym

32. 自動でプログラムを動かす
function getRSS() {
$xml = simplexml_load_file("http://matome.naver.jp/feed/topic/1Luvh");
$items = array();
foreach ($xml->channel->item as $item) {
$items[] = $item;
}
shuffle($items);
return $items[0];
}
2012/12/11 32 UT Startup Gym

33. ワーク
• 何かできそうな気がして来ませんか？
• 自分が面白そうと思うサイトから情報を集めて
くる。
• 複数サイトからの情報を組み合わせていると
GOOD。（マッシュアップ）
2012/12/11 33 UT Startup Gym