無料APIとjQueryで海外サッカーの試合日程・順位表を自動取得する方法

海外サッカー関連のWebサイトを運営されている方なら、一度はこんなこと考えたことがあるのではないでしょうか？

海外サッカーの日程を自動でブログ記事に埋め込みたい！
ファンクラブサイトのトップページに直近試合のスコアや次戦の対戦相手を表示させたい！
好きなリーグの順位表を自動で取得したい！

調べてみると海外サッカーのデータを取得できるAPIを使えば実現できそうだったので、「football-data.org」というWeb APIを利用して実装してみました。
そこで今回は、football-data.org APIの特徴と使用方法、jQueryによる実装例を紹介します。

football-data.org APIとは
football-data.orgを使ってみよう
1. APIキーを取得する
2. jQueryを使った実装例
  1. 順位表の取得
  2. 試合日程
football-data.org APIの活用例
まとめ

football-data.org APIとは

そもそもAPI(Application Programming Interface)とは、ソフトウェア同士で情報や機能を共有できるようにするインターフェースのことで、特に今回のようにWeb上で公開された外部のデータを取得できるようなものをWeb APIといいます。
海外サッカー関連のデータでもAPIで取得できるサービスがないか調べたところ、簡単に利用できて無料プランでも豊富なデータを利用できるAPIが見つかりました。それが今回紹介する「football-data.org」です。

jQueryでのAPI呼び出し方法はこちらの方のサイトで紹介されていたコードを参考にしています。こちらの記事ではAPIのバージョンが以前のものだったのでURIとデータのリクエスト方法を変更する必要がありましたが、javascript初心者の僕でも簡単に使うことができました。

無料プランでデータ取得できるリーグ・大会

無料プランでデータ取得できるリーグ・大会は以下の12のコンペティション。

UEFAチャンピオンズリーグ
プレミアリーグ
ラ・リーガ
セリエA
ブンデスリーガ
リーグ・アン
エールディビジ
プリメイラ・リーガ
チャンピオンシップ（イングランド2部）
ブラジルリーグ
FIFAワールドカップ
EURO

CLや欧州5大リーグはもちろん、ワールドカップやEUROまで網羅しているので、これだけあれば無料プランでも十分利用価値は高いですよね。
有料プランにすれば、Jリーグや各国カップ戦を含む全世界147コンペティションから好きなリーグのデータを取得することも可能です。

football-data.org APIでできること

football-data.orgの無料プランでは、

順位表
試合日程
チーム情報

が取得できます。有料プランでは選手のスタッツやリアルタイムでのスコア情報も取得できるそうです。

リソースの一覧とそのURIやパラメータ、サンプルのリクエストコードなどは、公式ドキュメントの以下のページを参考にしてください。
football-data.org – API Quickstart

football-data.org のデメリット

APIコール回数の上限は10calls/1min

football-data.orgの無料プランで唯一残念だと感じた点は、APIコール回数の上限が1分あたり10回までということです。
1ページだけならアクセス数の多いページでなければ問題ないと思いますが、サイトの全ページに呼び出し結果を表示したり、同じページに複数の呼び出しコードを設置すると上限にすぐ引っかかってしまうので注意してください。

得られるデータは英語表記

football-data.orgで取得したデータは全て英語表記、キックオフ時間も現地時間となっています。クラブ名などを日本語表記にしたい場合は、英語名をキーに日本語名を値に持つ連想配列を用意するなどして変換してください。

football-data.orgを使ってみよう

では実際にfootball-data.orgを使って順位表や試合日程を表示してみましょう。

APIキーを取得する

まず、サイトでアカウント登録してAPIキーを取得してください。

登録はコチラ→football-data.org – Registration

登録に必要なのはメールアドレスとパスワードだけ。
入力したアドレスにAPIキーの書かれたメールが送られてくるので、リンクをクリックしてアカウントを有効化すれば、APIキーを使ってデータを取得できるようになります。

jQueryを使った実装例

実際に順位表と試合日程を自動表示するjavascriptとhtmlのコード例を書いてみました。cssについては省略してるので、ご自分のサイトに合わせてカスタマイズしてみてください。

順位表の取得

【javascript】

