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

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

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

スポンサーリンク

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

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

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

  1. シゴクリトップページにいきます。GoogleChromeにて。
  2. F12を押してデベロッパーツールを起動。
  3. ブログ記事タイトルのElementを探す。本ブログは、クラス名がmedia-bodyの中にブログ記事概要(日付、カテゴリ名、タイトル、概要文)が含まれています。タイトルは、さらにmedia-headingとentry-titleクラスに入っていることが分かります。
  4. デベロッパーツールのConsole画面に移動し、

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

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

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

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

となっています。

使用イメージは、サイトのタイトルとか参考にしたいとか言う時に、例えばいちいちコピーしていたら日が暮れるので、こうすればクラス名に該当するテキストを取ってこれるので楽ちんです。クリップボードにコピーしているのは、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クラスで表示されているので、簡単ですね。

できたコードはこちら。

そして、結果はこちら。

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

参考になったサイト

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

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

おわりに

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

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

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

ビジネスって面白い、アイデアの価値ってもっとある。そんなことを自分なりに伝えられないかという思いから、シゴトクリエイターをやっています。一緒に楽しいビジネスを生みだしていきましょう。

アイデア出しを仕事にする方法をまとめました

クラウドソーシングでアイデア出しをメインにシゴトづくりを3年してきた気づきをまとめました。

企画やアイデアをシゴトにしたい人の一つの参考にしてもらえれば嬉しいです。

アイデア仕事の当選率などのデータもあります。
スポンサーリンク