Webデザイン学科
授業資料

概要解説

気象庁の天気予報 API から取得を活用して、アプリを制作します。

内容

• JavaScript クイズ ④
• 非同期通信（Ajax)
• 気象庁天気 API 活用作品（アプリ、機能、プラグインなど）

JavaScript クイズ

15 分以内に回答して、送信してください。

• 5 月 10 日（火）
  • JavaScript クイズ ④
• 5 月 17 日（火）「単独で利用する場合」「単独で使うと同じようなプログラムが続く場合のループにする」区別する＋ HTML への追加
  • JavaScript クイズ ⑤
• 5 月 24 日（火） ループと条件分岐（if 文）の組み合わせ＋ HTML への追加
  • JavaScript クイズ ⑥
• 5 月 31 日（火） これまでの授業「オブジェクトの取得と表示」の振り返りです。
  • JavaScript クイズ ⑦
• 6 月 7 日（火） 初歩の文字の書き換え、追加の確認問題です。
  • JavaScript クイズ ⑧

天気予報 API 活用作品（アプリ、機能、プラグインなど）制作

天気予報 API を利用した、アプリ、機能、プラグインなどを作成してください。

• 締め切り：6 月 7 日（火）3 時限目発表

作品提出

• インターネットから繋がるサーバーにアップロードして、その URL を txt データで f81srv1 に提出してください。
• ファイル名：ws1_00_name_weather.txt
• 気象庁天気 API との接続を確認してください。
• 気象庁天気 API 仕様書を提出
  

天気予報 API スニペット

天気予報 API の取得方法と HTML への入力例

本日の天気予報概要の取得と li 要素への入力

最新の天気予報の概要が取得できます。

• publishingOffice（発表機関）
• reportDatetime（発表日時）
• targetArea（対象都道府県）
• headlineText（お知らせ）
• text（内容）

<div class="target"></div>
<script>
	//東海4県のコード番号をオブジェクトの配列にしておきます。
	const codeNums = [{ 愛知県: 23 }, { 岐阜県: 21 }, { 三重県: 24 }, { 静岡県: 22 }];
	//テンプレートリテラルでconst urlに代入します。
	const url = `https://www.jma.go.jp/bosai/forecast/data/overview_forecast/${codeNums[0]['愛知県']}0000.json`;

	fetch(url)
		.then(function (response) {
			return response.json();
		})
		.then(function (weather) {
			console.log(weather);
			const result = document.querySelector('.target');
			const elmUl = document.createElement('ul');
			for (const key in weather) {
				const list = document.createElement('li');
				elmUl.appendChild(list).innerHTML = key + '：' + weather[key];
				result.appendChild(elmUl);
			}
		});
</script>

天気予報（今日・明日・明後日・週間）を取得

天気予報（今日・明日※48 時間・週間）を取得できます。

• 今日・明日（48 時間）の天気予報
• 1 週間（7 日間）の天気予報

//東海4県のコード番号をオブジェクトの配列にしておきます。
const codeNums = [{ 愛知県: 23 }, { 岐阜県: 21 }, { 三重県: 24 }, { 静岡県: 22 }];
const weekUrl = `https://www.jma.go.jp/bosai/forecast/data/forecast/${codeNums[0]['愛知県']}0000.json`;

fetch(weekUrl)
	.then(function (response) {
		return response.json();
	})
	.then(function (data) {
		console.log(data);
	});

今日・明日（48 時間）の天気予報

• publishingOffice（発表機関）

• reportDatetime（発表日時）

• timeSeries（48 時間の天気）

  • areas（地域）
    • area（詳細地域）
    • waves（48 時間の波）
    • weatherCodes（天気のコード)
    • weathers（48 時間の天気）
    • winds（48 時間の風）
  • timeDefines（6 時間ごとの時間※計 48 時間）

今日・明日（明後日）の天気を li 要素で表示します。

<div class="threeDays"></div>
<script>
	const codeNums = [{ 愛知県: 23 }, { 岐阜県: 21 }, { 三重県: 24 }, { 静岡県: 22 }];
	const weekUrl = `https://www.jma.go.jp/bosai/forecast/data/forecast/${codeNums[0]['愛知県']}0000.json`;
	fetch(weekUrl)
		.then(function (response) {
			return response.json();
		})
		.then(function (data) {
			//愛知県西部の天気予報をwest、日付をweatherDateに代入します。
			const west = data[0].timeSeries[0].areas[0];
			const weatherDate = data[0].timeSeries[0].timeDefines;
			//h1［西部」を挿入する。
			const result = document.querySelector('.threeDays');
			result.innerHTML = `<h1>${west.area.name}</h1>`;
			//ulをresultに挿入
			const elmUl = document.createElement('ul');
			result.appendChild(elmUl);
			for (let i = 0; i < west.weathers.length; i++) {
				const elmLi = document.createElement('li');
				//new Date()で月日を取得します。※月は0から始まるので+1
				//テンプレートリテラル``を使うと多少短くなります。
				elmLi.innerHTML = `${new Date(weatherDate[i]).getMonth() + 1}月${new Date(weatherDate[i]).getDate()}日：${west.weathers[i]}`;
				//liをulに挿入します
				elmUl.appendChild(elmLi);
			}
		});
