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) ); }); |
コメント