study

dark sky apiを使ってみたよ

みなさん、こんにちは
omurinです。

今回はapiを使ってブラウザ上に1時間後の体感気温を表示させたよ。

apiは画像処理やSMS、天気などの情報を入手することができるツールのことだよ。これらを使うことでアプリケーション開発がかなり楽になるよ

 

dark skyとは?

dark skyは天気予測apiとしてはかなり有名で、様々な情報を入手することができます。
1時間後の天気や気温、湿度などを入手することができます。
取得したい情報に対してはjson形式で返します。

使用方法

今回はrakuten rapidapiでdark skyのAPIキーを入手しました。
なぜ、rakuten rapidapi経由でdark skyのAPIを入手したかというと様々なメリットがあるからです。

  • dark skyだけでなく、さまざまなAPIを使用することができる。
  • 接続用スニペットの自動生成ができる
  • ブラウザ上で即座にテストできる
APIキーとはAPIを使用するためのパスワードです。無料で情報を提供しているので、悪用されるのを防ぐためにAPIキーは存在しています。

使用手順

  1. rakuten rapidapiをブラウザで検索
  2. rakuten rapidapiの会員登録をする
  3. dark skyを検索
  4. パラメータを設定

赤い部分はAPIキーなどの個人情報が含まれているので隠しておきます。
自身の使用したいプログラミング言語をコードスニペットで選択してください。

latitudeとlongitudeのパラメータを設定しましょう。latitudeは緯度、longitudeは経度なので知りたい地点の緯度と経度を入力しましょう。

使用したソースコード

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sample</title>
<style>
</style>
</head>
<body>

<ul id="weather"></ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
//ここにjQueryのコードを記述します。 
var settings = {
	"async": true,
	"crossDomain": true,
	"url":"https://dark-sky.p.rapidapi.com/緯度,経度?lang=en&units=auto",
	"method": "GET",
	"headers": {
		"x-rapidapi-host": "dark-sky.p.rapidapi.com",
		"x-rapidapi-key": "APIキー"
	}
}

$.getJSON
   ("https://dark-sky.p.rapidapi.com/緯度,経度?lang=en&units=auto",
   function(data){
   console.dir(data);

    let hourlyData = (data.hourly.data);
    let oneHour = hourlyData[1].apparentTemperature;//1時間後の気温※apparentTemperature = 体感気温
    $("#weather").text(`1時間後の体感気温は${oneHour}℃です`);

   });

   $.ajax(settings).done(function (response) {
	console.log(response);
});

</script>
</body>
</html>

 

緯度・経度、APIキーは自身のやつを入力してください。