【GAS】天気予報を表示するアプリを作る～テーブルで天気予報を表示～【第5回】

2022/06/23

前回は、天気予報を取得する地域を選択できるようにしました。今回は、天気予報をテーブルに格納して整形したいと思います。

テーブルで天気予報を表示

今までは気温と降水確率だけを取得していましたが、今日明日の天気予報の詳細を取得できるようにします。

GAS側

doGetは表示に必要な分が増えました。

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では、天気予報の取得や風、波など新規に取得しています。降水確率と気温は、後でやるので今回は前回までと同じ様に取得しています。天気コードも後で必要になるので、今回はコードを表示させるだけにしています。

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も役割は変わりませんが、新規に取得した値を割り振っています。

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

テーブルを入れるので、始めの地域選択画面では表示させないように、ページを分けました。

index
<!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>

テーブルを入れました。まだデータがそろっていないので、セルは後で整えたり直します。

weathers
<!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>

実行結果

これを実行すると以下の画面が表示されます。

実行結果1
実行結果1

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

実行結果2
実行結果2

最後に

今回は、新たにいくつか天気の情報を取得して、テーブルに入れて表示しました。テーブルに入れましたが、このままだと見づらいので次回は、テーブルにCSSを設定します。

詳解！ Google Apps Script完全入門 [第3版]

Amazon
楽天
Google Apps Script目的別リファレンス 実践サンプルコード付き

Amazon
楽天

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

PC,GASGoogle,Google Apps Script,API,天気予報アプリ

Posted by pyonnyan