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の抽出する方法

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

　この３つの手順だけで、クリップボードに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を取得できます。

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

f:id:dkfj:20140419132730p:plain

FireBugのConsoleの$x関数

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

f:id:dkfj:20140419134527p:plain