【GAS】天気予報を表示するアプリを作る~テーブルで天気予報を表示~【第5回】
前回は、天気予報を取得する地域を選択できるようにしました。今回は、天気予報をテーブルに格納して整形したいと思います。
テーブルで天気予報を表示
今までは気温と降水確率だけを取得していましたが、今日明日の天気予報の詳細を取得できるようにします。
GAS側
doGetは表示に必要な分が増えました。
function doGet(){
var htmlTemplate = HtmlService.createTemplateFromFile('index');
htmlTemplate.selectarea = '';
htmlTemplate.date = '';
htmlTemplate.wetherCodes = '';
htmlTemplate.weathers = '';
htmlTemplate.winds = '';
htmlTemplate.waves = '';
htmlTemplate.pdate = '';
htmlTemplate.areas = '';
htmlTemplate.pops = '';
htmlTemplate.tdate = ['',''];
htmlTemplate.temps = ['',''];
return htmlTemplate.evaluate();
}
getWeatherでは、天気予報の取得や風、波など新規に取得しています。降水確率と気温は、後でやるので今回は前回までと同じ様に取得しています。天気コードも後で必要になるので、今回はコードを表示させるだけにしています。
function getWeather(area){
const weatherUrl = 'https://www.jma.go.jp/bosai/forecast/data/forecast/130000.json'
var weatherj = UrlFetchApp.fetch(weatherUrl);
var weather = JSON.parse(weatherj);
var data=[];
data[0] = [];
data[1] = [];
data[2] = [];
for(i=0;i<=1;i++){
//地域取得
let areas = weather[0]["timeSeries"][1]["areas"][area]["area"]["name"];
data[i][0] = areas;
//日付取得
let date = weather[0]["timeSeries"][0]["timeDefines"][i];
data[i][1] = date;
//天気コード取得
let weatherCodes = weather[0]["timeSeries"][0]["areas"][area]["weatherCodes"][i];
data[i][2] = weatherCodes;
//天気取得
let weathers = weather[0]["timeSeries"][0]["areas"][area]["weathers"][i];
data[i][3] = weathers;
//風取得
let winds = weather[0]["timeSeries"][0]["areas"][area]["winds"][i];
data[i][4] = winds;
//波取得
let waves = weather[0]["timeSeries"][0]["areas"][area]["waves"][i];
data[i][5] = waves;
}
for(i=0;i<=2;i++){
//降水確率日付取得
let pdate = weather[0]["timeSeries"][1]["timeDefines"][i];
data[i][6] = pdate;
//降水確率取得
let pops = weather[0]["timeSeries"][1]["areas"][area]["pops"][i];
data[i][7] = pops;
}
for(let i=0;i<=1;i++){
let tdate = weather[0]["timeSeries"][2]["timeDefines"][i];
let temps = weather[0]["timeSeries"][2]["areas"][area]["temps"][i];
data[i][8] = tdate;
data[i][9] = temps;
}
return data;
}
doPostも役割は変わりませんが、新規に取得した値を割り振っています。
function doPost(e){
var htmlTemplate = HtmlService.createTemplateFromFile('weathers');
htmlTemplate.selectarea = e.parameter.weather;
if(htmlTemplate.selectarea === "tokyo"){
var data = getWeather(0);
}
else if(htmlTemplate.selectarea === "N_izu"){
var data = getWeather(1);
}
else if(htmlTemplate.selectarea === "S_izu"){
var data = getWeather(2);
}
else if(htmlTemplate.selectarea === "ogasawara"){
var data = getWeather(3);
}
htmlTemplate.areas = data[0][0];
htmlTemplate.date = [data[0][1],data[1][1]];
htmlTemplate.weatherCodes = [data[0][2],data[1][2]];
htmlTemplate.weathers = [data[0][3],data[1][3]];
htmlTemplate.winds = [data[0][4],data[1][4]];
htmlTemplate.waves = [data[0][5],data[1][5]];
htmlTemplate.pdate = [data[0][6],data[1][6],data[2][6]];
htmlTemplate.pops = [data[0][7],data[1][7],data[2][7]];
htmlTemplate.tdate = [data[0][8],data[1][8]];
htmlTemplate.temps = [data[0][9],data[1][9]];
return htmlTemplate.evaluate();
}
HTML
テーブルを入れるので、始めの地域選択画面では表示させないように、ページを分けました。
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form method="post" action="https://script.google.com/macros/s/AKfycbzqs8G62mYTfyDqx9pLxkzYkTclgOUXr4rjKZOSaHMa/dev">
<label for="weather"><input type="radio" id="weather" name="weather" value="tokyo">東京地方</label>
<label for="weather"><input type="radio" id="weather" name="weather" value="N_izu">伊豆諸島北部</label>
<label for="weather"><input type="radio" id="weather" name="weather" value="S_izu">伊豆諸島南部</label>
<label for="weather"><input type="radio" id="weather" name="weather" value="ogasawara">小笠原諸島</label>
<input type="submit" value="送信">
</form>
</body>
</html>
テーブルを入れました。まだデータがそろっていないので、セルは後で整えたり直します。
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<table>
<tbody>
<tr>
<td colspan="11"><?= areas ?></td>
</tr>
<tr>
<td colspan="11"><?= date[0] ?></td>
</tr>
<tr>
<td colspan="3">日付</td>
<td colspan="4">今日 <?= date[0] ?></td>
<td colspan="4">明日 <?= date[1] ?></td>
</tr>
<tr>
<td rowspan="8"><?= areas ?></td>
<td colspan="2" rowspan="2">天気</td>
<td colspan="4"><?= weatherCodes[0] ?></td>
<td colspan="4"><?= weatherCodes[1] ?></td>
</tr>
<tr>
<td colspan="4"><?= weathers[0] ?></td>
<td colspan="4"><?= weathers[1] ?></td>
</tr>
<tr>
<td colspan="2">風</td>
<td colspan="4"><?= winds[0] ?></td>
<td colspan="4"><?= winds[1] ?></td>
</tr>
<tr>
<td colspan="2">波</td>
<td colspan="4"><?= waves[0] ?></td>
<td colspan="4"><?= waves[1] ?></td>
</tr>
<tr>
<td colspan="2" rowspan="2">降水確率(%)</td>
<td colspan="2"><?= pdate[0] ?></td>
<td colspan="2"><?= pdate[1] ?></td>
<td colspan="2"><?= pdate[2] ?></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"><?= pops[0] ?></td>
<td colspan="2"><?= pops[1] ?></td>
<td colspan="2"><?= pops[2] ?></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2">気温(℃)</td>
<td></td>
<td colspan="2"><?= tdate[0] ?></td>
<td colspan="2"><?= tdate[1] ?></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td colspan="2"><?= temps[0] ?></td>
<td colspan="2"><?= temps[1] ?></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
</tbody>
</table>
<br><br>
<form method="post" action="https://script.google.com/macros/s/AKfycbzqs8G62mYTfyDqx9pLxkzYkTclgOUXr4rjKZOSaHMa/dev">
<label for="weather"><input type="radio" id="weather" name="weather" value="tokyo">東京地方</label>
<label for="weather"><input type="radio" id="weather" name="weather" value="N_izu">伊豆諸島北部</label>
<label for="weather"><input type="radio" id="weather" name="weather" value="S_izu">伊豆諸島南部</label>
<label for="weather"><input type="radio" id="weather" name="weather" value="ogasawara">小笠原諸島</label>
<input type="submit" value="送信">
</form>
</body>
</html>
実行結果
これを実行すると以下の画面が表示されます。

地域を選んで送信すると、以下のようになります。

最後に
今回は、新たにいくつか天気の情報を取得して、テーブルに入れて表示しました。テーブルに入れましたが、このままだと見づらいので次回は、テーブルにCSSを設定します。
【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】天気予報を表示するアプリを作る【最終回】
ディスカッション
コメント一覧
まだ、コメントがありません