</script>

日付を扱うためには、new Date()を使います。

• Date - JavaScript | MDN

6 時間ごとの降水率

• pops

<!-- table用のスタイルシート -->
<style>
	table,
	th,
	td {
		border: 1px solid #000;
		border-collapse: collapse;
	}
</style>
<div class="precipitation">
	<table></table>
</div>
<script>
	const codeNums = [{ 愛知県: 23 }, { 岐阜県: 21 }, { 三重県: 24 }, { 静岡県: 22 }];
	const weekUrl = `https://www.jma.go.jp/bosai/forecast/data/forecast/${codeNums[0]['愛知県']}0000.json`;
	fetch(weekUrl)
		.then(function (response) {
			return response.json();
		})
		.then(function (data) {
			//東部を挿入します。
			const precipAria = document.querySelector('.precipitation');
			const head1 = document.createElement('h1');
			head1.innerHTML = `${data[0].timeSeries[1].areas[1].area.name}降水率`;
			precipAria.insertBefore(head1, precipTable);
			//tableに行を2行挿入します。
			const precipTable = document.querySelector('.precipitation table');
			const elmTr1 = document.createElement('tr');
			const elmTr2 = document.createElement('tr');
			//jsonから時間を取得する
			const timeStamp = data[0].timeSeries[1].timeDefines;
			//for..of文でループします。
			for (const time of timeStamp) {
				const data = new Date(time);
				const elmTh = document.createElement('th');
				//時間を分を2桁にする方法
				elmTh.innerHTML = `${data.getHours()}時${data.getMinutes().toString().padStart(2, '0')}分`;
				elmTr1.appendChild(elmTh);
				precipTable.appendChild(elmTr1);
			}
			//降水率をjsonから取得し、挿入する。
			const pops = data[0].timeSeries[1].areas[1].pops;
			console.log(pops);
			for (const percent of pops) {
				const elmTh = document.createElement('th');
				elmTh.innerHTML = `${percent}%`;
				elmTr2.appendChild(elmTh);
				precipTable.appendChild(elmTr2);
			}
		});
</script>

天気コードを扱う

気象庁が利用している weathercode については、いろいろなブログで開設されています。

• 気象庁 JSON ファイルにある weatherCode 一覧 │ TEAM T3A
• 気象庁公式の天気予報の情報（JSON）を curl・Node.js で取得し Node.js での処理を試す - Qiita

気象庁｜天気予報で Devtools（右クリック検証）のコンソールにForecast.Const.TELOPSと入力してリターンキーを押します。
オブジェクトが表示されますので、右クリックで「object のコピー」でコピーをします。
新規ファイルを作成し「weathercode.js」内にペーストして、const weathercodeに代入します。
そのファイルを<script src="weathercode.js></script>"で読み込んで利用します。

• 天気コードのデータも用意しました。weathercodes.js
• 天気予報の画像の URL は、https://www.jma.go.jp/bosai/forecast/img/〇〇.svg

<!-- 天気コードのjsonを読み込み -->
<script src="weathercodes.js"></script>
<script>
	const codeNums = [{ 愛知県: 23 }, { 岐阜県: 21 }, { 三重県: 24 }, { 静岡県: 22 }];
	const weekUrl = `https://www.jma.go.jp/bosai/forecast/data/forecast/${codeNums[0]['愛知県']}0000.json`;
	fetch(weekUrl)
		.then(function (response) {
			return response.json();
		})
		.then(function (data) {
			const result = document.querySelector('.threeDays');
			const code = data[0].timeSeries[0].areas[0].weatherCodes;

			for (let i = 0; i < code.length; i++) {
				//画像に気象庁のアイコンを読み込み、表示させる。
				const image = document.createElement('img');

				//天気コード内のconst weathercodes内のコードを活用
				console.log(weathercodes[code[i]][0]);
				const weathericon = weathercodes[code[i]][0];
				image.src = `https://www.jma.go.jp/bosai/forecast/img/${weathericon}`;
				result.appendChild(image);
			}
		});
</script>

週間（7 日間）の天気予報

天気予報は、weathercode で提供されますので、日付ともに表に追加していきます。

