【解答例】jQueryMobileで天気表示

JavaScript

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>天気予報</title>
    <link rel="stylesheet" href="themes/lightblue.min.css" />
    <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="main.js"></script>
    <style>
        table{
            border-collapse: collapse;
            width: 100%;
        }
        table, th, td{
            border: solid 1px #fff;
        }
        th, td{
            background-color: #ddd;
            padding: 0.5em 1em;
        }
        p#time{
            font-size: 0.8em;
            text-align: right;
        }
    </style>
</head>
<body>
    <div data-role="page" data-theme="a">
        <div data-role="header" data-position="inline">
            <h1>明日の天気</h1>
        </div>
        <div data-role="content" data-theme="a">
            <table>
                <caption id="area"></caption>
                <tr><th>日付</th><td id="date"></td></tr>
                <tr><th>天気予報</th><td id="weather"></td></tr>
                <tr><th>最高気温</th><td id="max"></td></tr>
                <tr><th>最低気温</th><td id="min"></td></tr>
            </table>
            <p id="time"></p>
        </div>
    </div>
</body>
</html>

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/*
 * main.js : 気象庁のサイトから天気予報情報を取得(JSON)
 *  日付に「曜日」を追加、天気予報に「 所により~」があれば省略、「〇〇気象台〇〇時発表」の表示を追加
 */
 
// 茨城県の地点URL(例:東京都は130000.json)
const url = "https://www.jma.go.jp/bosai/forecast/data/forecast/080000.json";
 
// JSONお天気情報を整形して表示する
function formatTenkiJSON(weather){
    console.log(weather);
 
    // 地域
    document.getElementById("area").textContent = weather[1].tempAverage.areas[0].area.name + "地方明日の天気";
 
    // 日付情報を整形
    const date = new Date(weather[0].timeSeries[0].timeDefines[1]);
    const youbi = ["日", "月", "火", "水", "木", "金", "土"];
    const formatDate = date.getMonth() + 1 + "月" + date.getDate() + "日" + "(" + youbi[date.getDay()] + ")";
    document.getElementById("date").textContent = formatDate;
 
    // 明日の天気
    let tenki = weather[0].timeSeries[0].areas[0].weathers[1];
    //tenki = tenki.replace(/ 所により.*/g, "");    // 「所により~」を省略
    document.getElementById("weather").textContent = tenki;
 
    // 明日の予想最高気温
    document.getElementById("max").textContent = weather[1].timeSeries[1].areas[0].tempsMax[1] + "℃";
 
    // 明日の予想最低気温
    document.getElementById("min").textContent = weather[1].timeSeries[1].areas[0].tempsMin[1] + "℃";
 
    // 気象台と発表時刻
    const reportTime = new Date(weather[1].reportDatetime)
    const hour = reportTime.getHours();
    const formatHour = hour >= 12 ? "午後" + (hour - 12) : "午前" + hour;    // 時刻を午前午後に整形
    const formatTime = reportTime.getMonth() + 1 + "/" + reportTime.getDate() + " " + formatHour + "時発表";
 
    document.getElementById("time").textContent = weather[0].publishingOffice + " " + formatTime;
}
 
// jQueryMobileでページロード時に書き換える
$(document).on("pagecreate", function(){
    // 気象庁の天気予報WebAPIからJSONデータを取得
    fetch(url)
        .then( response => response.json() )
        .then( weather => formatTenkiJSON(weather) );
 
});

コメント