ウェブスクレイピングで使用する正しいセレクタをご存知ですか？Webスクレイピングは、インターネットからデータを抽出するために、ここ10年でかなり普及してきました。それは、ビジネスがより良いビジネス上の意思決定を行うためにデータを取得し、分析するのに役立ちます。自動化技術のおかげで、ウェブスクレイピングは今ほど簡単になったことはありません。
Do you know which is the correct selector to use in web scraping? Web scraping has been quite popular in the recent decade to extract data from the internet. It helps businesses acquire and analyze data to make better business decisions. Thanks to automated technologies, web scraping has never been easier than it is now.
しかし、どのツールやフレームワークを選んでも、スクレイパーがデータを丁寧にスクレイピングするためには、重要な決断をしなければならない。それは、XPathとCSSセレクタのどちらを使ってウェブ要素を抽出するかということです。
では、既存の例をいくつか挙げてみよう。
XPathセレクタとは？
XPathはXML Path Languageの略。しかし、XPath は、ウェブスクレイピングのように、XML ドキュメントや HTML からタグやタグのグループを選択するために、XML ではない構文を使用します。XPath を使用すると、HTML ツリー全体を走査することなく、HTML または XML 要素に直接アクセスする式を記述することができます。
XPathを使ってどのように要素にアクセスできるかを理解するために、HTMLコードを使ってさらに深く掘り下げてみましょう。すでに基本的なHTMLを知っていると仮定します。
<!doctype html>
<html xmlns=”http://www.w3.org/1999/xhtml” lang="en" xml:lang="en">
<head>
<meta charset="utf-8">
<title>Awesome Products at your Fingertips</title>
</head>
<body>
<h1>Description of product features</h1>
<p>These products are great. So let's just look at the features !</p>
<ul id="product-list" class=”basic-list”>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
上記のコードをお好きなエディターで入力し、products.htmlとして保存してください。その後、ブラウザ（できればグーグル・クロームでこの例を見ていくので）で見ることができる。
ブラウザがこのコードを実行すると、HTMLがフレーズ化され、要素のツリー表現が作成される。これは次のような形でDOM（Document Object Model）として知られている：
DOMについての詳細は、リンク先を参照してほしい。さて、ここでの焦点は、ツリー全体をトラバースすることなく、これらの各要素に直接ナビゲートする方法についてのXPathです。それでは、Xpathの基本的な用語から始めましょう。
ノードとは何か？
XPathでは、最も基本的な要素はノードである。ノードとは、DOMツリーで見た個々の要素のことです。この記事を読み進めていくと、ノードがタグ要素、属性、それに割り当てられた文字列値などで構成されていることがさらにわかります。XMLやHTMLの各ページには7つのノードがあり、それぞれのノードの種類をよく見てみましょう。
- Element node – These are the major tags in an HTML document. For instance, in our example, the elements nodes are <title>,<meta>,<body>,<h1>,<p>,<ul>,and <li>.
- Attribute node – You can provide elements nodes with properties to give them unique names or apply CSS styles. In this example, we have provided the <ul> element with attributes “id” and “class”. More on ids and classes later.
- Atomic values – these are the values that are inside the node elements. Over here, the atomic values are the text inside the <title>, <h1>,<p> and each of the three <li> elements.
上記の3つが最も重要なものであるが、参考までに以下の4つも知っておくことが肝要である。
- Namespace: Since XPath also deals with XML documents, it is a standard that specifies how you can use elements and attributes. It is identified by URI (Uniform Resource Identifier). For the latest HTML 5 version, you can set the namespace like this: <html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>.
- コメント：コンパイラやパーサが処理しないHTMLやXML文書のコメント部分。
- Process instruction: As with the case of HTML documents, they are the nodes that link external files such as CSS and JavaScript files. For example, the<link> node to include CSS files and the <src> node to include JavaScript files.
- Root node: As you guessed it right, this is the topmost element of an HTML document: the <html> node.
ノード間の関係は？
- Parent: These are the root elements of the DOM tree that are precisely one level up. Each element has exactly one parent. According to our example, the parent of <li> element is <ul>.
- Children: Children nodes are exactly one level down in the DOM tree. As per our example <h1>,<p> and <ul> elements are children of the <body> element.
- Siblings: These are the elements that share the same parent. In our example, both the <li> elements are siblings of the <ul> parent. Also <h1>,<p> and <ul> are siblngs as they belong to the same parent <body>.
- Descendants: Any elements that are one level down are descendants. For instance, the <title> element is a descendant of the <head> element.
- Ancestor: Any element level up in the DOM tree is called an ancestor. In our example <li> element’s ancestors are <ul>,<body> and <html>.
HTML要素のXPathを見つけるには？
これには2つの方法がある。まず、デモンストレーションを行うか、例をコーディングしてみましょう。前述したように、ローカルディスクに保存し、ブラウザで表示できる状態になっていることを願う。
ページが読み込まれたら、アイテム1にマウスカーソルを合わせて右クリックします。下のスクリーンショットに示すように、表示されるメニュー項目からInspectを選択します：
Then you would be able to find the full XPath by clicking on the <li> element in the console and selecting “copy” from the drop-down menu, and then specifying “Copy full XPath as shown below:
それをテキストファイルかどこかに貼り付けると、こうなる：
/html/body/ul/li[1]を参照。
これは絶対パスとして知られている。これをどのように導き出したか、以下で説明しよう。
Step 1 => li[1] //Here one denotes the first li element
Step 2 => /li[1]
Step 3 => ul/li[1]
Step 4 => /ul/li[1]
Step 5 => body/ul/li[1]
Step 6 => /body/ul/li[1]
Step 7 => html/body/ul/li[1]
Step 8 => /html/body/ul/li[1]
絶対パス
With this method, you need to work your way backward, starting from the target element all the way back to the root element. You add a forward slash before the element you have just added as you write each element. So let’s look at how you could work out the XPath for the first <li> element manually:
上記の方法は長いようだが、完全なXPathを構築する方法を理解するのに役立つだろう。次は相対的な方法です。
相対パス
//*[@id="product-list"]/li[1]
As you can see, it is pretty short, and the path is relative to the parent <ul> element. Since the <li> element does not have an id attribute, its relative path is relative to the <ul> element.
相対パスと絶対パスの違い
大きな違いは、完全なXPathは可読性が低く、メンテナンスが難しいということです。もう1つの明らかな懸念は、ルート要素から始まる要素に変更があった場合、絶対XPathが無効になることです。そのため、相対 XPath を使用することは理にかなっています。
しかし、それについてさらにコメントする前に、まずメリットとデメリットを見てみよう。
XPATHの利点と欠点
メリット
XPathを使えば、要素の名前がわからなくても、contains関数を利用してマッチしそうなものを探すことができるので、心配する必要はない。そのため、スクレイピングする項目を検索する際、DOMの上の方まで行くことができます。
CSSのもうひとつの大きな利点は、旧バージョンのInternet Explorerのような古いレガシーブラウザでも動作することだ。
デメリット
上記で学んだように、その最も大きな欠点は、パス内の要素を変更したときに壊れやすいことです。以下で説明するCSSセレクタと比べると、理解しにくいかもしれません。
また、XPathから要素を取得する場合、そのパフォーマンスはCSSよりもかなり遅い。
CSSセレクタとは？
すでにご存知のように、CSSはCascading Style Sheets（カスケーディング・スタイル・シート）の略で、ウェブページのHTML要素にスタイルを設定する際によく使われます。これらのスタイルには、フォント、背景画像、色への色の適用、要素の整列と配置、段落間のスペースの増減などが含まれます。
HTML 要素にスタイルを設定するには、CSS セレクタで指定する必要があります。次のセクションのマークアップから始まる簡単な例から始めましょう。
CSSセレクタはどのように作られるのか？
<h1 id="main-heading" class="header-styles" name="h1name">What are CSS Selectors?</h1>
そこで、上記の要素に対するCSSセレクタを以下に示す：
- <h1>-selects by the element name <h1>
- #main-heading - #要素のidを指定する。
- .header-styles - ドットはクラス名を表す。
- [name="h1name"] - 角括弧で属性を指定できます。
それらを組み合わせることもできる：
h1.header-styles-このCSSセレクタは、クラスheader-stylesを持つh1要素を選択します。
高度なセレクタ
演算子>は子を選ぶのに使われる。対照的に、+演算子は最初の兄弟を選択し、~演算子はすべての兄弟を選択するために使用されます。いくつかの例を以下に挙げる：
- ul#product-list > li – selects <li> elements which are children of <ul> with id of product-list.
- ul#product-list li – selects <li> elements which are descendent of <ul> with id of product-list.
- ul#product-list + li – selects first <li> element after <ul> with id of product-list.
- ul#product-list ~ li – Selects all <li> elements after the <ul> with id of product-list.
CSSセレクタを使用する利点と欠点
メリット
ビューティフル・スープがサポートしていないXPathとは異なり、CSSセレクタは最も効果的なスクレイピング・ライブラリでサポートされている。また、XPathとは異なり、CSSセレクタは習得も保守も容易である。Internet Explorerバージョン8以下のレガシー・ブラウザを除けば、ほとんどすべてのブラウザがサポートしている。しかし、今の時代、そのようなブラウザを使う人はほとんどいない。
デメリット
旧バージョンのInternet Explorerを除外しても、ブラウザによってレンダリング方法に矛盾が生じる可能性がある。
CSSにはさまざまなバージョンがあるため、開発者や初心者の間で混乱が生じる可能性がある。
今日のウェブ技術でもうひとつ重要なのは、CSSのセキュリティだ。
CSSセレクタとXPathの違いは何ですか？
XPathとCSSの明らかな違いは、XPathが双方向であることだ。つまり、DOMツリーを両方向にトラバースできる。しかし、CSSでは親ノードから子ノードにしかトラバースできません。
前のセクションで説明したように、XPathはメンテナンスが難しく、効果的な可読性の候補にはなりません。一方、XPathはレガシーなブラウザでも動作しますが、レンダリングの方法はブラウザによって異なります。
したがって、その点ではCSSに分がある。
どちらを選ぶべきか？
XPATHは、CSSがDOMツリーをトラバースするような特定の領域においてのみ、親から子へトラバースすることができたので、際立っている。スピードに関しては、CSSに分がある。
しかし、XPathとCSSのスピードの差は、ウェブ・スクレイピングに関してはあまり意味がない。ウェブスクレイピングにおけるネットワークの遅延など、考慮すべき要素は他にもある。
CSSはXPathをサポートしていないので、ビューティフル・スープに関してはCSSが最初の選択肢になるだろう。
結論
ウェブスクレイピングのプロジェクトにどのセレクタを使うべきかについて、正確な答えはありません。この記事でお分かりのように、XPathは特定の状況で優位に立ち、CSSは他の状況で際立ちます。
したがって、トラバース、ブラウザのサポート、そして今回説明したいくつかの技術的能力など、特定の重要なポイントを考慮する必要がある。学んだことを実践し、さらなる記事にご期待ください。