Rakuten Rapid API を使って天気の情報を取得する
Rakuten Rapid API とは
Rakuten RapidAPI は、開発者が API を検索・接続し、利用状況を管理できる API マーケットプレイスです。ご自身のプロジェクトに必要な API を検索してアプリに埋め込み、ダッシュボードで API の利用状況が一括管理できます。
公式ドキュメントから引用
Rakuten Rapid API に新規登録
Rakuten Rapid APIを使用するために、まずは下記 URL から新規登録します。
使いたい API を選択する
新規登録が終わったら、使いたい API を選択します。
検索をしても良いですし、カテゴリーから API を探しても良いです。
使いたい API が日本語で見つからない場合は、英語で検索してみましょう。
今回は「Weather」で検索して出てきた「Open Weather Map」を使用したいと思います。
天気に関するAPIですね。
選択した API で使用したいエンドポイントを確認する
使いたいと思ったAPIに、自分が欲しい情報が取れるエンドポイントがあるかを確認します。
確認の仕方は、エンドポイントの名前と説明から判断します。
今回は、5day / 3hour を使いたいと思います。
※エンドポイントとは、APIを使用してデータを取得するための通信先だと思っていただければと思います。
どんなエンドポイントがわからない場合
エンドポイント名と説明でどんなエンドポイントかわからなかった場合は、APIを提供している大元のサイトを確認しましょう。
今回は「Open Weather Map」で検索して、大元の API を探しました。
英語の場合が多いと思うので、翻訳しながら地道に読んでいきましょう。
コードスニペットで使用したい言語を選択して通信テストをする
今回はjQueryを使用したいと思います。
Rakuten Rapid APIでは、サイト上でAPIの通信を確認する事ができます。
また、コピペでAPIとの通信が実装できる様になっており、様々な言語に対応しています。
jQueryを選択したら、通信テストをします。
通信テストは、「登録してテスト(テスト)」と書かれたボタンを押してテストをします。
利用登録をしていない人は、API を使用するために料金プランを選択する必要があります。
今回はお試しなので、無料で使用できる「Basic プラン」を選択します。
プランを選択したら、「エンドポイント」のタブをクリックして、元の画面に戻ります。
元に戻ったら、再度「テスト」のボタンをクリックします。
テストの結果は右のエリアに表示されます。
コードのコピーをして自分のコードに貼り付ける
APIの通信テストの結果、欲しい情報が取れている事が分かったら、jQueryのコードをコピーして自分のコードに貼り付けます。
今回は jQuery のコードをコピーしたので、jQuery の CDN を読み込んで貼り付けします。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
// jQueryのCDN
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
// Rakuten Rapid APIでコピーしたコード
<script>
const settings = {
async: true,
crossDomain: true,
url:
"https://community-open-weather-map.p.rapidapi.com/forecast?q=Tokyo,jp",
method: "GET",
headers: {
"x-rapidapi-key":
"自分のRakuten Rapid APIのKeyが設定されています。",
"x-rapidapi-host": "community-open-weather-map.p.rapidapi.com",
},
};
$.ajax(settings).done(function (response) {
console.log(response);
});
</script>
</body>
</html>
ブラウザで開いてコンソールログを確認する
コードをコピーして貼り付けたら、動作確認をしましょう。
基本的にはコピペをしたコードにはconsole.logが記載されているので、ブラウザで起動したらコンソールを確認して、APIからデータが取得できているか確認しましょう。
データを画面に表示させる
コンソールでデータが取得できていることを確認したら、画面に表示させます。
今回はJavaScriptで画面に表示させます。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background-color: skyblue;
}
</style>
</head>
<body>
<h1>Rakuten Rapid API</h1>
<h2>Open Weather Map</h2>
<div id="whather"></div>
// jQueryのCDN
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
// Rakuten Rapid APIでコピーしたコードをカスタマイズしたコード
<script>
const whather = document.querySelector("#whather");
const settings = {
async: true,
crossDomain: true,
url:
"https://community-open-weather-map.p.rapidapi.com/forecast?q=Tokyo,jp",
method: "GET",
headers: {
"x-rapidapi-key":
"自分のRakuten Rapid APIのKeyが設定されています。",
"x-rapidapi-host": "community-open-weather-map.p.rapidapi.com",
},
};
$.ajax(settings).done(function (response) {
console.log(response);
let data = "";
// レスポンスの天気の一覧をループさせて、表示するデータを作成
response.list.forEach((item) => {
const weatherImg =
"<div><img src=http://openweathermap.org/img/wn/" +
item.weather[0].icon +
"@2x.png></div>";
const weatherDate = "<p>" + item.dt_txt + "</p>";
const whatherName = "<p>" + item.weather[0].main + "</p>";
data += weatherDate + whatherName + weatherImg + "<hr>";
});
whather.innerHTML = data;
});
</script>
</body>
</html>
HTMLとCSSを追記して、少しそれっぽい見た目になりました。
この様に、Rakuten Rapid APIは簡単にAPIを試す事ができ、実装も比較的簡単に行う事ができます。
ぜひ、試してみてはいかがでしょうか。
Discussion