こないだ機会があって、Google Chromeの開発者ツールからスクレイピングしたので、その方法を簡単に残しておきます。
参考にしたページはこちらです。
非エンジニアのための JavaScript 入門〜Twitterの検索結果をスプレッドシートに出力してみるの巻〜 | ヌーラボ
そもそもスクレイピングとは
Wikipediaでは次のような一文で表現されています。
僕はというと、<class>や<li>など、ひとつのページに複数ある要素を取得するときによく使います。
ウェブサイトから情報を抽出するコンピュータソフトウェア技術のこと。ソーシャルでいうと、OGPやHTMLに埋め込むタイプのTwitterカードも、スクレイピングの一種です。
僕はというと、<class>や<li>など、ひとつのページに複数ある要素を取得するときによく使います。
最近はウェブサイトの情報をCSVにまとめてゴニョゴニョだったり、Twitterのツイート情報を抜き出してゴニョゴニョしたりされる方も多いと思いますので、そういうときに手でコピペする以外の方法もあるよってことをまずは知ってもらえればと思います。
スクレイピングをする前に
さて、ここまで読んでもらった文系の方は察しが付いていると思いますが、スクレイピングするにはHTMLがなんとなく分かっていなければいけません。これからTwitterを例に説明していきますが、少なくとも<class>と<a href>がどういう意味かググっておいてください。
あとは何度かやっていくうちに慣れてくるので、その都度Google先生に聞けば答えを教えてくれるのでご安心を。
スクレイピングの手順
いよいよスクレイピングをやってみましょう！
Twitterの検索結果ページで、検索して出てきたツイートのURLを取得するときを例に説明していきます。
※あくまで例でTwitterを取り上げているだけであって、Twitterでのスクレイピングを推奨するものではありません。
Twitterの検索結果ページで、検索して出てきたツイートのURLを取得するときを例に説明していきます。
※あくまで例でTwitterを取り上げているだけであって、Twitterでのスクレイピングを推奨するものではありません。
1. スクレイピングしたいページでF12キーを押す
twitter.comを開いて右上にある検索窓に適当なワードを打ち込んで検索し、ページ中上部にある「すべてのツイート」をクリックしてください。
その後、キーボードの上の方にある「F12」と書かれたキーを押すと、右側に別のウィンドウが開くと思います。
その後、キーボードの上の方にある「F12」と書かれたキーを押すと、右側に別のウィンドウが開くと思います。
2. 右上の赤枠ボタンを押し、スクレイピングしたい箇所をクリック。クリックしたところのHTMLコードがハイライトされます。
3. 今回はURLを取得したいので、ツイートのURLはどこか探してみる
よく見ると、青色ハイライトの上にツイートのURLらしき文字列がありますね？これを取得していこうみたいな思考回路です。
注目するところを抜き出してみました。
<a href="/HAPPY_TWR/status/993611634865139712" class="tweet-timestamp js-permalink js-nav js-tooltip" data-conversation-id="993611634865139712" data-original-title="7:00 - 2018年5月8日">
欲しい情報があるタグを見ると、クラス<class>が設定されていることが見て取れます。
このクラスはあとで使うので、とりあえず「tweet-timestamp」のところをどこかにコピペしておきましょう。
4. classで検索してみる。CtrlキーとFを押し、取得したい箇所が網羅されているか確認。
HTMLのソースコードが表示されるところで検索しましょう。CtrlキーとFを押すと、下側にテキストボックスが表示されるので、先程の「tweet-timestamp」をペーストしてエンターをポチ、検索でヒットすると黄色ハイライトで表示されます。
この状態でエンターをポチポチすると、どんどん次の「tweet-timestamp」が表示されていきます。いくつか見てみて、自分が選択したい場所以外が含まれていないかチェックしましょう。
5. 今度は開発者ツールのConsoleタブへ移動する。
ぬけもれがなさそうだったら、今度は開発者ツールの上部にある「Console」をクリックしてください。Consoleタブは、実際にコードを打ち込んで簡単な処理ができるところです。
開いたら次の3つのコードを、ひとつずつコピペ→エンターを繰り返していってください。
ざっくり解説すると、ひとつ目のコードでページにある「tweet-timestamp」というクラスを持っているタグ全てを「tweets」という箱に格納。ふたつ目のコードで「tweets」という箱に入っているすべてのタグがもっている「href」という属性だけを抜き出して、「lines」という箱に格納してます。最後のコードで、「lines」という箱にはいっているデータを改行でつないでいるという処理です。
開いたら次の3つのコードを、ひとつずつコピペ→エンターを繰り返していってください。
- tweets = $$(".tweet-timestamp") //赤文字は適宜変更
- lines = tweets.map(elem => elem.getAttribute("href"))
- lines.join("\n");
ざっくり解説すると、ひとつ目のコードでページにある「tweet-timestamp」というクラスを持っているタグ全てを「tweets」という箱に格納。ふたつ目のコードで「tweets」という箱に入っているすべてのタグがもっている「href」という属性だけを抜き出して、「lines」という箱に格納してます。最後のコードで、「lines」という箱にはいっているデータを改行でつないでいるという処理です。
6. 出力結果をドラッグしてコピペ
すべて打ち終わるとタテに長く出力されると思うので、これをコピーしてメモ帳に貼り付けてください。貼り付けると、頭とお尻にダブルクォーテーションがあると思うので削除して、これをExcelにコピペすれば完成です！
一旦ここまで
もう少し詳しい話も必要かもしれませんが、今回は一旦ここまで。
次回以降に補足の記事をアップしたいと思います。
