【GAS】Webスクレイピング（その１）- セレクタを探す

知人からとあるサイトにあるデータを取得するにはどうしたらよいかという相談をうけた

いわゆるWebスクレイピングをするのだが、自分でやる分にはいくらでも方法が思いつくが非エンジニアの人がやるにはどうしたらいいかはわからなかった

ということで、自分でプロトタイプ的なものを作ってそれを見ながら拡張や調整してもらうようにした

前提条件

• レンダリング後にAPIからデータをフェッチするタイプではなく、サーバーサイドでHTMLをレンダリングしている
• エンジニアでない人がメンテナンスする
• 取得したデータはExcelなどで計算とかしたい

上記の前提条件でGAS（Google App Script）でスクレイピングして、SpreadSheetに出力するのがいいのではと考えた

まずセレクタ探し

サーバーサイドでHTMLをレンダリングしたものが返ってくるのでセレクターを使用してDOM 要素をとってくる必要がある

Chromeの開発者モードからHTMLの要素を見ると、utility系のclassで辿るのがちょっと心許ないが、こんな感じのセレクタになった

document.querySelectorAll("#datatable .data-row .col-xs-3 .row").item(1).textContent
document.querySelectorAll("#datatable .data-row .col-xs-3 .row").item(2).textContent
document.querySelectorAll("#datatable .data-row .col-xs-3 .row").item(3).textContent
document.querySelectorAll("#datatable .data-row .col-xs-8 .row .details").item(0).textContent
document.querySelectorAll("#datatable .data-row .col-xs-8 .row .details").item(1).textContent
document.querySelectorAll("#datatable .data-row .col-xs-8 .row .details").item(2).textContent

このセットが .data-rowごとに数行あるため、forEachで繰り返してあげる

var output = [];
document.querySelectorAll("#datatable .data-row").forEach(row => {
  var list = [];
  row.querySelectorAll(".col-xs-3 .row").forEach(childRow => {
    list.push(childRow.textContent)
  })
  row.querySelectorAll(".col-xs-8 .row .details").forEach(childRow => {
    list.push(childRow.textContent)
  })
  output.push(list);
});

これで欲しいデータが集まったので今度はこれをGASに書いてSpreadSheetに出力することをやる

その２へ