無料天気予報API【OpenWeatherMap】を使って天気予報サイトデモを作ってみた ~APIの呼び出し編~

{
    "coord": {
        "lon": 139.69,
        "lat": 35.69
    },
    "weather": [{
        "id": 802,
        "main": "Clouds",
        "description": "scattered clouds",
        "icon": "03d"
    }],
    "base": "stations",
    "main": {
        "temp": 29.64,
        "feels_like": 30.54,
        "temp_min": 28,
        "temp_max": 31.67,
        "pressure": 999,
        "humidity": 65
    },
    "visibility": 10000,
    "wind": {
        "speed": 5.7,
        "deg": 180
    },
    "clouds": {
        "all": 40
    },
    "dt": 1592286962,
    "sys": {
        "type": 1,
        "id": 8077,
        "country": "JP",
        "sunrise": 1592249100,
        "sunset": 1592301536
    },
    "timezone": 32400,
    "id": 1850144,
    "name": "Tokyo",
    "cod": 200
}

{
    "cod": "200",
    "message": 0,
    "cnt": 40,
    "list": [{
            "dt": 1592298000,
            "main": {
                "temp": 28.35,
                "feels_like": 26.78,
                "temp_min": 27.17,
                "temp_max": 28.35,
                "pressure": 1000,
                "sea_level": 1001,
                "grnd_level": 997,
                "humidity": 56,
                "temp_kf": 1.18
            },
            "weather": [{
                "id": 802,
                "main": "Clouds",
                "description": "scattered clouds",
                "icon": "03d"
            }],
            "clouds": {
                "all": 36
            },
            "wind": {
                "speed": 6.68,
                "deg": 178
            },
            "sys": {
                "pod": "d"
            },
            "dt_txt": "2020-06-16 09:00:00"
        },
        {
            "dt": 1592308800,
            "main": {
                "temp": 26.21,
                "feels_like": 24.81,
                "temp_min": 25.31,
                "temp_max": 26.21,
                "pressure": 1002,
                "sea_level": 1003,
                "grnd_level": 998,
                "humidity": 57,
                "temp_kf": 0.9
            },
            "weather": [{
                "id": 500,
                "main": "Rain",
                "description": "light rain",
                "icon": "10n"
            }],
            "clouds": {
                "all": 37
            },
            "wind": {
                "speed": 5.4,
                "deg": 41
            },
            "rain": {
                "3h": 0.25
            },
            "sys": {
                "pod": "n"
            },
            "dt_txt": "2020-06-16 12:00:00"
        }
    //省略
    ]
}

var API_KEY = '00000000000000000000';
var defaultCity = 'Tokyo';
//現在の天気を取得
function currentWeather() {
    $.ajax({
            url: '//api.openweathermap.org/data/2.5/weather?q=' + defaultCity + ',jp&units=metric&appid=' + API_KEY,
            dataType: 'json',
            type: 'GET'
        })
        .done(function (data) {
            //呼び出した時の処理
        })
        .fail(function (data) {
            console.log('現在の天気を取得出来ませんでした。')
        });
}

//3時間ごとの天気を取得
function threeWeather() {
    $.ajax({
            url: '//api.openweathermap.org/data/2.5/forecast?q=' + defaultCity + ',jp&units=metric&appid=' + API_KEY,
            dataType: 'json',
            type: 'GET'
        })
        .done(function (data) {
            //呼び出した時の処理
            })
        })
        .fail(function (data) {
            console.log('3時間ごとの天気を取得出来ませんでした。')
        });
}

var city = {
    name: '',
    date: '',
    time: '',
    weather: '',
    description: '',
    temp: '',
    tempMin: '',
    tempMax: '',
    feelsLike: '',
    pressure: '',
    humidity: '',
    windSpeed: '',
    WindSpeedUnit: '',
    windDeg: '',
    cloudsAll: '',
    sunriseDate: '',
    sunriseTime: '',
    sunsetDate: '',
    sunsetTime: '',
};
var current = {
    day: '',
    month: '',
    date: '',
    hours: '',
    minitutes: '',
    time: '',
    timeText: '',
}

