はじめに
ShangriLa Anime APIを使ってみたので簡単な使い方と紹介をしたいと思います。
僕がJavaScriptを学習中にAPIを使ってみたいなと思い、どうせなら自分の好きなアニメ関係のAPIがないかと探していたら見つけました。
あくまで簡単な説明なので詳しい情報はこちらの本家様のgitで確認いただけたらと思います。
使用しているもの
- JavaScript
- ShangriLa Anime API
ShangriLa Anime APIとは
簡潔に言えばアニメの情報が受け取れるAPIです。
2014年から現在までの放送しているアニメのデータを年号別、季節別に指定して受け取ることができます。
受け取れるデータ
- アニメのタイトル
- アニメ公式URL
- Twitterアカウント
等々
他にもいろいろなデータが受け取れるので様々な使い道がありそうです。
データ形式
[
{ "id": 1, "title": アニメタイトル1}
{ "id": 2, "title": アニメタイトル2}
{ "id": 3, "title": アニメタイトル3}
.
.
.
]
使用例
2021年のアニメデータを受け取ってみる
//変数apiUrlに入れてるのがapiデータを受け取るURLになります
const apiUrl = "http://api.moemoe.tokyo/anime/v1/master/2021";
fetch(apiUrl)
.then(response => {
return response.json();
})
.then(data => {
console.log(data);
})
これで2021年のアニメデータが受け取れます
2020年のデータが欲しければURLの最後の2021のところを2020に変えてあげるだけで受け取れます。
2021年の冬アニメのデータを受け取ってみる
const apiUrl = "http://api.moemoe.tokyo/anime/v1/master/2021/1";
fetch(apiUrl)
.then(response => {
return response.json();
})
.then(data => {
console.log(data);
})
指定してあげるURLの最後に /1 を入れてあげるだけですね。
冬 | 春 | 夏 | 秋 |
---|---|---|---|
1 | 2 | 3 | 4 |
この表に書いてある通りの番号と季節が対応しています。
春にしたかったら 2 夏がよかったら 3 を入れてあげると受け取れます。
ちなみに、当たり前なのかもしれませんが
2021年のデータを受け取る時は
const apiUrl = "http://api.moemoe.tokyo/anime/v1/master/2021/";
にすると取得できません
const apiUrl = "http://api.moemoe.tokyo/anime/v1/master/2021";
/ をちゃんと消して上げないと取得できないので、僕と同じ勉強途中というかたはお気をつけて
僕はこのAPIを使ったアプリを作っているときにこれに苦しめられた模様、、、
buttonを使って受け取るデータを変えたい時とかね。
2021年冬アニメのタイトル情報を受け取ってみる
上の二つは全てのデータを受け取っていましたが、最後にタイトルデータだけを受け取ってみます。
const apiUrl = "http://api.moemoe.tokyo/anime/v1/master/2021/1";
fetch(apiUrl)
.then(response => {
return response.json();
})
.then(data => {
//[]の中には受け取りたい配列の番号
console.log(data[].title);
})
受け取っていたdataの後ろに.titleとしてあげるとタイトルデータを受け取れます。
配列の番号を指定してあげないとタイトルデータだけを受け取ることはできないので、全てのタイトルデータを受け取りたい時はfor文とかを使って受け取る必要があります。
他にも受け取れるデータに書いたアニメの公式ホームページやらTwitterやらのデータも受け取ることができます。
季節まで指定してあげないと title しか受け取れないみたいなので公式ホームページURLとかのデータを受け取りたい人は季節まで指定してあげてください。
最後に
初心者の方や勉強中の方でもなるべくわかりやすいように書いたつもりですので,apiを使ってみたいなと思ってる方はぜひ使ってみてください。
特にアニメが好きな人は使ってて楽しいと思いますよ〜。