Help us understand the problem. What is going on with this article?

JQueryを使って現在地の天気が分かるものを作った

はじめに

使ったAPI:https://openweathermap.org/
サンプルサイト:https://main-ayama.ssl-lolipop.jp/weather.html
※https化したので動くようになりました

現在の天気に応じて背景画像が変わるところと、天気情報の日本語化のために途中で条件分岐をつけてあげてます。

コード

HTML(mainのみ)
<main>
        <div class="weatherMain">
            <div class="day">
                <div>
                    <div>
                        <span>現在の天気</span>
                    </div>
                    <div>
                        <span>天気:</span><span class="dayWeather"></span>
                    </div>
                    <div>
                        <img class="dayWeatherIcon">
                    </div>
                    <div>
                        <span>気温:</span><span class="nowTemp"></span><span></span>
                    </div>
                </div>
            </div>
            <div class="tomorrow">
                <div>
                    <div>
                        <span>明日9時の天気</span>
                    </div>
                    <div>
                        <span>天気:</span><span class="tomorrowWeather"></span>
                    </div>
                    <div>
                        <img class="tomorrowWeatherIcon">
                    </div>
                    <div>
                        <span>気温:</span><span class="tomorrowTemp"></span><span></span>
                    </div>
                </div>
            </div>
            <div class="dayAfterTomorrow">
                <div>
                    <div>
                        <span>明後日9時の天気</span>
                    </div>
                    <div>
                        <span>天気:</span><span class="dayAfterTomorrowWeather"></span>
                    </div>
                    <div>
                        <img class="dayAfterTomorrowWeatherIcon">
                    </div>
                    <div>
                        <span>気温:</span><span class="dayAfterTomorrowTemp"></span><span></span>
                    </div>
                </div>
            </div>
        </div>    
    </main>
