Perlスクレイピングでのtwitterとfacebookの情報抜き出し方法

前へ 次へ
このQ&Aのポイント
  • Perlのスクレイピング処理で、TwitterとFacebookの情報を抜き出す方法について教えてください。
  • リンクの構成ページから、TwitterとFacebookの情報を分けて取得する方法を教えてください。
  • 「#share_item ul li」のように#がつく記述と付かないパターンがあるのですが、この違い（#が必要な時）が不明です。教えてください。
回答を見る
  • ベストアンサー

Perl 　スクレイピング処理について

以下のような構成のページから、前半２つの twitter ,facebook のみを 　　process '#share_item ul li', 't_url' => '@href'; のような形で抜き出したいのですが、 これだとtwitterからmixi までの情報を一気に取得してしまいます。 process '#share_item ul li', 'twi_url' => '@href'; process '#share_item ul li', 'fb_url' => '@href'; のように、それぞれ分けて取得するよい方法はありますでしょうか？ ----------(ここから)--------- <div id="share_item"> <ul> <li> <a href="http://twitter.com/share?text=（略）&via=test_mk" target="_blank" onclick="s_omni.trackSNS('twitter')"> <img src="http://aaa.com/btn1.gif" alt="twitterでつぶやく" /> </a> </li> <li> <a href="http://www.facebook.com/share.php?u=http://aaa.com/" target="_blank" onclick="s_omni.trackSNS('facebook')"><img src="http://www.aaa.com/common/btn2.gif" alt="facebookでシェア" /></a> </li> <li> <a href="mailto:?subject= 　　　　　　　　　　　　　　　　～（略）～alt=" 　　　　　　　　　　　　　　メールで知らせる" /> 　　　　　　　　　　　　　　</a> </li> <li> <a href="http://mixi.jp/recent_voice.pl?from=home_profile" target="_blank" onclick="s_omni.trackSNS('mixi')"> <img src="http://aaa.com/btn4.gif" alt="mixiで知らせる" /></a> </li> <li> <link rel="mixi-check-image" type="image/jpeg" href="http://aaa.com//img/site/3.jpg" /> <a href="javascript:void(0);" onclick="window.open('http://mixi.jp/share.pl?u=http://aaa.com/&k=cf6870bacc04932deb167c0ee0483894cf74249b','share',['width=632','height=456','location=yes','resizable=yes','toolbar=no','menubar=no','scrollbars=no','status=no'].join(','));"><img src="http://aaa.com/btn5.gif" alt="mixiチェック"></a> </li> </ul> </div> ----------(ここまで)--------- （２）これは補足的な質問なのですが、 「#share_item ul li」 のように # がつく記述と付かないパターンがあるのですが、 この違い（#が必要な時）が不明です。 ご存知の方、教えて頂ければ幸いです。

  • Perl
  • 回答数2
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

表示がくずれので空白2文字を全角空白にしていることに注意。 use strict; use warnings; use utf8; use Web::Scraper; use Data::Dumper; my $html = << 'END_HTML'; <html> 　<head> 　</head> 　<body> 　　<div id="share_item"> 　　　<ul> 　　　　<li> 　　　　　<a href="http://twitter.com/share?text=xxx&via=test_mk" target="_blank" onclick="s_omni.trackSNS('twitter')">twitter</a> 　　　　</li> 　　　　<li> 　　　　　<a href="http://www.facebook.com/share.php?u=http://aaa.c" target="_blank" onclick="s_omni.trackSNS('facebook')">face book</a> 　　　　</li> 　　　　<li> 　　　　</li> 　　　　<li> 　　　　　<link rel="mixi-check-image" type="image/jpeg" href="http://aaa.com//img/site/3.jpg" /> 　　　　　<a href="javascript:void(0);" 　　　　　　 onclick="window.open('http://mixi.jp/share.pl?u=http://aaa.com/&k=cf68" 　　　　　　 src="http://aaa.com/btn5.gif" alt="mixiチェック">mixi</a> 　　　　</li> 　　　</ul> 　　</body> 　</html> END_HTML my $scraper = scraper { 　　process '#share_item ul li a[href^="http://twitter.com/"]', 'twi_url' => '@href'; 　　process '#share_item ul li a[href^="http://www.facebook.com/"]', 'fb_url' => '@href'; }; my $res = $scraper->scrape($html) || die "$!"; print Dumper($res); # $VAR1 = { #　　　　　 'twi_url' => 'http://twitter.com/share?text=xxx&via=test_mk', #　　　　　 'fb_url' => 'http://www.facebook.com/share.php?u=http://aaa.c target=' #　　　　 }; > 「#share_item ul li」 > のように # がつく記述と付かないパターンがあるのですが、 > この違い（#が必要な時）が不明です。 「CSS 一意セレクタ」で調べてみて下さい。

