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

html, javascript

スクリーンショット

おなじみになりつつありますが、まずはそれぞれのクラス名やタグの整理、コードを再確認しておきましょう。
クラス名、タグ

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

次にコード

<script type="text/javascript">
    window.onload = function(){
        var point = new Array();
        var point_count = 0;
        var point_get = document.getElementsByClassName('dark bold');
        for (var i=0; i<point_get.length; i++) {
            if (point_get[i].tagName == "TD") {
                point[point_count] = point_get[i].innerText;
                point_count++;
            };
        };
        var firstname = new Array();
        var familyname = new Array();
        var firstname_span = document.getElementsByClassName('hide-for-tablet');
        var familyname_span = document.getElementsByClassName('hide-for-mobile');
        for (var i=0; i<firstname_span.length; i++) {
            firstname[i] = firstname_span[i].innerText;
            familyname[i] = familyname_span[i].innerText;
            console.log(firstname[i] + " " + familyname[i] + ":" + point[i]);
        };
    };
</script>

今回でブックマークレット作成まで完了予定。無事最終回になるか？　乞うご期待。

スポンサーリンク

最後に国籍、所属チームの取得

のっけから「最後に」っていうのは不思議な感覚ですが、ドライバー名、獲得ポイントは取得できたので残りの国籍と所属チームを処理していきます。コードとしては

【国籍】
document.getElementsByClassName('dark semi-bold uppercase');
【所属チーム】
document.getElementsByClassName('grey semi-bold uppercase ArchiveLink');

これを使ってそれぞれ取得してみましょう。

【国籍】
[td.dark.semi-bold.uppercase, td.dark.semi-bold.uppercase, td.dark.semi-bold.uppercase, 
 td.dark.semi-bold.uppercase, td.dark.semi-bold.uppercase, td.dark.semi-bold.uppercase, 
 td.dark.semi-bold.uppercase, td.dark.semi-bold.uppercase, td.dark.semi-bold.uppercase, 
 td.dark.semi-bold.uppercase, td.dark.semi-bold.uppercase, td.dark.semi-bold.uppercase, 
 td.dark.semi-bold.uppercase, td.dark.semi-bold.uppercase, td.dark.semi-bold.uppercase, 
 td.dark.semi-bold.uppercase, td.dark.semi-bold.uppercase, td.dark.semi-bold.uppercase, 
 td.dark.semi-bold.uppercase, td.dark.semi-bold.uppercase, td.dark.semi-bold.uppercase, 
 td.dark.semi-bold.uppercase, td.dark.semi-bold.uppercase]
【所属チーム】
[a.grey.semi-bold.uppercase.ArchiveLink, a.grey.semi-bold.uppercase.ArchiveLink, 
a.grey.semi-bold.uppercase.ArchiveLink, a.grey.semi-bold.uppercase.ArchiveLink, 
a.grey.semi-bold.uppercase.ArchiveLink, a.grey.semi-bold.uppercase.ArchiveLink, 
a.grey.semi-bold.uppercase.ArchiveLink, a.grey.semi-bold.uppercase.ArchiveLink, 
a.grey.semi-bold.uppercase.ArchiveLink, a.grey.semi-bold.uppercase.ArchiveLink, 
a.grey.semi-bold.uppercase.ArchiveLink, a.grey.semi-bold.uppercase.ArchiveLink, 
a.grey.semi-bold.uppercase.ArchiveLink, a.grey.semi-bold.uppercase.ArchiveLink, 
a.grey.semi-bold.uppercase.ArchiveLink, a.grey.semi-bold.uppercase.ArchiveLink, 
a.grey.semi-bold.uppercase.ArchiveLink, a.grey.semi-bold.uppercase.ArchiveLink, 
a.grey.semi-bold.uppercase.ArchiveLink, a.grey.semi-bold.uppercase.ArchiveLink, 
a.grey.semi-bold.uppercase.ArchiveLink, a.grey.semi-bold.uppercase.ArchiveLink, 
a.grey.semi-bold.uppercase.ArchiveLink]

それぞれ23個ずつで、中身（innerText）も問題なしでした。これらの中身を取り出してぞれぞれcountryとteamに代入させるスクリプトを書いてみます。