<div class="seventh">
	<table>
		<tr>
			<th>日付</th>
			<th>天気</th>
		</tr>
	</table>
</div>
<script>
	const codeNums = [{ 愛知県: 23 }, { 岐阜県: 21 }, { 三重県: 24 }, { 静岡県: 22 }];
	const weekUrl = `https://www.jma.go.jp/bosai/forecast/data/forecast/${codeNums[0]['愛知県']}0000.json`;
	fetch(weekUrl)
		.then(function (response) {
			return response.json();
		})
		.then(function (data) {
			//気象庁の天気情報jsonから天気コードを取得
			const weekly = data[1].timeSeries[0].areas[0].weatherCodes;
			//予報日を取得
			const weeklyDate = data[1].timeSeries[0].timeDefines;
			//曜日設定用の配列を用意
			const dayarray = ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'];
			//表示させるDOMを取得
			const seventhArea = document.querySelector('.seventh');
			const elmTable = document.querySelector('.seventh table');
			//h1に愛知県を表示させて、追加する。
			const aichiTitle = document.createElement('h1');
			aichiTitle.innerHTML = `${data[1].timeSeries[0].areas[0].area.name}週間天気`;
			seventhArea.insertBefore(aichiTitle, elmTable);

			//1週間の日数をループさせる
			for (let i = 0; i < weekly.length; i++) {
				console.log(weekly[i], weeklyDate[i]);
				//trは行、tdは列で必要な要素を作成
				const elmTr = document.createElement('tr');
				const elmTdDate = document.createElement('td');
				const elmTdWeather = document.createElement('td');
				//日数を行に設定
				elmTdDate.innerHTML = `${new Date(weeklyDate[i]).getDate()}日（${dayarray[new Date(weeklyDate[i]).getDay()]}）`;
				elmTr.appendChild(elmTdDate);
				//更に天気コードから行に追加
				elmTdWeather.innerHTML = weathercodes[weekly[i]][3];
				elmTr.appendChild(elmTdWeather);
				//tableに行を追加
				elmTable.appendChild(elmTr);
			}
		});
</script>

3 日間の天気を取得し、コード番号から天気系統を取得する方法

天気コードは、100 番台が晴れ、200 番台が曇り、300 番台が雨、400 番台が雪と別れています。
すべてのコードに割り当てるには種類が多すぎるので、各数値の 100 の位を取得する方法を明記します。

<script>
	//愛知県の天気
	const weekUrl = `https://www.jma.go.jp/bosai/forecast/data/forecast/230000.json`;
	fetch(weekUrl)
		.then(function (response) {
			return response.json();
		})
		.then(function (data) {
			const code = data[0].timeSeries[0].areas[0].weatherCodes;

			for (let i = 0; i < code.length; i++) {
				//天気コードを取得
				console.log(code[i]);
				//コードの100の位を取得
				let hundredsPlace = code[i].charAt(0);
				//各コードの最初の数字で判定
				if (hundredsPlace === '1') {
					console.log('晴れ');
				} else if (hundredsPlace === '2') {
					console.log('曇り');
				} else if (hundredsPlace === '3') {
					console.log('雨');
				} else {
					console.log('その他');
				}
			}
		});
</script>

随時、追記・編集していきます。

その他

• 参考：紫外線インデックスは、OpenUV
• 参考：気象庁 JSON データ - Qiita
• 参考：Common Lisp で天気予報スクリプトを作ってみた〜気象庁編〜 - JPDEBUG.COM
• precipAverage（降水量の 7 日間合計の「向こう一週間（明日から７日先まで）の平年値）
• tempAverage（最低、最高気温の「向こう一週間（明日から７日先まで）の平年値）

発表・プレンテーション

• 日時：2022 年 6 月 7 日（月）3 時限目
• 提出方法：サーバーにアップ後、URL を f81srv1 に提出
• プレゼン時間：3 分 ×20 名
• アプリ名を title 要素に設定しておいてください。
• 評価基準
  1. 表示・操作することができるか。
  2. 天気予報 API を取得できているか。
  3. API のデータの活用アイデア。

作品リンク

1. ウェザーリポートが教える天気
2. 天気予報
3. じゃんけんゲーム
4. 妖精たちは夏を刺激できるのか
5. 天気御籤
6. 今日の音楽
7. UV 予報
8. 神経衰弱ゲーム
9. 三択ゲーム
10. weather
11. おそら天気
12. aruaru
13. お天気 API
14. 和風天気予報アプリ
15. Weather
16. TOKAI WEATHER
17. お天気ロボ
18. OTENKIMUSIC
19. かえるの天気予報
20. お天気アプリ