Chrome Devtoolsでスクレイピングする

サイトからデータをコピーしたいんだけど単純にコピーできない時に、Chrome Devtoolsを使うと便利でした。
Command Line APIというjQueryライクなAPIをConsoleから叩くとNode情報が取得できるのでそれをゴニョゴニョしてみます。

Command Line API

下記の書き方で、必要なNodeが取得できるので、あとはmapなりforEachなりで回して必要な形でデータを取得します。

• $(selector)
  指定されたCSSセレクターに一致する最初の要素を返します。
  document.querySelector() のショートカットです。
  ただし、jQueryを使っているサイトではjQueryの$が優先されてしまうので、その場合は$$(selector)[0]で代用しましょう。

• $$(selector)
  指定されたCSSセレクターに一致するすべての要素の配列を返します。 document.querySelectorAll() に近いですが戻り値がNodeListではなく、Arrayなので扱いやすいです。

<参考>
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll

• $x(xpath)
  指定されたXPathに一致する要素の配列を返します。お好みでどうぞ。

試しに使ってみる

試しにこのブログの記事一覧を取得してみます。 Elementsで調ベたところ、タイトルはdiv.titleで拾えそうです。

$$(div.title)で10要素拾えたので合っているようです。ちなみにEager evaluationが有効になっていると実行しなくも入力途中から結果が見れるので便利です。

map()でinnerTextをreturnしてタイトルの配列ができました。

改行コードで区切ったり、カンマやタブで区切ったり、あとはご自由に。

copy()で囲むとクリップボードにコピーができます。

おわりに

ちょっとサイトのデータをコピー&ペーストしたい場合なんかに覚えておくと便利そうです。