11
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

XPath基礎編(1)ー XPathの基本概念

Last updated at Posted at 2020-05-15

Webサイトからデータを自動取得する方法は主に2つあります。

1つは、Pythonなどのプログラミング言語を使ってWebクローラーを作成する方法、もう1つは、OctoparseのようなWebスクレイピングツールを使用してデータを収集する方法です。

しかし、どれにしても、XPathは重要な役割を果たしています。XPathの書き方が分かれば、データをより正しくて効率的に取得できます。

そのため、このXPathシリーズでは、XPathの基本概念から書き方、さらには応用までを詳しくご紹介したいと思います。

1. XPathとは?

XPath(XML Path Language)とは、ツリー構造を持つXMLやHTMLドキュメントから、特定の要素や属性値を抽出するための簡潔な構文(言語)です。

Webページは通常HTMLで記述されているため、XPathはWebページの情報を取得する際によく利用されます。ブラウザ(ChromeやFirefoxなど)でWebページのHTMLを表示するには、F12キーを押すと、対応するHTMLドキュメントに簡単にアクセスできます。

img_v3_02fs_1a11a43b-8273-4752-be6f-ee79bccfbcag.jpg

2. XPathの仕組み

それでは、XPathが具体的にどのように動作するのかを見てみましょう。下記の画像はHTMLドキュメントの一部です。

2.png

HTMLはツリー構造のようになっており、各要素が異なる階層を持っています。
例えば、この例では、レベル1は [bookstore] で、レベル2は [book] になります。
そして、[Title]、[author]、[year]、[price] などはすべてレベル3に該当します。

①山括弧

山括弧(例:<bookstore>)で囲まれたテキストは「タグ」と呼ばれます。HTMLの要素は、通常開始タグと終了タグで構成され、その間にコンテンツが挿入されます。
具体的には、以下のような形式になります。

<○○>(開始タグ)ここにコンテンツが入ります... </○○>(終了タグ)

②スラッシュ

さらに、XPathはスラッシュ“/” で区切りながら階層を記述し、基準となるノードから別のノードを指定できます。これはURLに似ています。
この例では、要素「author」を検索する場合、XPathは次のようになります。

/bookstore/book/author

それでは、以上の構造がどのように機能するかを理解するためには、コンピューター上で特定のファイルを探す方法を考えてみてください。
3.png

例えば、「author」という名前のファイルを見つけるには、正しいファイルパスは \ bookstore \ book \ author です。

コンピューター上のすべてのファイルには独自のパスがあるように、Webページ上の要素にもそれぞれパスがあります。このパスはXPathで表現されています。

③絶対XPathと短いXPath

ルート要素(ドキュメントの一番上の要素)から始まり、その中にあるすべての要素を順にたどって目標の要素に到達するXPathは「絶対XPath」と呼ばれます。
絶対XPathは、ドキュメント全体の構造に基づいて要素を特定するため、特定の要素への道筋が明確に示されます。

例: /html/body/div/div/div/div/div/div/div/div/div/span/span/span…

絶対XPathは、パスが長く複雑になることがあり、混乱を招く可能性があります。そのため、途中までのパスを省略してシンプルに記述するために、「//」を使用することができます。この省略形を「短いXPath」とも呼び、特定の要素に簡単にアクセスできるようになります。

短いXPathは、HTMLドキュメント内の要素を指定する際に、完全なパスを記述する代わりに一部を省略して、より簡潔に要素を見つける方法です。短いXPathを使うと、ドキュメント内のどの位置に要素があるかに関係なく、該当する要素を素早く検索することができます。

例えば:

絶対XPath: /bookstore/book/author
短いXPath: //author

3. XPathを表示・書くには

インターネット上のWebサイトは、HTMLやXMLなどのマークアップ言語で構成されています。ただし、Webスクレイピングを行うツールの中には、HTMLとXMLの両方に対応していないものもあります。

【Google Chromeの場合】

Chromeでこのページを表示し、右クリックメニューから 「検証」 を選択して開発者ツールを開きます。ElementsタブのHTML表示で、対象の要素を右クリックし、メニューから 「Copy」→「Copy XPath」 を選択することで、その要素を取得するためのXPathがクリップボードにコピーされます。
xpath-chrome2.png

表示されている「Elements」タブのHTMLで “Ctrl + F” を押して検索バーを表示し、XPathを入力すると、該当する要素がハイライトされます。
mceclip0.png

また、「XPath Helper」という拡張機能を追加すれば、XPathを入力するだけで一致する要素が表示されます。(XPath Helperをインストールする)
img_v3_02fs_11214d40-3490-4830-a1db-fac43abaa05g.jpg

【Firefoxの場合】 

Firefoxの旧バージョンでは、拡張機能「Firebug」を利用することができます。(Firebug&FireXPath拡張機能をインストールする方法

FirefoxでWebページを開く➡Firebugボタンをクリック➡ページ内の要素をクリック➡その要素のXPathが表示されます。
mceclip3.png

以上がXPathの基本的な概念でした。次回はXPathの書き方についてご紹介しますので、どうぞお楽しみに!

元記事:【図解】XPathとは?基本概念から書き方までわかりやすく解説!

11
13
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?