編集するプログラムは、指定した地域の天気を表示するプログラムです。
プログラムの完成例
JSONデータを加工することにより、簡単に好きな形式で表示することが可能です。
アクティビティ①で見にくかったJSONデータから必要なデータのみ取り出して、見やすい表示を作りましょう。
7. アクティビティ② ( 7 / 11 )
アクティビティ②
天気を表示するプログラムを編集しよう
ファイルのダウンロード
アクティビティ2で使用するファイルをダウンロードします。
下記ダウンロードボタンからZipファイルをデスクトップなどにダウンロードして、ファイルを展開しましょう。
ダウンロードしたZipファイルを展開すると次のファイル構成になっています。
ダウンロードが完了したら、index.htmlファイルをダブルクリックなどして開いてみましょう。
新潟の今日の天気が表示されています。このプログラムを修正していきます。
注
意
天気の画像と気温は時間帯などにより表示されない場合があります。
天気画像や気温の表示が無くても他のデータが出てれば間違いではありません。
風の情報も表示されていませんが、課題2-2で表示する処理を追加します。
ファイルの説明
「index.html」と「script.js」にはそれぞれ下記のプログラムが記述されてます。
-
・ index.html : ブラウザに天気を表示するためのHTML
-
・ script.js : Web APIを使って天気情報を取得し、表示用のデータを抜き出すJavaScriptプログラム
index.htmlファイルとscript.jsファイルにどんなことが記述されているか確認しましょう。
index.htmlの説明
index.htmlファイルは、HTMLタグで書かれたファイルで、Webページに表示する内容が記述されています。
12行目の<body>～39行目の</body>の範囲に記述された内容が、ブラウザで表示されます。
下図では、赤枠は、1日分の天気情報をまとめて表示を行う場所を作成しています。例えば、1週間の天気予報を表示する場合は、赤枠の内容を7回(7日分)繰り返します。青枠は、天気や気温などのそれぞれの情報を表示するための文です。
index.htmlファイル
script.jsの説明
script.jsファイルでは、Web APIを利用して天気を情報などの取得を行っています。
script.jsファイルをダブルクリックしないようにしましょう。
ダブルクリックをするとファイルを実行してしまいます。ファイルを開く場合は、メモ帳のようなエディタのメニューから開くか、ドラッグしましょう。
重要なところは下図の①～④の4つです。
この4か所だけ確認をしましょう。
図の青枠と赤枠には次の意味があります。
- 青枠 ： Web APIを実行するための処理
- 赤枠 ： Web APIから受け取ったデータを表示するための処理
① 3行目
let areaCode = '150000';
天気の情報を取得するエリアを設定します。150000は新潟のエリアコードなので、新潟のエリアごとの天気情報を取得します。エリア番号を変えると他のエリアの天気情報の取得ができます。
② 6行目
let url = `https://www.jma.go.jp/bosai/forecast/data/forecast/${areaCode}.json`;
気象庁のWeb APIを使うためのリクエスト文を作成しています。
③ 10行目
const response = await fetch(url);
リクエストを気象庁のサーバに送り、結果(レスポンス)であるJSONデータを取得しています。
④ 32行目～40行目
document.getElementById("area").innerText =
json[0].timeSeries[0].areas[0].area.name;
//今日の天気
day = 1;
elem = document.getElementById(`day-0`);
elem.querySelector('.date').innerText = dateTimeFormat.format(new
Date(json[0].timeSeries[0].timeDefines[day]));
elem.querySelector('.weather').innerText =
json[0].timeSeries[0].areas[0].weathers[day];
elem.querySelector('.weather-image').setAttribute("src",
`https://www.jma.go.jp/bosai/forecast/img/${json[0].timeSeries[0].areas[0].weatherCodes[day]}.svg`);
elem.querySelector('.temp').innerText =
(json[1].timeSeries[1].areas[0].tempsMaxUpper[day]);
JSONに含まれている天気情報から今日の天気の情報を取得して、天気や気温など必要な情報をHTMLに書き込んでいます。
参
考
④の各行の行頭にある「elem.querySelector('.date')」の（ ）の中で、どの情報を表示するかがわかるようになっています。
（ ）の中と表示している項目の対応は次のとおりです。
-
.date ： 日付
-
.weather ： 天気予報
-
.weather-image ： 天気画像
-
.temp ： 気温
※天気画像や気温は時間帯によっては表示されない場合があります。
課題2-1 エリア番号を変えて天気を表示してみましょう
script.jsの3行目のエリア番号を変更して新潟以外の地域を表示させましょう。
ファイルを開く場合は、エディタのメニューから開くか、エディタにドラックしましょう。
エリア番号は下記から調べることができます。
表示されるエリアは、指定した県などエリアの中の天気予報の地域名が表示されます。
例えば「下越(下越)」であれば、新潟県の下越地方の「下越」が表示されています。
エリア番号を変更したら、index.htmlファイルを開きなおして天気情報を再表示させてください。
ブラウザに上手く表示されたらスクリーンショットを撮影して提出しましょう。
スクリーンショットが上手く撮影できない場合は、提出不要です。
選択されていません
対応形式：.jpg,.jpeg,.png
課題2-2 風速情報の表示を追加しましょう
表示されている天気に風速の情報を追加します。
以下の文をプログラムの41行目に追加して保存しましょう。
追加する文
elem.querySelector('.wind').innerText = json[0].timeSeries[0].areas[0].winds[day];
追加した時のプログラムは次のようになります。(一部抜粋)
風速情報を表示する文を入力し保存したら、index.htmlファイルを開きなおして天気情報を再表示させてください。
上手く表示されたらスクリーンショットを撮影して提出しましょう。
スクリーンショットが上手く撮影できない場合は、提出不要です。
選択されていません
対応形式：.jpg,.jpeg,.png,zip
※この再現版では提出は行いません（送信先は未接続です）
