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

それぞれのクラス名やタグの整理、コードを再確認しておきましょう。
まずはクラス名、タグ

【ドライバー名】
- ファーストネーム→クラス名（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 firstname_span = document.getElementsByClassName('hide-for-tablet');
        var firstname_zero = firstname_span[0];
        var firstname = firstname_zero.innerText;
        console.log(firstname_span);
        console.log(firstname_zero);
        console.log(firstname);
    };
</script>

それでは前回の続きからスタートしていきましょう。

for文で人数分のファーストネームを取り出す

javascriptでのfor文も他の言語とほとんど変わらないと思います。ポイントは繰り返す回数をfirstname_span.lengthで指定していることでしょうか。これもよく使われるパターンなので、覚えてしまうのも手かもしれませんね。

for(var 1=0; i<firstname_span.length; i++){};

これでfirstname_spanの要素の回数分繰り返し作業になります。作業内容はiが0～22までカウントされるので、それを利用してfirstname_span[i].innerText;でファーストネームを取り出す形でいきましょう。その場合、ドライバー名を入れるfirstnameを事前に配列で宣言しておくといいでしょう。コードにすると以下の感じです。

var firstname = new Array();
(for文内)
firstname[i] = firstname_span[i].innerText;

これをいままでのコードに組み込んで改造するとこんな感じになります。

<script type="text/javascript">
    window.onload = function(){
        var firstname = new Array();
        var firstname_span = document.getElementsByClassName('hide-for-tablet');
        for (var i=0; i<firstname_span.length; i++) {
            firstname[i] = firstname_span[i].innerText;
        };
        console.log(firstname);
    };
</script>

【結果】
["Lewis", "Nico", "Daniel", "Kimi", "Sebastian", "Max", "Valtteri ", "Sergio",
 "Felipe", "Nico", "Carlos", "Romain", "Fernando", "Daniil", "Jenson", "Kevin",
 "Pascal", "Stoffel", "Esteban", "Jolyon", "Marcus", "Felipe", "Rio"]

綺麗にファーストネームが並びましたね。では、これを基本にファミリーネームも取得してみましょう。クラス名はhide-for-mobileですので、documento.getElementsByClassName(‘hide-for-mobile’);でやってみましょう。また、コンソールにはドライバーのフルネームをひとりずつ表示するようにしてみます。以下、説明は省略してコードを書いてみますね。

<script type="text/javascript">
    window.onload = function(){
        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]);
        };
    };
</script>

ドライバー名が表示されました。このパターンで国籍、所属チーム、獲得ポイントも取得できそう…と思ったんですが、ひとつだけ獲得ポイントだけが別の要素も拾ってしまうことが判明しました。

獲得ポイントだけを取得したい

考えていたのはクラス名を使っての処理なので、獲得ポイントもいままでと同様に

document.getElementsByClassName('dark bold');

で行けそうかなと思っていたんですが、実際に取得してみると

[a.dark.bold.ArchiveLink, td.dark.bold, a.dark.bold.ArchiveLink, td.dark.bold, 
a.dark.bold.ArchiveLink, td.dark.bold, a.dark.bold.ArchiveLink, td.dark.bold, 
a.dark.bold.ArchiveLink, td.dark.bold, a.dark.bold.ArchiveLink, td.dark.bold, 
a.dark.bold.ArchiveLink, td.dark.bold, a.dark.bold.ArchiveLink, td.dark.bold, 
a.dark.bold.ArchiveLink, td.dark.bold, a.dark.bold.ArchiveLink, td.dark.bold, 
a.dark.bold.ArchiveLink, td.dark.bold, a.dark.bold.ArchiveLink, td.dark.bold, 
a.dark.bold.ArchiveLink, td.dark.bold, a.dark.bold.ArchiveLink, td.dark.bold, 
a.dark.bold.ArchiveLink, td.dark.bold, a.dark.bold.ArchiveLink, td.dark.bold, 
a.dark.bold.ArchiveLink, td.dark.bold, a.dark.bold.ArchiveLink, td.dark.bold, 
a.dark.bold.ArchiveLink, td.dark.bold, a.dark.bold.ArchiveLink, td.dark.bold, 
a.dark.bold.ArchiveLink, td.dark.bold, a.dark.bold.ArchiveLink, td.dark.bold, 
a.dark.bold.ArchiveLink, td.dark.bold]

と、aタグとtdタグのふたつの要素が取得されちゃう状態になってました。ここでもう一度整理していたクラス名とタグを確認すると獲得ポイントの部分は

【獲得ポイント】
- クラス名（dark bold）、タグ（td）

となっており、タグはtdの方のみを取得したいところなんです。そこで、さらにtagNameを取得してtdのみを取り出す方法をとりたいと思います。その際、注意が必要なのは大文字小文字。htmlではタグが大文字になっています。詳細は

MDN | tagName

注記
XML (および XHTML など XML ベースの言語) では、tagName は大文字・小文字が保たれます。HTML では、tagName は標準的な大文字で要素名を返します。 tagName の値は nodeName の値と同じになります。

なので、if文にて判定する際にはtdではなくTDで判定しています。仮に代入先をiとして考えると

if (i.tagName == "TD") {};

処理としては、tdタグの中のinnerTextにポイントが入っているのでそれを取得すればOKでしょう。ドライバー名の時につかったfor文とは別に処理して置いた方が複雑化しないと思うので、ポイントだけは単独で繰り返し処理をします。

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++;
    };
};
console.log(point);

【結果】
["217", "198", "133", "122", "120", "115", "58", "48", 
"38", "33", "30", "28", "24", "23", "17", "6", "1", 
"1", "0", "0", "0", "0", "0"]

これでポイントだけを取得できました。これをドライバー名の表示にうまく組み込むと。。。

上のような表示になりました。だいぶそれっぽくなりましたね。

今回はここまで

ここまでのコード一覧を載せておきます。

<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>

次回は一応、このシリーズ最終回予定、ブックマークレット作成まで突っ走ります。