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