読者です 読者をやめる 読者になる 読者になる

それマグで!

知識はカップより、マグでゆっくり頂きます。 takuya_1stのブログ

習慣に早くから配慮した者は、 おそらく人生の実りも大きい。

Xpathをカンタンに試すコマンドとその使用例・チートシート

はじめに。

xpath 便利です。

Xpathの書式を学ぶにはトライ・アンド・エラーが1番です。Xpathをもっと使うのためには、手軽なツールが必要です。

手軽なツールはlibxmlについてくるxmlintです。xmllint についてはココに書きました→xmlを扱う xmllint コマンドで xpath - それマグで!

しかし、xmlint では日本語の取扱が残念なので、xpathコマンドをnokogiriで再発明しました。

学習用に、Xpathコマンドを作りました。

Xpathの便利さをもっと気づいて欲しい。なので手軽にXpathを試して練習したい。手軽に試したら、Xpathできたら楽しいよね。 で、お手軽にXpathを作れるような方法を考えた結果、Nokogiriを利用したコマンドを作ることにした。

ダウンロード
git clone git@gist.github.com:894c5aeabc620344bcea.git
cd 894c5aeabc620344bcea
cp xpath /usr/local/bin/
chmod +x /usr/local/bin/xpath
OSX 標準のxpath/xlimt 関数は日本語の扱いが残念

わざわざ作ったのは、OSXxpathは日本語の扱いが残念だったのでした。/usr/bin/xpathPerlで書かれているので、Perlを編集したらいいんだろうけど、まぁOSX標準添付を編集するのも依存増えるからいやなので、じぶんでつくることにした。

Xpath のサンプル

実験環境が整ったら、Xpathについて見ていきたいと思います。

Xpath は次の書き方を覚えておけば戦える。

//*         All nodes.
(//*)[1]    First of all node.
(//a[1])    A Node list of "First child" in a parent node.
//a//span   A span node ancestor of a.
//a/@href   An  attribute  named href in all a node.
//a[@href="/index.html"] A node with href  attribute is  "index.html".
//a[contains(@href,"index.html")] A node contains  "index.html" in its href.
//title | //meta  Node list of <title> or <meta> nodes.(Join result)
//img[ contains(@src,'jpg') or contains(@src,'png')]  Nodes with attributes has some keyword.
//form[ //input[name="username"] ]    A node which has a node of pointed by xpath.
//div[@id=main]//form   A node ancester of node.
//div/*   A node list of children of div.
//div//*  A node list of ancesstor of div.
//table//td[2] A td node second child of parent which in a table node.

xpath チートシート

xpath 内容
//* 全てのノード
//a 全ての<a> ノード
(//a)[1] 全ての<a> ノードを取得して、最初の1個
(//a)[2] 全ての<a> ノードを取得して、2番め(配列アクセス)
(//a[1]) 親ノード中の最初の1個の<a>をすべて
//a/span span ノードで、親が<a>のものをすべて
//a/@href aノードのすべてのhref属性
//a/text() aノードのすべてのtext()表現
//a[@href="/index.html"] aノードのうち href属性が"/index.html"と合致するモノすべて
//a[contains(@href,"index.html")] aノードのうち href属性に index.html を含むものすべて
//title | //meta title と meta タグを両方
//img[ contains(@src,'jpg') or contains(@src,'png')] img ノードで src に jpg/pngを含むものすべて
//div[ contains(@class,'link') and contains(@class,'book')] div.link.bookに相当するもの
//form[ ./input[name="username"] ] 子ノードに //input[name="username"]を持つform ノード
//div[@id=main]//form form ノードで、親が div[@id=main] の物をすべて
//div/* div の子要素すべて
//div//* div の子孫要素をすべて
//table//td[2] table タグで2番めのtdのもの(2列目をすべて)
//*[@id] id属性があるものをすべて
id("tid_123") id属性がtid_123のもの(id="tid_123")

これだけあれば、8割の場面で戦えると思う。

xpath のコマンド

たとえば、このブログにどれくらいA要素が含まれるか

xpath http://takuya-1st.hatenablog.jp/  "count((//a))"
137.0
--------------------
 xpath: count((//a))
result: Float

たとえば、このブログのmeta要素を取り出すと・・・

xpath http://takuya-1st.hatenablog.jp/  "/html/head/meta"
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=9; IE=10; IE=11">
<meta itemprop="name" content="それマグで!">
(中略)
<meta name="google-site-verification" content="h5FlKu0qSTuoG6mttmTa0x1d0Nq9-Z2XmBMnkYI8hsU">
--------------------
 xpath: /html/head/meta
result: 19 found

たとえば、curl の結果などと組合せるには

curl -s http://www.drk7.jp/weather/ | ./xpath "//a[text()='大阪府']"
<a href="/weather/xml/27.xml">大阪府</a>
<a href="/weather/json/27.js">大阪府</a>
<a href="/weather/xml/pollen/27.xml">大阪府</a>
<a href="/weather/json/pollen/27.js">大阪府</a>
--------------------
 xpath: //a[text()='大阪府']
result: 4 found

この実験したソースはコレ。

gist.github.com

では残りの二割は?

  • 子孫ノード、祖先ノード
  • 兄弟ノードの選択
  • 文字列関数
  • ノード関数

などの各種セレクタと関数とを組み合わせると、更に戦える。

祖先ノード

ノードをツリーのルート方向へ上位へ辿って探していく

たとえばfooterを含むセクションを探すには

//footer/ancestor::section
兄ノードを辿る

たとえば、アクティブなli#active のひとつ前のli

<li> ←ここ
<li id="active">
<li>

これを選ぶには

//li[@id='active']/preceding::li

便利ね.ただし liタグが複数アレば全部取れちゃうので絞ること

弟ノードを取り出す。

選択しているノードの1つ後ろを取り出すには

<li>
<li>
<li>
<li id="active">
<li>←ここを取り出す。

これを選ぶには

//li[@id='active']/following::li

便利ね.ただし後ろに liタグが複数アレば全部取れちゃうので絞ること

自分上位の「祖先」を辿る

//input[name='user']//ancestor::form

Xpathだってデータベース

XPathはとても便利で、HTML・XMLを扱うのには必須のツール

Xpathはクエリ、XMLはテーブルといえる。XMLだって立派なデータベースになると思います。

xpath 扱えるとyamlよりずっと便利ですよ。yaml ならJSONのほうが楽だし。

関連資料

XPATHについて。XMLのXpathで条件にマッチしたノードを取り出す。 - それマグで!

document.evaluate でXPATH する具体的サンプル - それマグで!

Xpathで「条件◯◯」を子孫ノードに持つ要素を選択する - それマグで!

文字を含むタグを取り出すxpath - それマグで!

2015-08-03 重ねがけ出来るようにした

ページ階層をたどってURLを抽出するときに不便だから、重ねがけ出来るようにした。

xpath http://www.yahoo.co.jp "//a/@href" | xpath "//a/@href"|xpath "//a/@href"

ただし、絶対URLしか対応できない。。。。

2015-09-02 追記

xpath 表現でid() を知ったのでサンプルに追記

2015-12-02 追記

XPath簡易リファレンス - aqubi+shin1のサイトに再見できたので、追記。

広告を非表示にする