Web API（OpenWeatherMap）の呼び出し方法【JavaScript 】

アプリ制作 2020

（ブログ記事の一覧は「こちら」）

Webブラウザ上でWeb APIを実行することも可能です。方法はいろいろありますが、ここではJavaScriptによるHTTP通信を行う方法について説明します。

Webブラウザ上でHTTP通信を行うには、非同期通信（Ajax）でHTTP通信を行う必要があります。（別のHTMLに移動することのない、同一のHTMLにて処理が行われます。具体例として、Google Mapなど。）

非同期通信（Ajax）を行うには、JavaScriptの XMLHttpRequest オブジェクトを使用します。

サンプルプログラム

以下は、「東京」の現在の天気を取得するサンプルになります。

index.html

文字コードは「UTF-8」に指定してください。

<html>
<head>
   <meta charset="UTF-8">
   <script src="main.js"></script>
</head>

<body>
    <h1>OpenWeatherMap API</h1>

    <p>場所：<span id="place"></span></p>

    <p>天気：<span id="weather"></span></p>
    <p><img id="icon"></p>

    <p>気温：<span id="temp"></span>℃</p>
</body>
</html>
main.js

「東京」の現在の天気を取得するJavaScriptのプログラムです。

var strUrl = "https://api.openweathermap.org/data/2.5/weather?q=Tokyo&units=metric&lang=ja&appid=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    // 非同期通信（Ajax）
    // readyState 4: リクエスト終了, status 200:通信成功
    if (this.readyState == 4 && this.status == 200) {
        var data = this.response;

        // 場所
        document.getElementById('place').innerHTML = data.name;

        // 天気（画像）
        var img = document.getElementById('icon');
        img.src = "https://openweathermap.org/img/wn/" + data.weather[0].icon + "@2x.png";
        img.alt = data.weather[0].main;

        // 天気
        document.getElementById('weather').innerHTML = data.weather[0].main + "（" + data.weather[0].description + "）";

        // 気温
        document.getElementById('temp').innerHTML = data.main.temp;
    }
}
xmlhttp.open("GET", strUrl, true);  // 第３引数の意味（非同期通信：true、同期通信：false）
xmlhttp.responseType = 'json'; // JSONを取得するために必要
xmlhttp.send();


練習課題

サンプルプログラムに「湿度」「気圧」の情報を追加してください。

課題1

index.htmlにボタンを3個追加して、クリックすると「Tokyo」「Osaka」「XXX（あなたの生まれた場所）」に天気情報の表示が切り替わるような仕組みになるように改造してください。

以下を参考にしてください。

   ...

    <p><input type="button" value="Tokyo" onclick="callOpenWeatherMap('Tokyo')"></p>

    ...

main.jsは、関数化する必要があります。

function callOpenWeatherMap(place) {
    var strUrl = "https://api.openweathermap.org/data/2.5/weather?q=" + place + "&units=metric&lang=ja&appid=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";

    // 以下、カスタマイズ

}

課題2

「東京」の「天気予報」の情報を受け取るWebページを作成してください。

https://api.openweathermap.org/data/2.5/forecast?q=Tokyo&units=metric&lang=ja&appid=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

得られた結果のJSONデータを分析して、見やすい天気予報のWebページを作成してください。
また、東京以外の複数の場所を選択して表示を切り替えることができるようにしてください。