//データ格納
function getWeatherData(data) {
    (data.name) ? city.name = data.name.toUpperCase(): city.name;
    city.description = data.weather[0].description;
    city.date = new Date(data.dt * 1000);
    city.temp = Math.round(data.main.temp);
    city.tempMin = Math.round(data.main.temp_min);
    city.tempMax = Math.round(data.main.temp_max);
    city.feelsLike = Math.round(data.main.feels_like);
    city.pressure = Math.round(data.main.pressure);
    city.humidity = Math.round(data.main.humidity);
    city.windSpeed = Math.round(data.wind.speed);
    city.windDeg = Math.round(data.wind.deg);
    city.cloudsAll = Math.round(data.clouds.all);
    (data.sys.sunrise) ? city.sunriseDate = new Date(data.sys.sunrise * 1000): city.sunriseDate = undefined; //unixtime to date
    (data.sys.sunset) ? city.sunsetDate = new Date(data.sys.sunset * 1000): city.sunsetDate = undefined; //unixtime to date
    if (city.sunriseDate && city.sunsetDate) {
        city.sunriseTime = city.sunriseDate.getHours() + ':' + city.sunriseDate.getMinutes();
        city.sunsetTime = city.sunsetDate.getHours() + ':' + city.sunsetDate.getMinutes();
    } else {
        city.sunriseTime = '-';
        city.sunsetTime = '-';
    }
}

//日付&時間取得
function createDate(date) {
    current.day = date;
    current.month = current.day.getMonth() + 1;
    current.date = current.month + '/' + current.day.getDate();
    current.hours = current.day.getHours();
    current.minitutes = ('0' + current.day.getMinutes()).slice(-2);
    current.time = current.hours + ':' + current.minitutes;
    current.timeText = current.date + ' ' + current.time;
}

<div class="city-wrap">
    <h2 id="city-name" class="city-name"></h2>
    <div id="weather-discription" class="weather-discription"></div>
    <div id="weather-temp" class="weather-temp big"></div>
    <div id="weather-date" class="weather-date"></div>
    <div class="detail-list">
        <div class="detail-item">
            <div class="text">最高気温</div>
            <div id="tempMax" class="value tempMin"></div>
        </div>
        <div class="detail-item">
            <div class="text">最低気温</div>
            <div id="tempMin" class="value tempMax"></div>
        </div>
        <div class="detail-item">
            <div class="text">体感気温</div>
            <div id="feelsLike" class="value feelsLike"></div>
        </div>
        <div class="detail-item">
            <div class="text">湿度</div>
            <div id="humidity" class="value humidity"></div>
        </div>
        <div class="detail-item">
            <div class="text">日の出</div>
            <div id="sunrise" class="value sunrise"></div>
        </div>
        <div class="detail-item">
            <div class="text">日の入</div>
            <div id="sunset" class="value sunset"></div>
        </div>
        <div class="detail-item">
            <div class="text">風速</div>
            <div id="windSpeedUnit" class="value windSpeedUnit"></div>
        </div>
        <div class="detail-item">
            <div class="text">気圧</div>
            <div id="pressure" class="value pressure"></div>
        </div>
    </div>
    <div class="weather-reportWrap">
        <div id="weather-report" class="weather-report"></div>
    </div>
</div>

var UNIT = {
    TEMP: '°',
    PRESSURE: 'hPa',
    HUMIDITY: '%',
    WINDSPEED: 'm/s',
    MIDDLE_DOT: ':'
}
//DOM要素に描写
function domWeatherWrite() {
    $('#city-name').html(city.name);
    $('#weather-temp').html(city.temp + UNIT.TEMP);
    $('#tempMin').html(city.tempMin + UNIT.TEMP);
    $('#tempMax').html(city.tempMax + UNIT.TEMP);
    $('#feelsLike').html(city.feelsLike + UNIT.TEMP);
    $('#humidity').html(city.humidity + UNIT.HUMIDITY);
    $('#sunrise').html(city.sunriseTime);
    $('#sunset').html(city.sunsetTime);
    $('#windSpeedUnit').html(city.windSpeed + UNIT.WINDSPEED);
    $('#pressure').html(city.pressure + UNIT.PRESSURE);
    $('#weather-date').html(current.timeText);
    $('.detail-list').css('display', 'flex');
}

