前回の記事では、XPathの基本概念を簡単に紹介しました。今回はXPathによるWebページ（HTML）からデータを指定・取得する方法、つまりXPathの書き方を紹介します。

1.タグ（要素）で指定する

下記のHTMLサンプルで、文章が のように、といった記号で囲まれているのが分かります。このようなといった記号を、タグと言います。

<タグ名>ここにコンテンツが入ります... </タグ名>

最初のタグを「開始タグ」、終わりのタグを「終了タグ」といいます。そしてこの開始タグから終了タグまでの全体を、要素と呼びます。

下記のHTMLの中で赤色で表示された部分はタグです。（Firefoxで青色、Chromeでは紫色で表示されます。）

下記はHTMLでよく見かけるタグのまとめです。詳しくのはこの記事を合わせてご覧ください！

XPathの最も一般的な書き方は、スラッシュ “/” で区切りながらタグを記述します。

例えば、このHTMLから『Harry Potter』を取得したい場合は、ツリー構造の上から順に『htmlタグ→bodyタグ→h1タグ』と指定できます。次のように書きます。

/html/body/h1

また、『//』を用いて、途中までのパスを省略することができます。

//h1

タグを複数に合致する場合に、N番目のタグを指定することができます。この例では、『7,631円』を取得する場合、「div」の行から2行目の「span」であるため、次のように書きます。

//div/span[2]

抽象化にすると、タグ（要素）で書くXPath構文はこうなります。

//タグ名
//タグ名/タグ名

2.属性で指定する

属性とはタグの中に記載されていて、タグの情報を細かく表すものです。タグに属性をつけることで、要素の効果を指定したり、具体的な指示を付け加えることが出来ます。属性は通常、「id="booksTitle"」のように表示されます。なお、属性は複数指定する事も可能です。

<タグ名 属性名="属性値">

最も一般的な属性には、href、title、style、src、id、classなどがあります。詳しくはこの記事を合わせてご覧ください！

XPathでは属性を『@』の関数で表します。

例えば、『Harry Potter』を取得したい場合、XPathは次のように書きます。

//h1[@id="booksTitle"]

抽象化にすると、属性で書くXPath構文はこうなります。

//タグ名[@属性名="属性値"]

もし同じ属性を持つすべての要素を取得する場合、次のように書きます。

//*[@属性名="属性値"]

3.テキストで指定する

下記のようにタグで囲まれているのはテキストです。

<タグ名>ここにテキストが入ります... </タグ名>

Webページからデータを取得するのは、通常ページ内のコンテンツまたはテキストを取得することです。ですから、取得したいテキストを直接指定することができます。

XPathではテキストを『text()』の関数で表します。

例えば、『Harry Potter』を取得したい場合、テキストで指定すると、次のように書きます。

//h1[text()="Harry Potter"]

抽象化にすると、属性で書くXPath構文はこうなります。

//タグ名[text()="取得するテキスト"]

もし同じテキストを持つすべての要素を取得する場合、次のように書きます。

//*[text()="取得するテキスト"]

4.タグ関係で指定する

HTMLのツリー構造において、すべての要素が親子／兄弟関係を持っています。

1つまたは複数の要素を含む要素は親要素と呼ばれ、含まれる要素は子要素です。子要素は1つのみの親があり、親の開始タグと終了タグの間にあります。同じ親を持つ要素は兄弟要素と呼ばれます。

具体的な例も見てみましょう。

以下のサンプルは、[body]要素を基点に、[body]要素は[h1]要素と[div]要素の親で、[h1]要素と[div]要素は、[body]要素の子です。親子／兄弟関係にある要素を取得し、それぞれにスタイルを変更する例です。

[h1]要素と[div]要素は、同じ親[body]要素を持つため、兄弟要素です。

また、[div]要素は2つの[span]要素の親ですから、2つの[span]要素は[body]要素の子孫要素です。

カレント要素を基点として、親子、もしくは兄弟関係にある要素を取得することができます。例えば、『7,631円』を取得したい場合、タグの関係で指定すると、下記のように書くことができます。

• [div]要素の子要素とする場合

//div/span[2]

• [body]要素の子孫要素とする場合

//body//span[2]

• [span class="author notFaded"]要素の兄弟要素とする場合

//span[@class="author notFaded"]/following-sibling::span[1]

• [span class="tax_postage"]要素の兄弟要素とする場合

//span[@class="tax_postage"]/preceding-sibling::span[1]

兄弟関係のあるタグを指定するには『following-sibling::』と『preceding-sibling::』という2つの関数をよく使います。

『following-sibling::』は、指定された要素より後の兄弟要素を指定する
『preceding-sibling::』は、指定された要素より前の兄弟要素を指定する

『following-sibling::』は、テーブル要素を指定する時に大活躍します。例えば、下記のHTMLサンプルがあります。

このHTMLはページに変更すると、以下のようなテーブルの形になります。

この例では、店名の『12345』取得します。ただし、[td]要素が複数あり、//td[1] で対応できなくなります。また、もし複数のページから、同じ構造のテーブルを一括取得する場合、固定的な値「店名」を基点として、『following-sibling::』を使うほうが薦めです。次のように書きます。

//th[text()="店名"]/following-sibling::td[1]

抽象化にすると、タグ関係で書くXPath構文はこうなります。

もし上記の構文で複数に合致する場合に、[Ｎ] を付けてN番目のタグを指定することができます。

いかがでしょうか？以上は最も使われるXPath書き方です。さっそくお試してみてください。次回はXPathによく使われる関数を紹介します。お楽しみに！

元記事：https://helpcenter.octoparse.jp/hc/ja/articles/360013122059