【GAS】天気予報を表示するアプリを作る～jsonの中身のチェック～【第1回】

2022/06/172023/12/06

前回までは、APIを扱う練習として、画像のURLを受け取りHTMLで表示するアプリを作っていました。今回からは気象庁からjsonを受け取り、その内容を表示するアプリを作っていきたいと思います。

気象庁

気象庁のjsonファイルが利用可能になっているとの情報を得て、やっていきます。気象庁の利用規約に則って利用してください。

地域コードについて

地域コードは、気象庁の地域のページを開いた時のURLが対応しています。以下は東京地方の天気予報のURLですが、「area_code=130000」となっており、地域コードが「130000」であることがわかります。

https://www.jma.go.jp/bosai/#area_type=offices&area_code=130000&pattern=forecast

また、以下のリンクに地域コードが一覧で掲載されているので、こちらでも確認できます。

jsonの中身を見る

早速、jsonの中身を見ていきたいと思います。今回は見やすくするためにこちらを利用させていただきました。

以下は6月13日に取得した、東京の天気予報データの一部です。

[
	{
		"publishingOffice": "気象庁",
		"reportDatetime": "2022-06-13T05:00:00+09:00",
		"timeSeries": [
			{
				"timeDefines": [
					"2022-06-13T05:00:00+09:00",
					"2022-06-14T00:00:00+09:00"
				],
				"areas": [
					{
						"area": {
							"name": "東京地方",
							"code": "130010"
						},
						"weatherCodes": [
							"101",
							"212"
						],
						"weathers": [
							"晴れ　時々　くもり",
							"くもり　夜　雨"
						],
						"winds": [
							"南東の風　２３区西部　では　南東の風　やや強く",
							"北の風　後　東の風"
						],
						"waves": [
							"０．５メートル　後　１メートル",
							"０．５メートル"
						]
					},

今まで扱ってきたjsonファイルよりかなり難解ですが、予報の時間や、予報エリア、天気予報などの情報が詰まっていることがわかりますね。

さらに下の方を見ていくと、降水確率が出てきました。降水確率は、天気予報よりは細かく設定されているようですね。

				"timeDefines": [
					"2022-06-13T06:00:00+09:00",
					"2022-06-13T12:00:00+09:00",
					"2022-06-13T18:00:00+09:00",
					"2022-06-14T00:00:00+09:00",
					"2022-06-14T06:00:00+09:00",
					"2022-06-14T12:00:00+09:00",
					"2022-06-14T18:00:00+09:00"
				],
				"areas": [
					{
						"area": {
							"name": "東京地方",
							"code": "130010"
						},
						"pops": [
							"0",
							"0",
							"10",
							"10",
							"20",
							"40",
							"50"
						]
					},
					{
						"area": {
							"name": "伊豆諸島北部",
							"code": "130020"
						},
						"pops": [
							"10",
							"10",
							"20",
							"50",
							"50",
							"60",
							"80"
						]
					},

さらに見ていきます。次に出てきたのは気温の予報ですね。こちらは最高気温、最低気温ではなく、時間ごとの気温の予報です。

				"timeDefines": [
					"2022-06-13T09:00:00+09:00",
					"2022-06-13T00:00:00+09:00",
					"2022-06-14T00:00:00+09:00",
					"2022-06-14T09:00:00+09:00"
				],
				"areas": [
					{
						"area": {
							"name": "東京",
							"code": "44132"
						},
						"temps": [
							"27",
							"27",
							"17",
							"21"
						]
					},
					{
						"area": {
							"name": "大島",
							"code": "44172"
						},
						"temps": [
							"25",
							"25",
							"17",
							"22"
						]
					},

他にも、週間天気予報や最低気温、最高気温などが含まれていました。

最後に

今回はjsonの中身を見るだけで終わってしまいましたが、次回からは中身のデータを表示できるようにしていこうと思います。

【GAS】天気予報を表示するアプリを作る～目次～

• 【GAS】天気予報を表示するアプリを作る～jsonの中身のチェック～【第1回】
• 【GAS】天気予報を表示するアプリを作る～console.logで表示～【第2回】
• 【GAS】天気予報を表示するアプリを作る～HTMLに一部表示～【第3回】
• 【GAS】天気予報を表示するアプリを作る～地域を選択できるようにする～【第4回】
• 【GAS】天気予報を表示するアプリを作る～テーブルで天気予報を表示～【第5回】
• 【GAS】天気予報を表示するアプリを作る～HTMLにCSSを追記～【第6回】
• 【GAS】天気予報を表示するアプリを作る～日付の整理～【第7回】
• 【GAS】天気予報を表示するアプリを作る～ドライブから読み込む～【第8回】
• 【GAS】天気予報を表示するアプリを作る～画像を表示させる～【第9回】
• 【GAS】天気予報を表示するアプリを作る【最終回】