プログラマでありたい

おっさんになっても、プログラマでありつづけたい

FireFoxやChromeを使って任意のノードのXPathを簡単に抽出する方法について

 「Ruby製の構文解析ツール、Nokogiriの使い方 with Xpath」というエントリーで、Nokogiriの使い方に絡めてXPathの記述をちょこっと書きました。XPathは、XMLやHTMLのノードを指定する為の構文です。XPathを使うことにより、HTML中のタグも一意に指定することが出来ます。例えば、titleタグをXPathで指し示すのであれば、ルートノードであるhtmlタグの下のheadタグの下のtitleタグという構造から/html/head/titleといった表記になります。複数ある要素の場合、img[1]といった配列で指定することも可能なので、基本的には全てのタグを指定出来ます。XPathは色々なところで使われるようになっているので、スクレイピングに限らず覚えておいたら便利です。
 しかし、問題が一点あります。目的のノードのXPathを、どうやって抽出するのか。XPathは、基本的には上からタグを辿っていくと解ります。ただし、昨今の複雑怪奇なHTMLを根気よく辿っていける人は、違う職業を探した方が良いと思います。FireFoxやChromeを使うと、選択しているノードのXPathを簡単に抽出できます。知っている人にとっては当たり前ですが、知らなかった人には革命的なので紹介しておきます。

ChromeでXPathの抽出する方法



  1. 目的のノード(場所)を選択している状態で、右クリックを押します。
  2. メニューの中から「要素の検証」を選択します。
  3. 選択されているノード(青くなっている部分)の上で右クリックを推して、「Copy XPath」をクリックします。

 この3つの手順だけで、クリップボードにXPathがコピーされます。
f:id:dkfj:20140419130710p:plain


 上記の例は、Amazon.co.jpの個別商品ページから、価格を抜き出している例です。コピーされたXPathは、次のようになっています。

//*[@id="actualPriceValue"]/b


 Chromeで抜き出すXPathは、目的のノードに一番近いID属性からの相対パスです。実際のHTMLは、下記のようなものです。(インデント等を多少修正しています。)

<td id="actualPriceContent">
	<span id="actualPriceValue">
		<b class="priceLarge">¥ 3,024  </b>
	</span>
    <span id="actualPriceExtraMessaging">    
	    <span></span>
		<b>通常配送無料</b>
		<a href="/gp/help/customer/display.html/ref=mk_sss_dp_1?ie=UTF8&amp;nodeId=642982&amp;pop-up=1" target="AmazonHelp" onclick="return amz_js_PopWin('/gp/help/customer/display.html/ref=mk_sss_dp_1?ie=UTF8&amp;nodeId=642982&amp;pop-up=1','AmazonHelp','width=550,height=550,resizable=1,scrollbars=1,toolbar=0,status=0');">詳細</a>
	</span>
</td>

 目的の情報である価格はBタグで囲まれ、その一つ上がSpanタグということが解ります。このSpanタグには、actualPriceValueというID属性がついています。HTMLにおけるID属性は、文章内で要素を一意に識別するための識別子です。取得したXPathは一意の要素であるactualPriceContent属性をもつSpanタグの下のBタグということを示しています。

FireFoxでXPathの抽出する方法



 FireFoxの場合も、ほぼ同様の操作で取得できます。ただし前提として、FireBugをインストールしている必要があります。FireBugはアドオンなので、FireFoxのメニューのツール->アドオンから「アドオンの入手」の検索窓でFireBugを検索すれば簡単にインストールできます。インストール後は下記の手順でXPathを取得できます。

  1. 目的のノード(場所)を選択している状態で、右クリックを押します。
  2. メニューの中から「FireBugで要素を調査」を選択します。
  3. 選択されているノード(青くなっている部分)の上で右クリックを推して、「XPathをコピー」をクリックします。

f:id:dkfj:20140419132730p:plain

FireBugのConsoleの$x関数



 FireFoxでXPathを検証する方法があります。FireBugには、幾つもの組込み関数が用意されています。その中の一つに、$x関数というものがあります。これは、任意のXPath要素を取得するというものです。使い方は、FireBugのコンソールタブから一番下の「>>>」と表示されているところで、$x("//title")といった感じで、XPathを記述します。指定に間違いがなければ、該当のノードが取得されます。

f:id:dkfj:20140419134527p:plain

ちゃんとXPathを指定したつもりなのに上手くいかない場合は、これを使って検証すると良いと思います。またFireBugには、これ以外にも便利な機能は沢山あります。いつかまとめてみようと思います。

まとめ



 考えてみれば、ブラウザはHTMLの構文解析を行っている訳なので、上記のようなことを把握しているのは当たり前なんですね。ということで、XPathに迷ったらブラウザを使いましょう。


See Also:
Ruby製の構文解析ツール、Nokogiriの使い方 with Xpath - プログラマになりたい
Ruby製のクローラー Anemoneの文字化け対策
あらためてRuby製のクローラー、"anemone"を調べてみた
オープンソースのRubyのWebクローラー"Anemone"を使ってみる
JavaScriptにも対応出来るruby製のクローラー、Masqueを試してみる
複数並行可能なRubyのクローラー、「cosmicrawler」を試してみた

Rubyによるクローラー開発技法

Rubyによるクローラー開発技法