【GAS】天気予報を表示するアプリを作る【最終回】

2022/06/30

前回は、画像を表示させることができたので、今日明日の天気予報を表示させるWEBアプリが完成しました。今回は、コードを全文載せて終わりとしたいと思います。

GAS

function doGet(){
  var htmlTemplate = HtmlService.createTemplateFromFile('index');
  return htmlTemplate.evaluate();
}
function get_jobj() {
  var FILE_ID = "JSONのドライブのファイルID";
  var file = DriveApp.getFileById(FILE_ID);
  var blob = file.getBlob();
  var data = blob.getDataAsString();
  var jobj = JSON.parse(data);
  return jobj;
}

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<weather[0]["timeSeries"][0]["timeDefines"].length;i++){
    //地域取得
    let areas = weather[0]["timeSeries"][0]["areas"][area]["area"]["name"];
    data[i][0]=areas;
    //日付取得 new Date()で日付形式に変換する
    let date = new 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;

    let pops1 = "-";
    let pops2 = "-";
    let pops3 = "-";
    let pops4 = "-";
    let tempsmin1 = "-";
    let tempsmax1 ="-";

    //降水確率取得
    if(i<2){
      for(j=0;j<weather[0]["timeSeries"][1]["timeDefines"].length;j++){
        let popsdate = new Date(weather[0]["timeSeries"][1]["timeDefines"][j]);

        if(date.getDate() == popsdate.getDate()){
          if(popsdate.getHours() == 0){
            pops1 = weather[0]["timeSeries"][1]["areas"][area]["pops"][j];
          }
          else if(popsdate.getHours() == 6){
            pops2 = weather[0]["timeSeries"][1]["areas"][area]["pops"][j];
          }
          else if(popsdate.getHours() == 12){
            pops3 = weather[0]["timeSeries"][1]["areas"][area]["pops"][j];
          }
          else if(popsdate.getHours() == 18){
            pops4 = weather[0]["timeSeries"][1]["areas"][area]["pops"][j];
          }
        }
      }
      data[i][6] = pops1;
      data[i][7] = pops2;
      data[i][8] = pops3;
      data[i][9] = pops4;
    //気温の取得
      let areas1 = weather[0]["timeSeries"][2]["areas"][area]["area"]["name"];
      for(j=0;j<4;j++){
        let tempsdate = new Date(weather[0]["timeSeries"][2]["timeDefines"][j]);
        if(date.getDate() == tempsdate.getDate()){
          if(tempsdate.getHours() == 0){
          tempsmin1 = weather[0]["timeSeries"][2]["areas"][area]["temps"][j];
          }
        else if(tempsdate.getHours() == 9){
          tempsmax1 = weather[0]["timeSeries"][2]["areas"][area]["temps"][j];
          }
        }
      }
      if(tempsmin1 == tempsmax1){
        tempsmin1 = "-";
      }
    data[i][10] = areas1;
    data[i][11] = tempsmax1;
    data[i][12] = tempsmin1;
    }
  }
  data[0][13] = weather[0]["publishingOffice"];
  data[0][14] = new Date(weather[0]["reportDatetime"]);
  return data;
}
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);
   }

  var jsond = get_jobj();

  htmlTemplate.areas = data[0][0];
  htmlTemplate.date = [data[0][1],data[1][1]];

  var img1="<img src = https://www.jma.go.jp/bosai/forecast/img/" +jsond[data[0][2]][0]+ ">";
  var img2="<img src = https://www.jma.go.jp/bosai/forecast/img/" +jsond[data[1][2]][0]+ ">";

  htmlTemplate.weatherCodes = [img1,img2];
  htmlTemplate.weathers = [data[0][3],data[1][3],data[2][3]];
  htmlTemplate.winds = [data[0][4],data[1][4],data[2][4]];
  htmlTemplate.waves = [data[0][5],data[1][5],data[2][5]];
  htmlTemplate.pops1 = [data[0][6],data[0][7],data[0][8],data[0][9]];
  htmlTemplate.pops2 = [data[1][6],data[1][7],data[1][8],data[1][9]];
  htmlTemplate.temps1 = [data[0][10],data[0][12],data[0][11],data[1][12],data[1][11]];
  htmlTemplate.publishingOffice = data[0][13];
  htmlTemplate.reportDatetime = data[0][14];

  return htmlTemplate.evaluate();
}

HTML

index
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form method="post" action="WEBアプリURL">
      <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
<style>
table , td, th {
	border: 1px solid #595959;
	border-collapse: collapse;
}
td, th {
	padding: 3px;
	height: 25px;
}
</style>
weathers
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
  </head>
  <body>
    <? var year = reportDatetime.getFullYear();
       var month = reportDatetime.getMonth()+1;
       var day = reportDatetime.getDate();
       var hours = reportDatetime.getHours();
     ?>
    <br>
    <table>
      <tbody>
        <tr>
          <td colspan="11"><? 
          output.append('<p>'+ year + "年" + month + "月" + day + "日" + hours +"時　" + publishingOffice + "　発表" + '</p>');
          ?></td>
          </tr>
          <tr>
            <td colspan="3">日付</td>
			<td colspan="4">今日　<? output.append(date[0].getDate()); ?>日</td>
			<td colspan="4">明日　<? output.append(date[1].getDate()); ?>日</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>00-06</td>
			<td>06-12</td>
			<td>12-18</td>
			<td>18-24</td>
			<td>00-06</td>
			<td>06-12</td>
			<td>12-18</td>
			<td>18-24</td>
		</tr>
		<tr>
			<td><?= pops1[0] ?></td>
			<td><?= pops1[1] ?></td>
			<td><?= pops1[2] ?></td>
			<td><?= pops1[3] ?></td>
			<td><?= pops2[0] ?></td>
			<td><?= pops2[1] ?></td>
			<td><?= pops2[2] ?></td>
			<td><?= pops2[3] ?></td>
		</tr>
		<tr>
			<td rowspan="2">気温(℃)</td>
			<td></td>
			<td colspan="2">朝の最低</td>
			<td colspan="2">日中の最高</td>
			<td colspan="2">朝の最低</td>
			<td colspan="2">日中の最高</td>
		</tr>
		<tr>
			<td><?= temps1[0] ?></td>
			<td colspan="2"><?= temps1[1] ?></td>
			<td colspan="2"><?= temps1[2] ?></td>
			<td colspan="2"><?= temps1[3] ?></td>
			<td colspan="2"><?= temps1[4] ?></td>
		</tr>
	</tbody>
</table>

<br><br>

    <form method="post" action="WEBアプリURL">
      <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>

実行結果サンプル

最後に

無事に完成しました。今日・明日の天気予報を表示させるだけの簡単なアプリではありますが、手探りでも、ようやくここまでたどり着けてほっとしています。もっとコードが短くできたり、もっと簡単に表示させることができるとは思いますが、独学ですのでご容赦ください。

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

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

Amazon
楽天

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

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

Posted by pyonnyan