前回（その1）で、それぞれのクラス名やタグの整理をしました。あらためて、確認してみましょう。
- 【ドライhttps://tks-kan.com/2016/08/45/バー名】
- ファーストネーム→クラス名（hide-for-tablet）、タグ（span）
- ファミリーネーム→クラス名（hide-for-mobile）、タグ（span）
- 【国籍】
- クラス名（dark semi-bold uppercase）、タグ（td）
- 【所属チーム】
- クラス名（grey semi-bold uppercase ArchiveLink）、タグ（a）
- 【獲得ポイント】
- クラス名（dark bold）、タグ（td）
という感じでした。では、次に準備しておいたhtmlにスクリプトを書き込んで、色々と調べてみましょう。
console.logでの実行確認をしてみる
まず、javascriptでコンソールに書き出しをしてみます。htmlの上部に以下のコードを打ち込んでブラウザで表示させます。
<script type="text/javascript">
window.onload = function(){
console.log("check!");
};
</script>
デベロッパーツールを立ち上げて、コンソールのログ表示にし、ページの読み込みが終わるまで待機すると。。。check!の文字が表示されたかと思います（まわりのエラーだらけのメッセージは気にせずに）。
簡単に説明すると、window.onloadでページの読み込みが終わったら実行（function）、コンソールにcheck!の文字を書き出す、という感じです。読み込みが終わったらという条件にしているのは、色々と取得する際にうまく動かないことがあるんです。実際にブックマークレット化した際には必要ない部分なのですが、作成中には必須な部分だったりします。さて、無事にcheck!の文字が表示されたら、いよいよドライバー名の取得からやってみましょう。
ドライバー名を取得してみよう
ドライバー名はファーストネームとファミリーネームをそれぞれ取得する必要があります。まずはファーストネームからやってみましょう。getElementsByClassName();を使っていきます。まずは概要の確認をしてみましょう。
document.getElementsByClassName
概要：
与えられたクラス名で得られる要素の集合を返します。
ということで、クラス名で得られる要素の集合が返ってくるので、それを入れる入れ物を用意しておきましょう（ここではfirstname_spanとしておきます）。そこにgetElements～で得られた要素を代入します。クラス名はもちろん事前に調べておいたhide-for-tableです。そして、それをコンソールに書き出してみましょう。コードで書くとこんな感じでしょうか。
var firstname_span = document.getElementsByClassName('hide-for-tablet');
console.log(firstname_span);
これを先ほどのwindow.onload = function(){ ここに入れます }
<script type="text/javascript">
window.onload = function(){
var firstname_span = document.getElementsByClassName('hide-for-tablet');
console.log(firstname_span);
};
</script>
では、実行！ してみると以下のような感じになりました。[span.hide-for-tablet,span.hide-for-tablet,span.hide-for-tablet,～というのが並んで表示されています。
その右側にある三角をクリックすると連番が付いた状態で縦に並んで表示されます。下の方にあるlengthの数字はspan.hide-for-tabletの数となっていて全部で23個。これはドライバーの人数23と同じなので、これ以上のフィルタリングは必要なさそうですね。さて、それぞれに三角がついているので、ためしに0のところをクリックしてみると
詳細が表示されます。下にスクロールしていくとinnerHTMLとinnerTextの部分にドライバー名がありますね。これらはgetElements~で得られた内容になってます。なんだかいろんな要素が入っている状態なんですね。ということは、名前を取り出すためにはもうワンステップ必要となります。
連番のゼロに限定して名前を取り出してみましょう。まず、取得した内容の入っているfirstname_spanからゼロのものを取り出すコードを書きましょう。
var firstname_zero = firstname_span[0];
これでゼロの内容だけが取り出せています。試しに以下のコードでコンソールで確認してみましょう。
<script type="text/javascript">
window.onload = function(){
var firstname_span = document.getElementsByClassName('hide-for-tablet');
var firstname_zero = firstname_span[0];
console.log(firstname_span);
console.log(firstname_zero);
};
</script>
【結果】
<span class="hide-for-tablet">Lewis</span>
ということでゼロの中身が取り出せましたね。では、これをベースに先ほどもあったドライバー名に対応するinnerTextを取り出してみましょう。コードで書くと
var firstname = firstname_zero.innerText;
となります。これを組み込んで確認してみましょう。
<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>
【結果】
Lewis
ちゃんと取得できましたね。これを人数分処理すれば、ドライバーのファーストネームはバッチリのはずです。そのためには繰り返しのfor文を使ってコードを改造していきます。
今回はここまで
次回はドライバー名の処理完了まで進めたいと思います。