コメントを投稿するお久しぶりです。mushkinokoです。自分がメールアドレスを変えてしまったり、その他諸々の身の回りの環境の変化があったりして、しばらくの間、記事を書けませんでした。今後は、もっと何事も長続きするように努力していこうと思います。反省文みたいな文章で始まってしまったのですが、ここから先はいつも通り記事を書いていこうと思います。話は変わりますが、最近自分の友達が、スペインの「アスレティック・ビルバオ」というサッカーチームにハマっていて、その友達から「試合結果を自分のブログのサイドバーに表示してほしい」とお願いされたのがきっかけでこの記事を書こうと思いました。サッカーに興味がなくても(自分は球技にはあまり興味がありません)、jQueryにおいてAjaxを利用して外部からAPIを利用したり、オブジェクトや配列の使い方をなんとなく理解できるかと思います。keyを取得しておきます。ちなみに「football-data.org」は、主にヨーロッパリーグの情報を取得することができるAPIを提供しています。取得できるデータがJSON形式であったり、構造がわかりやすいなどの点からこのサービスを使用することにしました。次に、取得したデータを表示するために必要なHTMLファイルを準備しておきます。表示するサッカーチームは、友達が好きなアスレティック・ビルバオにしておきます。<p>直近10試合の結果を表示します。</script></html>bodyタグの後で、jQueryを読み込んでおきます。試合結果の一覧を表示する場所の終わりにはmatchresults-endというクラス名のdivタグを置いておきます。いざ、JSでコーディング!さっきのHTMLファイルのscriptタグの中にコードを書いていきます。football-data.orgからJSONを取得します。);});ちなみに、URL中の「77」というのはチームのIDです。他のチームのIDはまずここからリーグのIDを調べて、そのリーグに所属するチームのIDをhttp://api.football-data.org/v1/soccerseasons/リーグのID/teamsを使って調べることができます。次に、JSON取得後の処理を書いていきます。このJSONには、これから行う予定の試合も含まれているので、終わった試合のデータだけを取り出します。getJSONメソッドによって取得されたデータが含まれる、jsonというオブジェクトの中の、fixturesというプロパティの中から、statusプロパティの値が「FINISHED」の配列をすべて、配列finishedに格納します。その後、配列の順番をひっくり返して、日付が新しいものを上に持ってきます。finished.reverse();これで、表示するデータの準備は終わりました。そのあとは、無難にfor文で直近の10件のデータを出力してみます。配列finishedから一つずつ、dateプロパティhomeTeamNameプロパティawayTeamNameプロパティresultプロパティの中のgoalsHomeTeamプロパティresultプロパティの中のgoalsAwayTeamプロパティを取得します。dateプロパティの値はtoLocaleDateStringを使って整形しておきます。その他のプロパティの値は、jQueryのbeforeメソッドを使ってテーブルの形にして出力します。);}これで、アスレティック・ビルバオの直近10試合の結果を表示することができるはずです。ここまでに作ったHTMLファイルをここに置いておきます。もってわかりづらい説明でしたが、大丈夫だったでしょうか?自分ももっとわかりやすく人に説明できるように努力していきたいと思います。最後まで読んでいただきありがとうございました。最新の記事mushkinokomushkinokoです。最近、ママチャリで走り回っています。ロードバイクはじめました。2017/03/21投稿ナビゲーションFlipswitchがアップデートを公開。画面録画がデフォルトで使用可能に。WinterBoardでアイコンマスクを適用する関連記事PHP初心者がいきなり掲示板を作ってみた。その1(HTML編)PHP初心者がいきなり掲示板を作ってみた。その2(CSS編)初心者でもブラウザ上で表示できるHTMLページを作ってみるPHP初心者がいきなり掲示板を作ってみた。