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ドキュメントに簡単にアクセスできます。
2. XPathの仕組み
それでは、XPathが具体的にどのように動作するのかを見てみましょう。下記の画像はHTMLドキュメントの一部です。
HTMLはツリー構造のようになっており、各要素が異なる階層を持っています。
例えば、この例では、レベル1は [bookstore] で、レベル2は [book] になります。
そして、[Title]、[author]、[year]、[price] などはすべてレベル3に該当します。
①山括弧
山括弧(例:<bookstore>
)で囲まれたテキストは「タグ」と呼ばれます。HTMLの要素は、通常開始タグと終了タグで構成され、その間にコンテンツが挿入されます。
具体的には、以下のような形式になります。
<○○>(開始タグ)ここにコンテンツが入ります... </○○>(終了タグ)
②スラッシュ
さらに、XPathはスラッシュ“/”
で区切りながら階層を記述し、基準となるノードから別のノードを指定できます。これはURLに似ています。
この例では、要素「author」を検索する場合、XPathは次のようになります。
/bookstore/book/author
それでは、以上の構造がどのように機能するかを理解するためには、コンピューター上で特定のファイルを探す方法を考えてみてください。
例えば、「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がクリップボードにコピーされます。
表示されている「Elements」タブのHTMLで “Ctrl + F” を押して検索バーを表示し、XPathを入力すると、該当する要素がハイライトされます。
また、「XPath Helper」という拡張機能を追加すれば、XPathを入力するだけで一致する要素が表示されます。(XPath Helperをインストールする)
【Firefoxの場合】
Firefoxの旧バージョンでは、拡張機能「Firebug」を利用することができます。(Firebug&FireXPath拡張機能をインストールする方法
FirefoxでWebページを開く➡Firebugボタンをクリック➡ページ内の要素をクリック➡その要素のXPathが表示されます。
以上がXPathの基本的な概念でした。次回はXPathの書き方についてご紹介しますので、どうぞお楽しみに!