Chromeデベロッパーツール（F12）で簡易スクレイピングするやり方

サイトやブログなどでデータをまとめて取ってきたい時があります。そういう時に、Chromeのデベロッパーツール（F12）で簡単にコピーするやり方です。

スクレイピングというとプログラミングが必要で、そこまで分からない。とはいえ、Webデザイナー等でCSSやJavascriptは当然分かるけど、みたいな人には使えるかもしれません。

ブログの見出しをコピーする

本ブログでやってみたいと思います。

やり方は以下の手順です。

１．シゴクリトップページにいきます。

GoogleChromeの話なのでChromeでどうぞ。シゴクリ。

２．F12を押してデベロッパーツールを起動。

３．ブログ記事タイトルのElementを探す。

本ブログは、クラス名がmedia-bodyの中にブログ記事概要（日付、カテゴリ名、タイトル、概要文）が含まれています。タイトルは、さらにmedia-headingとentry-titleクラスに入っていることが分かります。

４．デベロッパーツールのConsole画面に移動

$('.media-body .media-heading').map(x => x.innerText)

と打ち、エンターとする。

５．以下が出力されるのを確認

そうすると、

(10) [“WordPressのContactForm7で投稿文字数を制限する”, “飽きた！もアイデアに化ける。離脱キャンペーンで楽しむ。”, “しょぼいメイクマネーが6/1で終わり・・・じゃない。6/30まで延長。まだまだ応募すれば1,200円が。”, “加熱式たばこIQOS（アイコス）は新しさで集客する”, “ブンゴウメールが面白かったので勝手にアイデア出し”, “アイデアは売れるというお話”, “nor.（ノアドット）という新しいビジネスモデルからビジネスのヒントを探る”, “Windows10PCでNASにつながらなくなった原因はSMBv1が外れていたこと”, “しょぼいマイクマネーが始まってるぞ。締切は6/1まで。アイデアをぶっこめ！”, “WordPressで既存記事を固定ページにランダム表示する”]　

みたいに表示されることを確認。

６．これをcopyコマンドで囲って実行 

copy($('.media-body .media-heading').map(x => x.innerText))

と打ってエンターを押すと、undefinedと表示される。クリップボードにコピーされているはずなので、メモ帳などを開いてCTRL+Vで貼り付ける。

７．貼り付けたものを確認

5と同様に「[
“WordPressのContactForm7で投稿文字数を制限する”,
“飽きた！もアイデアに化ける。離脱キャンペーンで楽しむ。”,
“しょぼいメイクマネーが6/1で終わり・・・じゃない。6/30まで延長。まだまだ応募すれば1,200円が。”,
“加熱式たばこIQOS（アイコス）は新しさで集客する”,
“ブンゴウメールが面白かったので勝手にアイデア出し”,
“アイデアは売れるというお話”,
“nor.（ノアドット）という新しいビジネスモデルからビジネスのヒントを探る”,
“Windows10PCでNASにつながらなくなった原因はSMBv1が外れていたこと”,
“しょぼいマイクマネーが始まってるぞ。締切は6/1まで。アイデアをぶっこめ！”,
“WordPressで既存記事を固定ページにランダム表示する”
]」のようになっていることが確認できます。

$('.media-body .media-heading').map(x => x.innerText)

となっています。

使用イメージは、サイトのタイトルとか参考にしたいとか言う時に、例えばいちいちコピーしていたら日が暮れるので、こうすればクラス名に該当するテキストを取ってこれるので楽ちんです。クリップボードにコピーしているのは、console画面で出てきたものをさらにマウスで指定してコピーとかが手間だからですね。

命令の意味としては、$$自体がdocument.querySelectorAllと同様の意味を成すようです。jQueryで$(‘クラス名’)のようにセレクタを指定する感覚でいいかと。

mapメソッドは、javascriptの命令で、ここではブログ記事タイトルの文字列配列に対して再度呼び出し、新しい配列を作ります。xが取ってきたブログタイトルの配列（多分、セレクタで指定されたオブジェクト配列なのかも）に対して、x.innnerTextで各配列のテキスト要素で新配列を作ったものを返すとなります。

このあたりあまり詳しくないので、Array.prototype.map()など見てみてください。

これによって、タイトル文字列が簡単にコピー出来ることになります。なおChromeでなく、EdgeやFirefoxでも出来るかは未検証です。Firefoxは出来る気がします。

Web集めでもタイトルを取ってきてみる

上ではたまたま本サイトのタイトル記事ということを指定しました。記事概要だけ欲しいなら、「media-body_excerpt」クラスを指定すればオッケーです。

運用しているWebサービス集めましたでも遊んでみましょう。各サービスサムネイルは、mainクラスの中に、post-XXXという形で生成されています。そして各サムネイルは、タイトルはentry-titleクラスで表示されているので、簡単ですね。

できたコードはこちら。

copy($('.entry-title').map(x => x.innerText))

そして、結果はこちら。

[
  "Webデータを抽出できるスクレイピングツールOctoparse",
  "サプラブ ～サプライズな出来事や写真が集まる 投稿型情報サイト～",
  "OBVIO",
  "カギミツ",
  "ロイヤリティーフリーのシネマグラフ動画　gifの配信サイト",
  "Y-clock 時刻読上機能つきレスポンシブ時計",
  "CoinHack(コインハック)",
  "Floatment",
  "NEWTAN",
  "エックスタイピング(英語)",
  "若さフィット",
  "バドオフ！"
]

ということで、簡単にタイトルが抽出できることが分かります。あとはExcelに貼り付けるなり煮るなり焼くなりご自由にということですね。

参考になったサイト

覚えておきたいDevToolsのコマンドラインAPIまとめでは、copy()コマンドについて書かれています。

こちらに書かれていることがそのままかなと思います。ブラウザのコンソールでスクレイピングでは、joinで結合して文字列を1つにしているのと、例えばタイトル＋URLを同時に取ってくるという技も素敵ですね。

おわりに

わざわざスクレイピングをしてデータを取ってくるというのも手間です。もちろんExcelに貼り付けて加工とかでもできなくはないですが、データがボコボコしているので整形も必須ですし、その時点でマクロの知識が求められます。

上のやり方だと、Chrome+F12+Consoleの使い方が分かる＋CSSのクラスが分かる＋指定クラスなどセレクタの概念が分かるというところは必要ですが、プログラミング要素はないので（とはいえコード自体はプログラミングですが）、わりと使えるのではないかと思いました。

そこからブックマークレットなど発展させて学ぶのも面白そうと思いましたが、ブックマークレットを書いた結果ほぼ使えないことになったのですぐ捨てました（笑）

タイトルとURLをコピーしました