//DOM要素に描写 3時間ごとver
function domThreeWeatherWrite(data, i) {
    var week = new Array("(日)", "(月)", "(火)", "(水)", "(木)", "(金)", "(土)");
    var dt = data.list[i].dt_txt;
    var date = new Date(dt.replace(/-/g, "/"));
    date.setHours(date.getHours() + 9);
    var month = date.getMonth() + 1;
    var day = month + "/" + date.getDate();
    var week = week[date.getDay()];
    var time = date.getHours() + "：00";
    var main = (data.list[i].weather[0].main).toLowerCase();
    var html =
        '<div class="weather-reportItem">' +
        '<div class="weather-day">' + day + '</div>' +
        '<div class="weather-week">' + week + '</div>' +
        '<div class="weather-time">' + time + '</div>' +
        '<div class="weather-main ' + main + '"></div>' +
        '<div class="weather-temp">' + Math.round(data.list[i].main.temp) + UNIT.TEMP + '</div>' +
        '</div>';
    return html
}

//天気情報分岐
function getDiscription(disc) {
    switch (disc) {
        case 'clear sky':
            return $('#weather-discription').html('快晴');
            break;
        case 'few clouds':
            return $('#weather-discription').html('くもり（雲少なめ）');
            break;
        case 'scattered clouds':
            return $('#weather-discription').html('くもり（雲ふつう）');
            break;
        case 'broken clouds':
            return $('#weather-discription').html('くもり（雲多め）');
            break;
        case 'overcast clouds':
            return $('#weather-discription').html('くもり（雲多め）');
            break;
        case 'light intensity shower rain':
            return $('#weather-discription').html('小雨のにわか雨');
            break;
        case 'shower rain':
            return $('#weather-discription').html('にわか雨');
            break;
        case 'heavy intensity shower rain':
            return $('#weather-discription').html('大雨のにわか雨');
            break;
        case 'light rain':
            return $('#weather-discription').html('小雨');
            break;
        case 'moderate rain':
            return $('#weather-discription').html('雨');
            break;
        case 'heavy intensity rain':
            return $('#weather-discription').html('大雨');
            break;
        case 'very heavy rain':
            return $('#weather-discription').html('激しい大雨');
            break;
        case 'rain':
            return $('#weather-discription').html('雨');
            break;
        case 'thunderstorm':
            return $('#weather-discription').html('雷雨');
            break;
        case 'snow':
            return $('#weather-discription').html('雪');
            break;
        case 'mist':
            return $('#weather-discription').html('靄');
            break;
        case 'tornado':
            return $('#weather-discription').html('強風');
            break;
        default:
            return disc;
    }
}

//現在の天気を取得
function currentWeather() {
    $.ajax({
            url: '//api.openweathermap.org/data/2.5/weather?q=' + defaultCity + ',jp&units=metric&appid=' + API_KEY,
            dataType: 'json',
            type: 'GET'
        })
        .done(function (data) {
            getWeatherData(data);
            createDate(city.date);
            getDiscription(city.description);
            domWeatherWrite();
        })
        .fail(function (data) {
            console.log('現在の天気を取得出来ませんでした。')
        });
}

//3時間ごとの天気を取得
function threeWeather() {
    $.ajax({
            url: '//api.openweathermap.org/data/2.5/forecast?q=' + defaultCity + ',jp&units=metric&appid=' + API_KEY,
            dataType: 'json',
            type: 'GET'
        })
        .done(function (data) {
            var insertHTML = '';
            for (var i = 0; i <= 12; i++) {
                insertHTML += domThreeWeatherWrite(data, i);
            }
            $('#weather-report').html(insertHTML);

            $('.weather-reportItem').click(function () {
                var targetNum = $(this).index();
                getWeatherData(data.list[targetNum]);
                createDate(new Date(data.list[targetNum].dt * 1000));
                getDiscription(city.description);
                domWeatherWrite();
                $('body, html').animate({
                    scrollTop: 0
                }, 300, 'linear');
            })
        })
        .fail(function (data) {
            console.log('3時間ごとの天気を取得出来ませんでした。')
        });
}

function weatherInit() {
    currentWeather();
    threeWeather();
}
weatherInit();