プログラミングChromeデベロッパーツール(F12)で簡易スクレイピングするやり方サイトやブログなどでデータをまとめて取ってきたい時があります。いう時に、Chromeのデベロッパーツール(F12)で簡単にコピーするやり方です。スクレイピングというとプログラミングが必要で、そこまで分からない。いえ、Webデザイナー等でCSSやJavascriptは当然分かるけど、みたいな人には使えるかもしれません。おわりにブログの見出しをコピーする本ブログでやってみたいと思います。やり方は以下の手順です。シゴクリトップページにいきます。GoogleChromeにて。F12を押してデベロッパーツールを起動。ブログ記事タイトルのElementを探す。本ブログは、クラス名がmedia-bodyの中にブログ記事概要(日付、カテゴリ名、タイトル、概要文)が含まれています。タイトルは、さらにmedia-headingとentry-titleクラスに入っていることが分かります。x.innerText)と打ち、エンターとする。“飽きた!もアイデアに化ける。離脱キャンペーンで楽しむ。“しょぼいメイクマネーが6/1で終わり・・・じゃない。応募すれば1,200円が。“しょぼいマイクマネーが始まってるぞ。みたいに表示されることを確認。x.innerText))と打ってエンターを押すと、undefinedと表示される。クリップボードにコピーされているはずなので、メモ帳などを開いてCTRL+Vで貼り付ける。5と同様に「[“WordPressのContactForm7で投稿文字数を制限する”,“飽きた!もアイデアに化ける。離脱キャンペーンで楽しむ。”,“しょぼいメイクマネーが6/1で終わり・・・じゃない。応募すれば1,200円が。”,“加熱式たばこIQOS(アイコス)は新しさで集客する”,“ブンゴウメールが面白かったので勝手にアイデア出し”,“アイデアは売れるというお話”,“nor.(ノアドット)という新しいビジネスモデルからビジネスのヒントを探る”,“Windows10PCでNASにつながらなくなった原因はSMBv1が外れていたこと”,“しょぼいマイクマネーが始まってるぞ。アイデアをぶっこめ!”,“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クラスで表示されているので、簡単ですね。できたコードはこちら。x.innerText))そして、結果はこちら。"バドオフ!"]ということで、簡単にタイトルが抽出できることが分かります。あとはExcelに貼り付けるなり煮るなり焼くなりご自由にということですね。参考になったサイト覚えておきたいDevToolsのコマンドラインAPIまとめでは、copy()コマンドについて書かれています。こちらに書かれていることがそのままかなと思います。ブラウザのコンソールでスクレイピングでは、joinで結合して文字列を1つにしているのと、例えばタイトル+URLを同時に取ってくるという技も素敵ですね。おわりにわざわざスクレイピングをしてデータを取ってくるというのも手間です。Excelに貼り付けて加工とかでもできなくはないですが、データがボコボコしているので整形も必須ですし、その時点でマクロの知識が求められます。上のやり方だと、Chrome+F12+Consoleの使い方が分かる+CSSのクラスが分かる+指定クラスなどセレクタの概念が分かるというところは必要ですが、プログラミング要素はないので(とはいえコード自体はプログラミングですが)、わりと使えるのではないかと思いました。弘宜ビジネスアイデアメディア「シゴクリ」運営者。アイデアを出すアイデアセッターであり、生まれてくるアイデアをビジネス化出来ないかを考え続け、手を動かすゼロイチ大好きアイデアマン。ビジネスアイデア相談やビジネス企画の実績多数あり。毎日生まれるアイデアから世のために貢献していくスタイルです。好きな言葉は三方良し。合わせてご覧ください。お仕事メニューやお問い合わせはお気軽にどうぞ。readmaster.net/0から仕事をつくる実践記クラウドソーシングでアイデア出しをメインにシゴトづくりを3年してきた気づきをまとめました。企画やアイデアをシゴトにしたい人の一つの参考にしてもらえれば嬉しいです。アイデア仕事の当選率などのデータもあります。自身のシゴトづくりとしてのアイデア活動3年の気づきを1冊にまとめました。企画やアイデアをシゴトにしたい人の一つの参考にしてもらえれば嬉しいです。コミュニティビジネスアイデアのヒントが見つかるシゴクリ読者向けの場やってます。アイデアこれ面白そう!というアイデア公募コンテスト等情報をまとめています。え方・メモアイデアを応募・提案出来るサイトまとめ思考・考え方・メモ日本の企業数、起業や倒産数、起業家数などのデータVBAVBAのソースコードをロックする思考・考え方・メモ複数のPDFファイルのページ数を表示できるかメモアイデアネタ面白いユニークな自動販売機紹介。ビジネスアイデアの素に、発想を柔らかくするネタに。居酒屋の集客イベントで使える7つのアイデア思考・考え方・メモ原価率研究所は事業譲渡され新会社の下で経営されていた思考・考え方・メモ知るカフェのビジネスモデルは広告モデル。創業者のMVPがダントツにイケてた。