FootyTix - 海外サッカーチケット攻略ブログ

理系大学院生が60試合以上の海外サッカー観戦経験をもとに、公式サイトからチケットを定価で購入する方法や海外サッカー情報を綴るブログ

FootyTix - 海外サッカーチケット攻略ブログ PC FootyTix - 海外サッカーチケット攻略ブログ SmartPhone

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

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

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

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

football-data.org APIとは

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

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

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

f:id:ktakumi11:20200926165831j:plain
無料プランでデータ取得できるリーグ・大会は以下の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

football-data.org APIの活用例

実際に僕のブログでこのAPIを導入した記事がコチラのビッグマッチ日程表です。
APIとjQueryを使えばこんな自分好みの日程表も作れるんだと実感できると思います。
www.footballtickets-by-gakuseimiler.com

自分で取得データを操作して好みのチームだけの日程表にアレンジできてしまうのもAPIのメリットですね。

まとめ

f:id:ktakumi11:20201107113656j:plain
今回は、APIとjQueryで海外サッカーの試合日程や順位表を自動取得する方法を紹介しました。
常に更新が必要な試合日程や順位表を自動化できれば編集作業を短縮できますし、サイトデザインの幅も広がるのではないでしょうか!

海外サッカー関連のサイトを運営されている方はぜひ参考にしてみてください。

© 2018-2020 FootyTix - 海外サッカーチケット攻略ブログ