ウェブスクレイピングで使用する正しいセレクタをご存知ですか？Webスクレイピングは、インターネットからデータを抽出するために、ここ10年でかなり普及してきました。それは、ビジネスがより良いビジネス上の意思決定を行うためにデータを取得し、分析するのに役立ちます。自動化技術のおかげで、ウェブスクレイピングは今ほど簡単になったことはありません。
ウェブスクレイピングで使用する正しいセレクタをご存知ですか？Webスクレイピングは、インターネットからデータを抽出するために、ここ10年でかなり普及してきました。それは、ビジネスがより良いビジネス上の意思決定を行うためにデータを取得し、分析するのに役立ちます。自動化技術のおかげで、ウェブスクレイピングは今ほど簡単になったことはありません。
しかし、どのツールやフレームワークを選んでも、スクレイパーがデータを丁寧にスクレイピングするためには、重要な決断をしなければならない。それは、XPathとCSSセレクタのどちらを使ってウェブ要素を抽出するかということです。
では、既存の例をいくつか挙げてみよう。
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つのノードがあり、それぞれのノードの種類をよく見てみましょう。
上記の3つが最も重要なものであるが、参考までに以下の4つも知っておくことが肝要である。
これには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]を参照。これは絶対パスとして 知られている。これをどのように導き出したか、以下で説明しよう。
ステップ1 => li[1] //ここで1は最初のli要素を表す
ステップ2 => /li[1］
ステップ3 => ul/li[1]
ステップ4 => /ul/li[1]
ステップ5 => ボディ/ul/li[1]
ステップ6 => /body/ul/li[1］
ステップ7 => html/body/ul/li[1］
ステップ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を使えば、要素の名前がわからなくても、contains関数を利用してマッチしそうなものを探すことができるので、心配する必要はない。そのため、スクレイピングする項目を検索する際、DOMの上の方まで行くことができます。
CSSのもうひとつの大きな利点は、旧バージョンのInternet Explorerのような古いレガシーブラウザでも動作することだ。
上記で学んだように、その最も大きな欠点は、パス内の要素を変更したときに壊れやすいことです。以下で説明するCSSセレクタと比べると、理解しにくいかもしれません。
また、XPathから要素を取得する場合、そのパフォーマンスはCSSよりもかなり遅い。
すでにご存知のように、CSSはCascading Style Sheets（カスケーディング・スタイル・シート）の略で、ウェブページのHTML要素にスタイルを設定する際によく使われます。これらのスタイルには、フォント、背景画像、色への色の適用、要素の整列と配置、段落間のスペースの増減などが含まれます。
HTML 要素にスタイルを設定するには、CSS セレクタで指定する必要があります。次のセクションのマークアップから始まる簡単な例から始めましょう。
<h1 id="main-heading" class="header-styles" name="h1name">What are CSS Selectors?</h1>そこで、上記の要素に対するCSSセレクタを以下に示す：
それらを組み合わせることもできる：
h1.header-styles-このCSSセレクタは、クラスheader-stylesを持つh1要素を選択します。
演算子>は子を選ぶのに使われる。対照的に、+演算子は最初の兄弟を選択し、~演算子はすべての兄弟を選択するために使用されます。いくつかの例を以下に挙げる：
ビューティフル・スープがサポートしていないXPathとは異なり、CSSセレクタは最も効果的なスクレイピング・ライブラリでサポートされている。また、XPathとは異なり、CSSセレクタは習得も保守も容易である。Internet Explorerバージョン8以下のレガシー・ブラウザを除けば、ほとんどすべてのブラウザがサポートしている。しかし、今の時代、そのようなブラウザを使う人はほとんどいない。
旧バージョンのInternet Explorerを除外しても、ブラウザによってレンダリング方法に矛盾が生じる可能性がある。
CSSにはさまざまなバージョンがあるため、開発者や初心者の間で混乱が生じる可能性がある。
今日のウェブ技術でもうひとつ重要なのは、CSSのセキュリティだ。
XPathとCSSの明らかな違いは、XPathが双方向であることだ。つまり、DOMツリーを両方向にトラバースできる。しかし、CSSでは親ノードから子ノードにしかトラバースできません。
前のセクションで説明したように、XPathはメンテナンスが難しく、効果的な可読性には向いていません。一方、XPathはレガシーなブラウザでも動作しますが、レンダリングの方法はブラウザによって異なります。
したがって、その点ではCSSに分がある。
XPATHは、CSSがDOMツリーをトラバースするような特定の領域においてのみ、親から子へトラバースすることができたので、際立っている。スピードに関しては、CSSに分がある。
しかし、XPathとCSSのスピードの差は、ウェブ・スクレイピングに関してはあまり意味がない。ウェブスクレイピングにおけるネットワークの遅延など、考慮すべき要素は他にもある。
CSSはXPathをサポートしていないので、ビューティフル・スープに関してはCSSが最初の選択肢になるだろう。
ウェブスクレイピングのプロジェクトにどのセレクタを使うべきかについて、正確な答えはありません。この記事でお分かりのように、XPathは特定の状況で優位に立ち、CSSは他の状況で際立っています。
したがって、トラバース、ブラウザのサポート、そして今回説明したいくつかの技術的能力など、特定の重要なポイントを考慮する必要がある。学んだことを実践し、さらなる記事にご期待ください。