【解答例】jQueryMobileで天気表示

JavaScript

index.html

<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

/* 
 * 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) );

});

コメント