JavaScript
$(document).ready(function () {
    'use strict'

    const APIKEY = "発行したAPIKEYはここ";

    //翌日9時のデータの場所を割り出す
    const date = new Date();
    const nowHour = date.getHours();
    const whichTomorrowWeatherData = Math.floor((24 - nowHour + 9) / 3);
    const whichDayAfterTomorrowWeatherData = Math.floor((24 - nowHour + 33) / 3);

    //現在位置の取得ができるかどうか
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success, error);

        // 現在位置の取得に成功した場合
        function success(position) {
            const positionData = position.coords;

            //緯度経度の取得と表示
            const lat = positionData.latitude;
            const lon = positionData.longitude;
            $('.location').text('現在の位置(' + Math.floor(lat * 100) / 100 + ',' + Math.floor(lon * 100) / 100 + ')');


            //現在の天気データを呼び出し
            $.ajax({
                url: "http://api.openweathermap.org/data/2.5/weather",
                dataType: "jsonp",
                data: "lat=" + lat + "&lon=" + lon + "&appid=" + APIKEY,
                //天気データ呼び出し成功時の挙動
                success: function (data) {                
                    if (data.weather[0].main === "Clear") {
                        $('body').css('background-image', 'url(Sunny.jpg)');
                        $('.dayWeather').text("晴れ");
                    } else if (data.weather[0].main === "Rain") {
                        $('body').css('background-image', 'url(Rain.jpg)');
                        $('.dayWeather').text("");
                    } else if (data.weather[0].main === "Clouds") {
                        $('body').css('background-image', 'url(Cloudy.jpg)');
                        $('.dayWeather').text("くもり");
                    } else if (data.weather[0].main === "Snow") {
                        $('body').css('background-image', 'url(Snowy.jpg)');
                        $('.dayWeather').text("");
                    }

                    //各データの表示
                    $('.nowTemp').text(Math.floor((data.main.temp - 273.15) * 10) / 10);
                    $('.dayWeatherIcon').attr('src', 'http://openweathermap.org/img/w/' + data.weather[0].icon + '.png ');
                }
            });

            //明日9時の天気データを呼び出し
            $.ajax({
                url: "http://api.openweathermap.org/data/2.5/forecast",
                dataType: "jsonp",
                data: "lat=" + lat + "&lon=" + lon + "&appid=" + APIKEY,
                //天気データ呼び出し成功時の挙動
                success: function (data) {

                    //翌日9時の天気データ
                    const targetData1 = data.list[whichTomorrowWeatherData];
                    const targetData2 = data.list[whichDayAfterTomorrowWeatherData];

                    if (targetData1.weather[0].main === "Clear") {
                        $('.tomorrowWeather').text("晴れ");
                    } else if (targetData1.weather[0].main === "Rain") {
                        $('.tomorrowWeather').text("");
                    } else if (targetData1.weather[0].main === "Clouds") {
                        $('.tomorrowWeather').text("くもり");
                    } else if (targetData1.weather[0].main === "Snow") {
                        $('.tomorrowWeather').text("");
                    }

                    if (targetData2.weather[0].main === "Clear") {
                        $('.dayAfterTomorrowWeather').text("晴れ");
                    } else if (targetData2.weather[0].main === "Rain") {
                        $('.dayAfterTomorrowWeather').text("");
                    } else if (targetData2.weather[0].main === "Clouds") {
                        $('.dayAfterTomorrowWeather').text("くもり");
                    } else if (targetData2.weather[0].main === "Snow") {
                        $('.dayAfterTomorrowWeather').text("");
                    }

                    ///各データの表示
                    $('.tomorrowTemp').text(Math.floor((targetData1.main.temp - 273.15) * 10) / 10);
                    $('.tomorrowWeatherIcon').attr('src', 'http://openweathermap.org/img/w/' + targetData1.weather[0].icon + '.png ');
                    $('.dayAfterTomorrowTemp').text(Math.floor((targetData2.main.temp - 273.15) * 10) / 10);
                    $('.dayAfterTomorrowWeatherIcon').attr('src', 'http://openweathermap.org/img/w/' + targetData2.weather[0].icon + '.png ');
                }
            });
        }

        //現在位置の取得に失敗した場合
        function error(error) {
            alert("位置情報が取得できなかったため、東京の天気を表示します");
            $('.location').text('東京');

            TokyoWeather();

        }
        //現在位置がそもそも取得できない場合
    } else {
        alert("位置情報が取得できなかったため、東京の天気を表示します");
        $('.location').text('東京');

        TokyoWeather();
    }

    //東京の天気
    function TokyoWeather() {

        //現在の天気データ呼び出し
        $.ajax({
            url: "http://api.openweathermap.org/data/2.5/weather",
            dataType: "jsonp",
            data: "q=Tokyo,jp&appid=" + APIKEY,
            //天気データ呼び出し成功時の挙動
            success: function (data) {
                if (data.weather[0].main === "Sunny" || data.weather[0].main === "Clear") {
                    $('body').css('background-image', 'url(Sunny.jpg)');
                    $('.dayWeather').text("晴れ");
                } else if (data.weather[0].main === "Rain") {
                    $('body').css('background-image', 'url(Rain.jpg)');
                    $('.dayWeather').text("");
                } else if (data.weather[0].main === "Clouds") {
                    $('body').css('background-image', 'url(Cloudy.jpg)');
                    $('.dayWeather').text("くもり");
                } else if (data.weather[0].main === "Snow") {
                    $('body').css('background-image', 'url(Snowy.jpg)');
                    $('.dayWeather').text("");
                }

                //各データの表示
                $('.nowTemp').text(Math.floor((data.main.temp - 273.15) * 10) / 10);
                $('.dayWeatherIcon').attr('src', 'http://openweathermap.org/img/w/' + data.weather[0].icon + '.png ');
            }
        });

        //翌日9時の天気データを呼び出し
        $.ajax({
            url: "http://api.openweathermap.org/data/2.5/forecast",
            dataType: "jsonp",
            data: "q=Tokyo,jp&appid=" + APIKEY,
            //天気データ呼び出し成功時の挙動
            success: function (data) {

                //翌日9時の天気データ
                const targetData1 = data.list[whichTomorrowWeatherData];
                const targetData2 = data.list[whichDayAfterTomorrowWeatherData];

                if (targetData1.weather[0].main === "Clear") {
                    $('.tomorrowWeather').text("晴れ");
                } else if (targetData1.weather[0].main === "Rain") {
                    $('.tomorrowWeather').text("");
                } else if (targetData1.weather[0].main === "Clouds") {
                    $('.tomorrowWeather').text("くもり");
                } else if (targetData1.weather[0].main === "Snow") {
                    $('.tomorrowWeather').text("");
                }

                if (targetData2.weather[0].main === "Clear") {
                    $('.dayAfterTomorrowWeather').text("晴れ");
                } else if (targetData2.weather[0].main === "Rain") {
                    $('.dayAfterTomorrowWeather').text("");
                } else if (targetData2.weather[0].main === "Clouds") {
                    $('.dayAfterTomorrowWeather').text("くもり");
                } else if (targetData2.weather[0].main === "Snow") {
                    $('.dayAfterTomorrowWeather').text("");
                }

                ///各データの表示
                $('.tomorrowTemp').text(Math.floor((targetData1.main.temp - 273.15) * 10) / 10);
                $('.tomorrowWeatherIcon').attr('src', 'http://openweathermap.org/img/w/' + targetData1.weather[0].icon + '.png ');
                $('.dayAfterTomorrowTemp').text(Math.floor((targetData2.main.temp - 273.15) * 10) / 10);
                $('.dayAfterTomorrowWeatherIcon').attr('src', 'http://openweathermap.org/img/w/' + targetData2.weather[0].icon + '.png ');
            }
        });
    }
}());

参考にしたサイト

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away