var country = new Array();
var team = new Array();
var country_td = document.getElementsByClassName('dark semi-bold uppercase');
var team_a = document.getElementsByClassName('grey semi-bold uppercase ArchiveLink');
for (var i=0; i<team_a.length; i++) {
    country[i] = country_td[i].innerText;
    team[i] = team_a[i].innerText;
    console.log("(" + country[i] + ")" + team[i]);
};

スクリーンショット1

これで予定してた取得要素を全部クリアしました。後は好みの形に出力テキストを整えていきましょう。ここでは

ドライバー名(国籍) 所属チーム：   獲得ポイント

にしてみます。コードで表すと

firstname familyname(country) team: point

ちなみにテキストの整形に\tを使います。

コンソール表示版の完成

コンソール表示版のコードはこうなりました。

<script type="text/javascript">
    window.onload = function(){
        var point = new Array();
        var point_count = 0;
        var point_get = document.getElementsByClassName('dark bold');
        for (var i=0; i<point_get.length; i++) {
            if (point_get[i].tagName == "TD") {
                point[point_count] = point_get[i].innerText;
                point_count++;
            };
        };
        var firstname = new Array();
        var familyname = new Array();
        var country = new Array();
        var team = new Array();
        var firstname_span = document.getElementsByClassName('hide-for-tablet');
        var familyname_span = document.getElementsByClassName('hide-for-mobile');
        var country_td = document.getElementsByClassName('dark semi-bold uppercase');
        var team_a = document.getElementsByClassName('grey semi-bold uppercase ArchiveLink');
        for (var i=0; i<firstname_span.length; i++) {
            firstname[i] = firstname_span[i].innerText;
            familyname[i] = familyname_span[i].innerText;
            country[i] = country_td[i].innerText;
            team[i] = team_a[i].innerText;
            console.log(firstname[i] + " " + familyname[i] + "(" + country[i] + ")\t" + team[i] + ":\t" + point[i]);
        };
    };
</script>

スクリーンショット2

これをブックマークレット化していきましょう。

ブックマークレットにして、最終確認

ブックマークレット化にあたって、コンソールで出力していたものを新しいブラウザウインドウを作って、そこに書き出すようにしたいと思います。まず、console.logだった部分をテキスト作成用に書き換えます。テキスト作成用にoutputという代数を用意しました。さらに一行ごとに改行を加えるために\nを追加します。

var output = "";
(for内)
output += firstname[i] + " " + familyname[i] + "(" + country[i] + ")\t" + team[i] + ":\t" + point[i] + "\n;

つぎに、window.open()を使って、新しいブラウザウインドウを用意して、そこにtextareaタグを書き込んで、その中身にoutputを書き出します。

var d=window.open().document;
d.writeln('<textarea rows=25 cols=100>'+output+'</textarea>');

これらの改造をし、スクリプトの先頭をjavascript:に変更。scriptタグとwindow.onload(){}を削除します。

javascript:
var output = "";
var point = new Array();
var point_count = 0;
var point_get = document.getElementsByClassName('dark bold');
for (var i=0; i<point_get.length; i++) {
    if (point_get[i].tagName == "TD") {
        point[point_count] = point_get[i].innerText;
        point_count++;
    };
};
var firstname = new Array();
var familyname = new Array();
var country = new Array();
var team = new Array();
var firstname_span = document.getElementsByClassName('hide-for-tablet');
var familyname_span = document.getElementsByClassName('hide-for-mobile');
var country_td = document.getElementsByClassName('dark semi-bold uppercase');
var team_a = document.getElementsByClassName('grey semi-bold uppercase ArchiveLink');
for (var i=0; i<firstname_span.length; i++) {
    firstname[i] = firstname_span[i].innerText;
    familyname[i] = familyname_span[i].innerText;
    country[i] = country_td[i].innerText;
    team[i] = team_a[i].innerText;
    output += firstname[i] + " " + familyname[i] + "(" + country[i] + ")\t" + team[i] + ":\t" + point[i] + "\n";
};
var d=window.open().document;
d.writeln('<textarea rows=25 cols=100>'+output+'</textarea>');

最後に改行をすべて取っ払います。