// jQuery読み込み
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
$(function() {
$.ajaxSetup({
headers : {"X-Auth-Token" : " 取得したAPI key "}
});
$.getJSON('https://api.football-data.org/v2/competitions/PL/standings?standingType=TOTAL', function (data_PL) {
//JSON取得後の処理
standings = data_PL.standings[0].table;
// 順位表にデータを挿入
standings.forEach(function(standing) {
$("#league-tbl").append(
'<tr align="center">'
+ '<td>' + standing.position + '</td>'
+ '<td>' + '<div style = "text-align: left"><div style="display: table-cell; vertical-align: middle;"><img src="' + standing.team.crestUrl + '" height="24"></div><div style="display: table-cell; vertical-align: middle;">'
+ standing.team.name + '</div></div></td>'
+ '<td>' + standing.playedGames + '</td>'
+ '<td>' + standing.won + '</td>'
+ '<td>' + standing.draw + '</td>'
+ '<td>' + standing.lost + '</td>'
+ '<td>' + standing.points + '</td>'
+ '</tr>'
)
});
});
});

【html】

<table>
<thead>
<tr align="center">
<th width="10%">順位</th>
<th width="40%">クラブ</th>
<th width="10%">試合</th>
<th width="10%">勝</th>
<th width="10%">分</th>
<th width="10%">負</th>
<th width="10%">Pts</th>
</tr>
</thead>
<tbody id="league-tbl"></tbody>
</table>

【表示結果】

順位	クラブ	試合	勝	分	負	Pts

試合日程

【javascript】

// jQuery読み込み
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
$(function() {
$.ajaxSetup({
headers : {"X-Auth-Token" : " 取得したAPI key "}
});
$.getJSON("https://api.football-data.org/v2/competitions/CL/matches?matchday=6", function(data_CL) {
//JSON取得後の処理
game_list = data_CL.matches;
games_num = data_L.count;
var youbi = ["日", "月", "火", "水", "木", "金", "土"];
var date, jdate;
var jtime = "";
for (var i = 0; i < games_num; i++) {
// 日時を日本時間に変換
date = new Date(game_list[i].utcDate);
date = date.toLocaleString("ja-JP");
jdate = new Date(date);
jtime = (jdate.getHours() + ':' + ("0" + jdate.getMinutes()).slice(-2)); // キックオフ時刻をX:XX表記にする
//日程表にデータを挿入
$("#matches-tbl").append(
'<tr align="center">'
+ '<td><img src="https://crests.football-data.org/' + game_list[i].homeTeam.id + '.svg" height="30">'
+ '<br />'
+ game_list[i].homeTeam.name + '</td>'
+ '<td class="' + game_list[i].td_class + '">'
+ (jdate.getMonth() + 1) + '/' + jdate.getDate() + '(' + youbi[jdate.getDay()] + ')'
+ '<br />' + jtime + '</td>'
+ '<td><img src="https://crests.football-data.org/' + game_list[i].awayTeam.id + '.svg" height="30">'
+ '<br />'
+ game_list[i].awayTeam.name + '</td>'
+ '</tr>'
);
}
});
});

【html】

<table>
<thead>
<tr align="center">
<th width="40%">ホーム</th>
<th width="20%">日時<br />(日本時間)</th>
<th width="40%">アウェイ</th>
</tr>
</thead>
<tbody id="matches-tbl">
</tbody>
</table>

【表示結果】

ホーム	日時 (日本時間)	アウェイ
FK Zenit Sankt-Petersburg	12/9(水) 2:55	BV Borussia 09 Dortmund
SS Lazio	12/9(水) 2:55	Club Brugge KV
Chelsea FC	12/9(水) 5:00	FK Krasnodar
Stade Rennais FC 1901	12/9(水) 5:00	Sevilla FC
FC Barcelona	12/9(水) 5:00	Juventus FC
FK Dynamo Kyiv	12/9(水) 5:00	Ferencvárosi TC
Paris Saint-Germain FC	12/9(水) 5:00	Medipol Başakşehir FK
RB Leipzig	12/9(水) 5:00	Manchester United FC
AFC Ajax	12/10(木) 2:55	Atalanta BC
FC Midtjylland	12/10(木) 2:55	Liverpool FC
FC Bayern München	12/10(木) 5:00	FK Lokomotiv Moskva
FC Red Bull Salzburg	12/10(木) 5:00	Club Atlético de Madrid
Real Madrid CF	12/10(木) 5:00	Borussia Mönchengladbach
FC Internazionale Milano	12/10(木) 5:00	FK Shakhtar Donetsk
Manchester City FC	12/10(木) 5:00	Olympique de Marseille
PAE Olympiakos SFP	12/10(木) 5:00	FC Porto