前回の記事では、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