niko314
質問者

お礼

ご回答ありがとうございました！ 頂きました回答を基に、なんとか取得することができました。

niko314
質問者

補足

ご回答頂き、誠にありがとうございました。 a[href^="http://twitter.com/ で、href の行頭が「http://twitter.com/」の データを抜き取る方法ということですね。 私の環境で、全く同じ内容で試してみたのですが process '#share_item ul li a[href^="http://twitter.com/"]', 'twi_url' => '@href'; を実行すると、↓ -------------------------------------- '//*[@id='share_item']//ul//li//a[@href^='http://twitter.com/']' doesn't look like a valid XPath expression: Query: //*[@id='share_item']//ul//li//a[@href^='http:... .....................................^^^ Invalid query somewhere around here (I think) -------------------------------------- のようにXpath の形式が異なると言われ、正常に取得できませんでした。

その他の回答 (1)

回答No.2

たぶん、Web::Scraperで使われているHTML::Selector::XPathが古いです。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. Perl

関連するQ&A

  • jQueryのclickイベントハンドラ

    最近jQueryを勉強中でして、練習の意味で自分で以下のようなページを作ってみました。 【ページの内容】 犬、猫、鳥の画像ボタンを配置して、クリックすると各ボタンのalt属性をアラート表示する 【実際のhtml】 <div class="header"> <ul class="menu"> <li><a href="index.html" id="btn1"><img src="dog.png" alt="Dog"></a></li> <li><a href="index.html" id="btn2"><img src="cat.png" alt="Cat"></a></li> <li><a href="index.html" id="btn3"><img src="bird.png" alt="Bird"></a></li> </ul> </div> 【実際のscript】 $(function(){ var btn1 = $('#btn1'); var photo1 = btn1.find('img'); var name1 = photo1.attr('alt'); btn1.click(function(){ alert(name1); }); var btn2 = $('#btn2'); var photo2 = btn2.find('img'); var name2 = photo2.attr('alt'); btn2.click(function(){ alert(name2); }); var btn3 = $('#btn3'); var photo3 = btn3.find('img'); var name3 = photo3.attr('alt'); btn3.click(function(){ alert(name3); }); }); 上記で一応やりたいことは再現はできるのですが、scriptが冗長なのでもっと短くしたいです。 しかしどんなスクリプトにすればよいかわかりません。 宜しければアドバイスお願いいたします。

  • 以下ＨＴＭＬからｊｓへのを読みこみがどうしてもできません。

    【以下はhtml内の２つの読み込み方でｊｓへ飛ばしてあります。】 <ul id="item1"> <li><a href="javaScript:ShouSai()" onmouseover="Ohen(1)" onmouseout="Nhen(1)"><img src="img/eigyou/Item_mnBT/normalType/item_market_MN.gif" alt="マーケティングリサーチ" width="137" height="26" border="0" id="1mn" /></a></li> </ul> <ul> <li id="item3"><a href="#" onclick="ShouSai('img/eigyou/catalog_big.jpg')">アイテム３ 　　　　　　　　　　<ul> <li>商品パンフレット</li> <li>会社案内</li> <li>求人用パンフレット</li> </ul> </a></li> </ul> ----------------------------------------------------- 【以下js内でalertも確認しましたが、読み込んでないです。】 //alert('kakunin'); function ShouSai(gazou) { var x=window.open('','subWin','width=500,height=300,left=200,top=80',); x.focus(); x.document.write('<body leftmargin="0" topmargin="0"><img src='+'img/eigyou/catalog_big.jpg'+'><p>テスト中。</p><form><input type="button" value="閉じる" onclick="window.close()"></form></body>'); } --------------------------------------------------- >>普通に <a href="#" onclick="="ShouSai('img/eigyou/catalog_big.jpg')">test</a>と余計なタグ抜き確認してみてもやはりjs読み込まないです。ちなみにバリデートしたら、<a>内で<ul>は使用できないと出たのですが、ソース内全てを直す必要はなく、これはこの主旨の原因にはならないですよね？これはほっといたまま作りあげてもＳＥＯ対策には良くないって程度ですよね？ 質問が増えてしまいましたが、どうか主旨の質問の方だけでも、アドバイスいただけると幸いです。宜しくお願いします。

  • 【Jquery】before()でソースを挿入

    Jquery初心者です。　 before()で指定したdivの直前にソースを挿入したいのですが、構文エラーでうまくいきません。 単純なソース（たとえば<p>hello</p>など）はうまく入るのですが、 img等「""」が入るタグがうまく挿入できません。 リストやアンカー、イメージなどを挿入するつもりなのですが、 before()を使う以外で何か方法はありますか？ 書いたソースは <div id="exam">その他の商品はこちら</div> <script type="text/javascript" src="/js/jquery/.js"></script> <script type="text/javascript"> $(function(){ $("div#exam").before("<ul><li><img src="title.gif" alt="おすすめアイテム" /></li><li><a href="/item.html?id=000"><img src="01.gif" alt="アイテムA" /></a></li><li><a href="/item.html?id=001"><img src="02.gif" alt="アイテムB" /></a></li><li><a href="/item.html?id=002"><img src="03.gif" alt="アイテムC" /></a></li></ul>"); return false; }); </script>

  • position fixed内でスクロールさせたい

    css position fixed内でスクロールさせることは可能ですか？ 下記のサイトのドロワーメニューのようにしたいです。 //www.toei-eigamura.com/edosakaba/ 下記のようにしてもうまくいきませんでした。 ・html <nav> <div id="nav__drawermenu-wrap"> <ul> <li> <a class='top-header__social-btn symbol animation-hover action-hover' href="https://plus.google.com/share?url=http:///index.html" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" title='&#xe039;'></a> <a class='top-header__social-btn symbol animation-hover action-hover' href="http://www.facebook.com/share.php?u=http:///index.html" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" title='&#xe027;'></a> <a class='top-header__social-btn symbol animation-hover action-hover' href="http://twitter.com/share?url=</a> </li> <li><a class="link-block" href="#js-about-me"><span class="gotootherpage"><img class="top-gnav__link-sixth__goto-other-page" src="img/common-img/goto-other-page.svg" alt="goto-other-page-image"></span>ABOUTME</a></li> <li><a class="link-block" href="#js-gallary">GALLARY</a></li> <li><a class="link-block" href="#js-gmap">MAP</a></li> <li><a class="link-block" href="#js-contact">CONTACT</a></li> <li><a class="link-block" href="http:///index.html">TOP</a></li> <li><a class="link-block" href="http:///index.html">BLOG</a></li> </ul> </div> </nav> ・ｃｓｓ nav { overflow: auto; } [id="drawermenu"] ul { z-index: 300; width: 100%; height: 100% position: fixed; top: 0; padding-top: 2.8rem; text-align: center; cursor: pointer; margin-left: -100%; transition-propety:all; transition-duration:1s; }

    • ベストアンサー
    • CSS
  • ドロップダウンメニューを作るこのCSSどこが変？

    お世話になります。 Webサイトのメニューボタンにマウスオンすると下部にダウンメニューが飛び出す仕様をCSSで作りたいと思っています。添付ファイルのように、ボタン画像の下にまたメニュー項目（background-imageがついてくる）が展開していくよくある仕様です。 ネットでの情報を参考にしながら、書いたソースが以下のものですが、 問題は(1)ダウンメニューにしたいのにむしろ上部へ表示される (2)テキスト分しか表示されない、きちんと画像全体を表示させたい！ 個人的にもいろいろ試行錯誤してみましたが、どうも分かりませんでした。 もしかしたら、ものすごく基本的なところでつまずいているかもしれませんが、どうかご容赦ください。 もしよろしければアドバイスお願いします。 HTML--- <div id="global_nav"> <ul> <li><a href="#"><img src="images/button_06.gif" alt="TOPボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_07.gif" alt="Aボタン" class="btn"/></a> <ul> <li><a href="#">会社概要</a></li> <li><a href="#">営業所</a></li> </ul> </li> <li><a href="#"><img src="images/button_08.gif" alt="Bボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_08.gif" alt="Cボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_08.gif" alt="Dボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_08.gif" alt="Eボタン" class="btn"/></a></li> </ul> </div> CSS--- #global_nav { float:right; width:720px; margin:0; padding-right:15px; } #global_nav img { float:left; display:block; border:0; } #global_nav ul { list-style:none; margin:0; padding:0; } #global_nav li { min-width:120px; white-space:nowrap; float:left; } #global_nav ul ul { display:none; position:absolute; z-index:10; padding-top:2px; } #global_nav ul ul a { font-family:"ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", sans-serif; font-size:0.75em; color:#FFF; background-image:url(../images/dawnmenu_button.gif); height:40px; width:120px; text-decoration:none; text-align:center; padding:20px 10px 0 10px; } #global_nav li li { clear:left; position:relative; width:100% } #global_nav ul li:hover > ul { display:block; }

    • ベストアンサー
    • CSS
  • mootoolsを使ったドロップダウンメニューを同じページ内に複数使用したい

    javascript初心者です・・。 下記のURLからmootools 一式をDLしてドロップダウンのメニューを 設置しました。 http://www.css-lecture.com/log/javascript/043.html ↑ 1つ目のメニューは問題なく設置できました。 今回私がやりたい事は、同じページ内の違う場所に ドロップダウンメニューをもうひとつ設置したいのですが・・ どこを修正すれば良いかわからず困っています。 今現在の状況としては、 ・上記サイトでDLしたmooltools一式を、コピーして 　単純に2セット用意してみました。 ・htmlを見ると、classではなくIDで組まれていたので、 　2セット目のjs、cssを1セット目とは違うID名に変更してみました。 と、これだけで動くような簡単なものでは無かったのですね・・。 納期も迫り、大変困っています。。 どなたか助言をいただけたらと大変助かります。。 現在制作中のプルダウンの部分のhtml載せておきます。 <div id="menu-container"> <ul id="drop_down_menu"> <li id="btn01"><a href="#"><img src="../common/img/gnavi01_off.jpg" alt="トップ" width="116" height="56" /></a></li> <li class="menu" id="btn02"><a href="#">カテゴリ1</a> <ul class="links"> <li><a href="#">コンテンツ01</a></li> <li><a href="#">コンテンツ02</a></li> <li><a href="#">コンテンツ03</a></li> </ul> </li> <li class="menu" id="btn03"><a href="#">カテゴリ2</a> <ul class="links"> <li><a href="#">コンテンツ04</a></li> <li><a href="#">コンテンツ05</a></li> <li><a href="#">コンテンツ06</a></li> </ul> </li> <li class="menu" id="btn04"><a href="#">カテゴリ3</a> <ul class="links"> <li><a href="#">コンテンツ07</a></li> </ul> </li> <li id="btn05"><a href="#">カテゴリ4</a></li> </ul> </div> ↑これが1つ目のプルダウンメニューの箇所で、 同じように2つ目のメニューもid名を変えて組みました。 mootoolsのjsは、 header内に外部jsとして1つ目、2つ目のプルダウンメニュー分のjsを 順番に読み込ませています。 （先に読み込ませた方のプルダウンメニューが決まって動作しません）

  • スクレイピングの仕方

    phpのgoutteを使用して、 下記htmlのスクレイピング結果をDBに格納したいと考えています。 li部分が繰り返し部分後なっております。 ■htmlのスクレイピング部分 <ul id="test"> 　<li class="clearfix"> 　　<div class="thumbox"> 　　　<a href="http://xxxx.co.jp" target="_blank""> 　　　　<img src="http://xxx.co.jp/01.jpg" alt="01" class="thumb"> 　　　</a> 　　</div> 　　<h4> 　　　みだし 　　</h4> 　　<p> 　　　文章 　　</p> 　</li> 　<li> 　　上記liと同じで、繰り返し。(画像ファイル、文章等は異なります。) 　</li> </ul> phpソースは、下記部分になります。 ■スクレイピングphpソース $crawler->filter('ul#test a')->each(function($element) { var_dump($element->attr('href')); }); 現状のphpソースでは、filter('ul#test a')のため、 aタグのhrefの内容しか抜き取れていません。 やりたいこととしては、 　1．aタグのhref値 　2．imgのsrc値 　3．aタグの後のhタグの見出し 　4．pタグの文章を抜く 上記4つを一回で抜き出し、後はli部分をぐるぐる回して、１～4の値を抜きたいのです。 最終的には、 　・抜いた4つの値をDBに1行のレコードとして格納。 　・残りのli部分も同じように繰り返す。 といったことをやりたいので、 $crawler->filter('タグ書き方)->each(function($element) { 変数1 =　1．aタグのhref値 　　　変数2 =　2．imgのsrc値 　　　変数3 = 3．aタグの後のhタグの見出し 　　　変数4 = 4．pタグの文章を抜く 　　　DBにIns(変数1,変数2,変数3,変数4) }); と一回の関数の中で、4つの値を取り出し、DBに放り込みたいのです。 現状、私が記述しているfilter条件では、aタグしか取り出せないのです。 どのようにソースを修正すれば、対応できるのかわかりません。 良い知恵をお持ちの方がいらっしゃいまいたら、 ご教授お願いいたします。

    • ベストアンサー
    • PHP
  • リストを一行にせずに横並びにする方法

    リストタグを一行にすると横並びにはなりますが、ソースが見ずらいです…。 コメントを使わないで横並びにする方法はありますか？ ■html <ul><!-- --><li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li><!-- --><li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li><!-- --></ul> ■css li { display: inline; } ↓のように<!---->をとっても表示を一行にする方法があれば教えてください。 <li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li> <li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li>

  • ＣＳＳレイアウトの配置ずれについて

    本を見ながらＨＴＭＬとＣＳＳを作成したのですが、どのブラウザで見てもclass指定した"slideItems"の位置が右にズレてしまいます。解決方法わかる方、教えてください。 以下、htmlとcssです。 html↓ <body> <div id="newBook"> <div class="item"> <ul id="slideItems"> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> <!--2ページ--> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> <!--3ページ--> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> </ul> </div> <div class="leftBtn"> <a href="javascript:startmove('left');"><img src="img/prev.gif" alt="左へ" width="25" height"25" border="0" /></a></div> <div class="rightBtn"> <a href="javascript:startmove('right');"><img src="img/prev_r.gif" alt="左へ" width="25" height"25" border="0" /></a> </div> </div> </body> css↓ #newBook { margin: 30px; position: relative; } .item { height: 115px; width: 500px; padding: 10px 0px; overflow: hidden; position: absolute; left: 40px; top: 0px; } .leftBtn,.rightBtn { text-align: left; width: 40px; position: absolute; top: 0px; } .leftBtn { text-align: left; left: 0px; } .rightBtn { text-align: right; left: 540px; } .item ul { width: 1500px; position: absolute; left: 0px; top: 0px; } .item li { background-color: #999999; height: 100px; width: 100px; list-style-type: none; padding: 10px 0px 5px; float: left; text-align: center; } #slideItems { position: absolute; left: 0px; top: 0px; }

  • CSSのリストタグについて

    下記のソースのようにリストタグに画像を並べます。 ここまではいいのですが、firefoxなどブラウ上で文字サイズを大きくすると画像の上下に余白が出来てしまうのは何ででしょうか。。 <ul> <li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li> <li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li> <li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li> <li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li> <li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li> </ul> あるサイトのソースを見るとliタグににfont-size:1px;を指定されていました。コレでも解決するのですがこのやり方は良いのでしょうかね。。 質問の内容がわかりにくい時は「わかりにくい！」と言ってください。。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する