formula1公式サイトのドライバーズランキングをスクレイピングしてみようその1

ニッチ過ぎて需要があるかどうかわかりませんが。。。javascriptで組んで、最終的にはブックマークレットにしてお手軽に実行できるようにしましょう。

そもそもスクレイピングって？

javascriptでスクレイピング。そもそもスクレイピングってどういう定義なんでしょうか？　というわけで、調べてみました。

wikipedia ウェブスクレイピング

ウェブスクレイピング（英: Web scraping）とは、ウェブサイトから情報を抽出するコンピュータソフトウェア技術のこと。

情報を抽出するソフトウェア技術。ここでは具体的に公式サイトのドライバーズランキングからドライバー名や国籍、ポイントなどを抽出してみます。そのためには、そのページの中身をしらないとですね。

まず準備しましょう

今回のターゲットになるページはformula1公式サイトの2016 DRIVER STANDINGSです。

formula1 | 2016 DRIVER STANDINGS

このページをローカル上に保存して、そのhtmlファイルを使用してプログラミングをしていきたいと思います。また、ブラウザはchromeのデベロッパーツールを使用、console.logにて抽出したデータがあっているかを確認しつつ作業を進めていきます。

どの部分を抽出するのか？

予定ではドライバー名、国籍、ポイント、所属チームを取り出したいところ。そこで、実際にターゲットのページをchromeで表示して、ドライバー名のところで右クリックをして「検証」を選択しましょう。デベロッパーツールが表示されて、対応するhtmlがハイライトされているかとおもいます。

<span class="hide-for-tablet">Lweis</span>

そしてその下には

<span class="hide-for-mobile">Hamilton</span>

と、どうやらドライバー名はファーストネームとファミリーネームで別のタグになっている様子。なので、抽出する際はそれぞれ取り出してくっつけてあげる必要がありそうです。ちなみに、PCでの表示では出ていないみたいですがさらにその下に

<span class="uppercase hide-for-desktop">HAM</span>

短縮されたドライバー名の表記もあります。これって、ライブタイミングとかで使われてる名前と同じものだと思います。今回は取得しないのですが、これを活用するのもいいですね。
他の国籍やポイント、所属チームはそれぞれ以下の部分になりそうです。

<td class="dark semi-bold uppercase">GBR</td>
    <td>
        <a href="https://www.formula1.com/en/results.html/2016/team/
        mercedes.html" data-ajax-url="/content/fom-website/en/results/
        jcr:content/resultsarchive.html/2016/team/mercedes.html" 
        class="grey semi-bold uppercase ArchiveLink">Mercedes</a>
    </td>
    <td class="dark bold">217</td>

それぞれ対応する部分が分かったところで、抽出する用のクラス名やタグを整理しておきます。

【ドライバー名】
- ファーストネーム→クラス名(hide-for-tablet)、タグ(span)
- ファミリーネーム→クラス名(hide-for-mobile)、タグ(span)
【国籍】
- クラス名(dark semi-bold uppercase)、タグ(td)
【所属チーム】
- クラス名(grey semi-bold uppercase ArchiveLink)、タグ(a)
【獲得ポイント】
- クラス名(dark bold)、タグ(td)