Webスクレイピングに不可欠！Xpathのまとめ

![xpath.jpeg](https://qiita-image-store.s3.amazonaws.com/0/262932/8021bb6d-c0eb-a8d4-11cb-ba9807baf820.jpeg)

[Octoparse](https://www.octoparse.jp/)を利用する時、要素をクリックすることでデータの位置が自動識別されますが、ページ遷移、データ取得などのステップにXpathを直す場合もあります。Octoparseを活用するには、XPathの知識は欠かせないので、今回はXPathについてまとめします。

 

#XPathとは

 XPath (XML Path Language)とは、XML形式の文書から、特定の部分を指定して抽出するための簡潔な構文(言語)です。HTMLもXMLの一種とみなすことができるため、HTML形式の文書にも対応します。Xpathは、WebスクレイピングでWebページの情報を取得する時によく利用します。

 

#FirefoxとChromeで XPathを取得する

##Firefox

 Firefox使ってい場合、XPathを表示するには、プラグイン - 「Firebug」をインストールする必要があります。（注：FireBugは、Webページ上の任意の要素のHTML / SCCを簡単に検索して、Webページのデバッグと開発を簡単にするために使用されます）。

FirefoxでWebページを開き、Firebugボタンをクリックし、ページ内の要素をクリックして、そのXPathを取得できます。または、ページを右クリックするだけで、「Inspect in FirePath」オプションが表示されます。表示されているElementタブのhtmlで、要素を右クリックし、「Copy XPath」でその要素を取得するためのXPathがクリップボードにコピーされます。
（Firebugは旧バージョンのFireboxでのみ利用可能です。[古いバージョンのFireboxをダウンロードする](https://www.filehorse.com/download-firefox-32/old-versions/))
 

##Chrome

Chromeを使っている場合は、右クリックメニューの「検証」から開発者ツールを表示します。表示されているElementタブのhtmlで、要素を右クリックします。メニューの「Copy」→「Copy XPath」でその要素を取得するためのXPathがクリップボードにコピーされます。

 

#XPathの書き方

Octoparseでは自動認識のXPathはブラウザでコピーしたXPathと同じです。しかし、XPathの表示式が多いので、多くのページを処理する時、このようなXPathは無効なる可能性があります。ですから、自分でXPathを書く必要があります。それではXPathの書き方を解説していきます。

まずXPathの書式を示します。

　**軸::ノードテスト[式]**

 

##1.軸

軸は、ツリー上の位置関係を指定するものです。軸の代表的なものとして、以下のような種類があります。 

|      軸       |       意味    |    省略記述    |
|:-----------------|------------------:|:------------------:|
| child::          |          子ノード    |     （何も書かない）   |
| self::           |     カレントノード    |       .            |
| parent::         |         親ノード       |        ..          |
| descendant-or-self::               |      すべてのノード     |         //         |
| attribute::             |       祖先ノード        |              |
| descendant::          |        子孫ノード     |             |
| following::          |      起点より後に位置するノードすべて（子孫ノードを除く）      |             |
| preceding::          |      起点より前に位置するノードすべて（祖先ノードを除く）      |             |
| following-sibling::         |           起点より後に位置する兄弟ノード |            |
| preceding-sibling::         |           起点より前に位置する兄弟ノード |            |

軸を簡略化して記述する場合は、軸とノードの区切り記号である「::」は省略します。

##2.ノードテスト

ノードテストは選択するノードの型と名前を指定します。XML 文章内で特定のノードの位置を指定するための式をロケーションパスと呼びます。ロケーションパスは、URLのように『/』で要素を繋げて書きます。ロケーションパスには、現在位置のノードを起点として指定する「相対ロケーションパス」と、ルートノードを起点として指定する「絶対ロケーションパス」の2種類があります。

ロケーションパスには、厳密かつ詳細に記述する書き方と、簡略に記述する書き方（省略シンタックス）の2種類があります。

省略シンタックスの主な構文（ロケーションステップ）を以下の表に示します。

|     構文        |             意味  |
|:-----------------|------------------:|:------------------:|
|  name          |    子要素nameまたは属性name。    |
|    /           |    ルートノードを選択します。     |
|   //           |    ルートノードの子孫ノードから要素ノード element を全て選択します。      |
|    .           |    カレントノード（現在位置のノード）を選択します。          |
|    ..          |    カレントノードの親を選択します。        |
|     @          |    属性ノードを選択します。     |
|     *          |    指定したパスの直下の全ての子要素または属性。     |
|  text()        |    指定したパスの直下のテキストを選択します。指定形式：パス/text()     |
|  node()        |  指定したパスの直下のノードを選択します（属性ノードは含みません）。指定形式：パス/node()    |

 

##3.式

式は軸::ノード で指定した条件をさらに細かく指定するために使用します。

ノードを限定するには node_name[2] のように番号を指定するか、 node_name[@attrib_name="value"] のように条件を指定します。条件指定はand ,orなどで複合できます。特定のノードまたは特定の値を指定する時、常に角括弧を使います。

 

 

#XPathを試してみる

さて、XPathの書き方を了解した以上、いくつかの例を通して、XPathを書いてみましょう。

以下のXML文書を例として使います。

```xml
<?xml version="1.0" encoding="UTF-8"?>

<bookstore>

<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>

<book category="children">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>

<book category="web">
<title lang="en">XQuery Kick Start</title>
<author>James McGovern</author>
<author>Per Bothner</author>
<author>Kurt Cagle</author>
<author>James Linn</author>
<author>Vaidyanathan Nagarajan</author>
<year>2003</year>
<price>49.99</price>
</book>

<book category="web">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>

</bookstore>
```

 

例1・すべてのタイトルを選択する

**/bookstore/book/title**

例2・最初の本のタイトルを選択する

**/bookstore/book[1]/title**

例3・すべての価格を選択する

**/bookstore/book/price**

 例4・カテゴリは「web」である本のタイトルを選択する

**/bookstore/book[@category="web"]/title**

 

 

#まとめ

以上がWebスクレイピングに便利なXPathのまとめでした！いかかでしょうか？
やや難しいですが、Webスクレイピングに活用するには不可欠なものですので、ぜひXPathを試してみてください！