javascript:var output = "";var point = new Array();var point_count = 0;var point_get = document.getElementsByClassName('dark bold');for (var i=0; i<point_get.length; i++) {if (point_get[i].tagName == "TD") {point[point_count] = point_get[i].innerText;point_count++;};};var firstname = new Array();var familyname = new Array();var country = new Array();var team = new Array();var firstname_span = document.getElementsByClassName('hide-for-tablet');var familyname_span = document.getElementsByClassName('hide-for-mobile');var country_td = document.getElementsByClassName('dark semi-bold uppercase');var team_a = document.getElementsByClassName('grey semi-bold uppercase ArchiveLink');for (var i=0; i<firstname_span.length; i++) {firstname[i] = firstname_span[i].innerText;familyname[i] = familyname_span[i].innerText;country[i] = country_td[i].innerText;team[i] = team_a[i].innerText;output += firstname[i] + " " + familyname[i] + "(" + country[i] + ")\t" + team[i] + ":\t" + point[i] + "\n";};var d=window.open().document;d.writeln('<textarea rows=25 cols=100>'+output+'</textarea>');

これでスクリプト完成です！

ブックマークレットのブックマークへの登録方法

chromeにて説明します。まず、新しいタブを開くなりして、そのページをブックマーク登録します。

スクリーンショット3

ブックマークの編集を開きます。ブックマークレットにつけたい名前を入れ、url部分に先ほど作ったスクリプトを貼り付けて保存します。

スクリーンショット4

以上で登録完了！

使い方

今回だとf1公式サイトのドライバーズランキングのページに対応したブックマークレットなので、

https://www.formula1.com/en/results.html/2016/drivers.html

を開きます。開いたら、先ほど編集したブックマーク（ブックマークレット）を開いてみてください。見事表示されましたでしょうか？

まとめ

最後に、スクレイピングは、サイトに対して負荷をかけることもあるとのことで禁止しているサイトもあります。ご注意ください。

今回はブックマークレット化して新しいウインドウに取得した情報を表示する処理をしてます。サイト転載とは異なるかもしれませんが、諸々確認の上、個人で楽しむ範囲で使ってみてください。ちなみに、取り出せ結果は以下の通りです（ドイツGP終了時点の成績ですね）。

Lewis Hamilton(GBR) MERCEDES:   217
Nico Rosberg(GER)   MERCEDES:   198
Daniel Ricciardo(AUS)   RED BULL RACING TAG HEUER:  133
Kimi Räikkönen(FIN) FERRARI:    122
Sebastian Vettel(GER)   FERRARI:    120
Max Verstappen(NED) RED BULL RACING TAG HEUER:  115
Valtteri  Bottas(FIN)   WILLIAMS MERCEDES:  58
Sergio Perez(MEX)   FORCE INDIA MERCEDES:   48
Felipe Massa(BRA)   WILLIAMS MERCEDES:  38
Nico Hulkenberg(GER)    FORCE INDIA MERCEDES:   33
Carlos Sainz(ESP)   TORO ROSSO FERRARI: 30
Romain Grosjean(FRA)    HAAS FERRARI:   28
Fernando Alonso(ESP)    MCLAREN HONDA:  24
Daniil Kvyat(RUS)   TORO ROSSO FERRARI: 23
Jenson Button(GBR)  MCLAREN HONDA:  17
Kevin Magnussen(DEN)    RENAULT:    6
Pascal Wehrlein(GER)    MRT MERCEDES:   1
Stoffel Vandoorne(BEL)  MCLAREN HONDA:  1
Esteban Gutierrez(MEX)  HAAS FERRARI:   0
Jolyon Palmer(GBR)  RENAULT:    0
Marcus Ericsson(SWE)    SAUBER FERRARI: 0
Felipe Nasr(BRA)    SAUBER FERRARI: 0
Rio Haryanto(INA)   MRT MERCEDES:   0

メルセデス1強状態は変わらず、前半戦終わってみるとハミルトンがトップにたって夏休みに突入となりました。レッドブル以下のチームは混戦となってきた印象ですね。ホンダの活躍も期待したいところ、後半戦も楽しみです。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

, , tks-kan