XPath応用編（2） ー テーブルで表示されるデータを指定する方法
フォローする一部のWebページではテーブルでコンテンツを表示しています。例えば、
- 商品の詳細内容を紹介するECサイト（列見出し）
- 株価情報を紹介する株式ランキングサイト（行見出し）
この2種類見出しで表記しているサイトが多くありますね。
Octoparseで行ごとにデータを抽出する
ことはもちろんできますが、WebサイトのHTML構造が変わることで、違ったデータを取得したり、データが空白になったりする場合があると思います。
そのような場合にXPathをどのように書き直し、それからOctoparseでどう解決するかを紹介します。
|
目次 |
1．ECサイト（行見出し）
＜URL例＞：ECサイト（新しいタブで開いてから、URLをコピーしてください）
上記サイトからブランド名「G-SHOCK(ジーショック)」を指定するXPathをFireBugを使って書きます。今度は「ブランド」の後ろにくるブランド名を指定します。
a) XPathツールパネルの左上にある
ボタンをクリックしてから、まずは「ブランド」をクリックします。それに応じて以下のHTMLと表示されます。
b) XPathの書き方（3）中級編で紹介した「contains(text(),"XXX")」を使って「ブランド」を指定すると、下記のように書くことができます。
//th[contains(text(),"ブランド")]
c) それから、XPathの書き方（4）高級編で紹介したfollowing-sibling::で次の「G-SHOCK(ジーショック)」を指定することができます。
//th[contains(text(),"ブランド")]/following-sibling::td[1]
following-sibling::td[1]はth[contains(text(),"ブランド")]と同じ階層で、その後にくる1番目のtd要素を指定する意味です。
d) 上記のXPathをOctoparseのデータフィールドのXPath入力ボックスに入れ替えます。
2．株式ランキングサイト（列見出し）
＜URL例＞：株式ランキングサイト（新しいタブで開いてから、URLをコピーしてください）
下記のようなテーブルは複数の列で行ごとにデータを表示しています。
このようなサイトでは列数に変化はなく、行数に増えたり減ったりする変化があります。
今度は指定した行目と列目のデータを取得するXPathの書き方を説明します。
a) XPathツールパネルの左上にあるボタンをクリックしてから、まずは順位に「1」のところをクリックします。tr属性のところにマウスを移動すれば、一行目の内容を指定することができます。それに応じて以下のHTMLと表示されます。
b) 他の行目もすべてtr属性で記述されています。tr属性で指定すると、すべての行を指定できます。XPathを下記のように書くことができます。
//tr[@class="rankingTabledata yjM"]
一行目を指定したい場合はXPathを下記のように書くことができます。
//tr[@class="rankingTabledata yjM"][1]
c) 各行を指定する上記のXPathをOctoparseのループアイテムのXPath入力ボックスに入れ替えます。
ｄ) それから、列目を指定します。例えば、1列目の「順位」を指定したい場合はXPathを下記のように書くことができます。
//tr[@class="rankingTabledata yjM"]/td[1]
1列目はtr要素の下にくる1番目のtd要素です。そのため、trの下にあるtd[1]を指定すれば、「順位」列を指定できます。
2列目の「コード」と「市場」を指定する場合はXPathもそれぞれ下記のように書くことができます。
//tr[@class="rankingTabledata yjM"]/td[2]
//tr[@class="rankingTabledata yjM"]/td[3]
行目と列目を組み合わせて指定すれば、例えば2行目から4列目の「(株)cotta」を指定する場合は下記のように書くことができます。
//tr[@class="rankingTabledata yjM"][2]/td[4]
e) 各行を指定する上記のXPathをOctoparseのデータフィールドの相対XPath入力ボックスに入れます。
以上はOctoparseを使う中でテーブルで表示するデータを指定するXPathの書き方まとめです。
ぜひ使ってみてください！
関連記事：
XPath応用編（3） ー リストで表示されるデータを指定する方法
