#この記事でできること
1.OpenWeatherMapを知る
2.JavascriptでのAPIの扱い方
3.天気情報を取得する
#OpenWeatherMapとは
OpenweathermapはWebやモバイルアプリケーションの開発者に、現在の天候や予測履歴を含む各種気象データの無料APIを提供するオンラインサービスである。(Wikipediaより)
しかしAPIのみではなく上記画像のように都市名を入力するとGUIで天候情報を確認することも可能である。
#APIを使用するための準備
1.アカウントの作成を行う。
ユーザー名、メールアドレス、パスワードを設定する
2.apiキーの取得
3.APIの選択
多くのAPIが用意されているので選択します。
今回はCurrent Weather Dataを使用します。
#郵便番号から地域と天気を取得する
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>json_get</title>
</head>
<body>
<script src="jquery-3.1.0.min.js"></script>
<!--郵便番号入力フォーム-->
<form id="form1" action="#">
<input type="text"id="input_message" value="">
<input type="button" onclick="func1()" value="送信">
</form>
<!--取得した天気を表示-->
<div id="output_message"></div>
<script language="javascript" type="text/javascript">
function func1() {
//郵便番号を変数post_numへ代入
var post_num = document.getElementById("input_message").value;
//zipに郵便番号を代入
url = `http://api.openweathermap.org/data/2.5/weather?zip=${post_num},jp&appid=apiキー`;
//取得したJSONデータを読み込む
$.getJSON(url, (data) => {
//地域名
console.log(`${data.name}`);
//天気
document.getElementById("output_message").innerHTML = `${data.weather[0].main}`;
});
}
</script>
</body>
</html>
取得したJSONデータ(横浜市西区高島の場合)
{
"coord": {
"lon": 139.62,
"lat": 35.46
},
"weather": [
{
"id": 803,
"main": "Clouds",
"description": "broken clouds",
"icon": "04n"
}
],
"base": "stations",
"main": {
"temp": 283.85,
"feels_like": 277.79,
"temp_min": 283.71,
"temp_max": 284.15,
"pressure": 1021,
"humidity": 62
},
"visibility": 10000,
"wind": {
"speed": 6.7,
"deg": 20
},
"clouds": { "all": 75 },
"dt": 1607444694,
"sys": {
"type": 1,
"id": 8074,
"country": "JP",
"sunrise": 1607463548,
"sunset": 1607498931
},
"timezone": 32400,
"id": 0,
"name": "Takashima",
"cod": 200
}
###表示結果
#やってみて
「`」と「'」の違いは初心者にとっては難しいかもしれませんが（私もプログラミング自体久しぶりで忘れていました）
他の記事などを参考にする際には気を付けたいですね
意外とJavascriptの入門書でAPIの扱いを記述しているものが少ないのでこの記事で
最初の一歩を踏み出していただけたらなと思います。
数あるAPIの中から今回はOpenWeatherMapを選択しましたがAPIを使えるようになるととても幅が広がります。