iBitzEdge

jQueryで海外サッカーの試合結果を取得してみる

mushkinoko

お久しぶりです。mushkinokoです。自分がメールアドレスを変えてしまったり、その他諸々の身の回りの環境の変化があったりして、しばらくの間、記事を書けませんでした。

今後は、もっと何事も長続きするように努力していこうと思います。

反省文みたいな文章で始まってしまったのですが、ここから先はいつも通り記事を書いていこうと思います。

話は変わりますが、最近自分の友達が、スペインの「アスレティック・ビルバオ」というサッカーチームにハマっていて、その友達から「試合結果を自分のブログのサイドバーに表示してほしい」とお願いされたのがきっかけでこの記事を書こうと思いました。

サッカーに興味がなくても(自分は球技にはあまり興味がありません)、jQueryにおいてAjaxを利用して外部からAPIを利用したり、オブジェクトや配列の使い方をなんとなく理解できるかと思います。

使うもの

準備

まず、football-data.orgから、API keyを取得しておきます。ちなみに「football-data.org」は、主にヨーロッパリーグの情報を取得することができるAPIを提供しています。取得できるデータがJSON形式であったり、構造がわかりやすいなどの点からこのサービスを使用することにしました。

次に、取得したデータを表示するために必要なHTMLファイルを準備しておきます。表示するサッカーチームは、友達が好きなアスレティック・ビルバオにしておきます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>アスレティック・ビルバオの試合結果</title>
  </head>
  <body>
    <h1>アスレティック・ビルバオの試合結果</h1>
    <p>直近10試合の結果を表示します。</p>
    <div class="matchresults-end"></div>
  </body>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script type="text/javascript">
   //ここにJavaScriptのコード(後述)を書く
 </script>
</html>

bodyタグの後で、jQueryを読み込んでおきます。また、試合結果の一覧を表示する場所の終わりにはmatchresults-endというクラス名のdivタグを置いておきます。

いざ、JSでコーディング！

さっきのHTMLファイルのscriptタグの中にコードを書いていきます。まずは、football-data.orgからJSONを取得します。

$(function() {
  $.ajaxSetup({
    headers : {"X-Auth-Token" : "ここにAPI keyを入れる"}
  });

  $.getJSON(
    "//api.football-data.org/v1/teams/77/fixtures", function(json) {
      //JSON取得後の処理
    }
  );
});

ちなみに、URL中の「77」というのはチームのIDです。他のチームのIDはまずここからリーグのIDを調べて、そのリーグに所属するチームのIDを

http://api.football-data.org/v1/soccerseasons/リーグのID/teams

を使って調べることができます。

では次に、JSON取得後の処理を書いていきます。このJSONには、これから行う予定の試合も含まれているので、終わった試合のデータだけを取り出します。

getJSONメソッドによって取得されたデータが含まれる、jsonというオブジェクトの中の、fixturesというプロパティの中から、statusプロパティの値が「FINISHED」の配列をすべて、配列finishedに格納します。

その後、配列の順番をひっくり返して、日付が新しいものを上に持ってきます。

var finished = $.grep(json.fixtures, function(item, index){
  return item.status == "FINISHED";
});

finished = finished.reverse();

これで、表示するデータの準備は終わりました。

そのあとは、無難にfor文で直近の10件のデータを出力してみます。配列finishedから一つずつ、

を取得します。dateプロパティの値はtoLocaleDateStringを使って整形しておきます。その他のプロパティの値は、jQueryのbeforeメソッドを使ってテーブルの形にして出力します。

for(var i=0;i<10;i++){
  var date = new Date(finished[i].date);
  var options = {
    timeZone : "Asia/Tokyo",
    year : "numeric",
    month : "short",
    day : "numeric",
    weekday : "long"
  };
  date = date.toLocaleDateString("ja-JP", options);

  $(".matchresults-end").before(
    '<div style="margin-top:8px">' + date + '</div><table border="1" style="width:500px;table-layout:fixed"><tbody><tr><td style="text-align:center">' +
    finished[i].homeTeamName + '</td><td style="text-align:center">' + finished[i].awayTeamName + '</td></tr><tr><td colspan="2" style="text-align:center">' +
    finished[i].result.goalsHomeTeam + ' - ' + finished[i].result.goalsAwayTeam + '</td></tr></tbody></table>'
  );
}

これで、アスレティック・ビルバオの直近10試合の結果を表示することができるはずです。

ここまでに作ったHTMLファイルをここに置いておきます。

全くもってわかりづらい説明でしたが、大丈夫だったでしょうか？

自分ももっとわかりやすく人に説明できるように努力していきたいと思います。最後まで読んでいただきありがとうございました。