【GAS】天気予報を表示するアプリを作る～地域を選択できるようにする～【第4回】

2022/06/22

前回は、取得した天気の情報をHTMLで表示しました。今回は、取得した天気予報の地域を選択できるようにしたいと思います。

Contents

1. 地域を選択
- 1.1. GAS側
- 1.2. HTML側
2. 実行結果
3. 最後に
4. 【GAS】天気予報を表示するアプリを作る～目次～

地域を選択

取得した天気予報は東京だけではなく、伊豆諸島北部、伊豆諸島南部、小笠原諸島の情報も含まれているので、そちらも選択したら表示できるようにしていきます。

GAS側

まずは、doGetです。HTML側に配慮して、tdateとtempsは配列にしています。要素が増えた以外は、変わりありません。

doGet

function doGet(){
  var htmlTemplate = HtmlService.createTemplateFromFile('index');
  htmlTemplate.selectarea = '';
  htmlTemplate.pdate = '';
  htmlTemplate.areas = '';
  htmlTemplate.pops = '';
  htmlTemplate.tdate = ['',''];
  htmlTemplate.temps = ['',''];
  return htmlTemplate.evaluate();
}

getWeatherです。前回は流用したのをそのまま使っていたのでgetMessegeだったと思いますが、天気を取得するのが主なので名前を変更しました。

doPostからareaという要素を受け取っています。これは、エリアを判別するコードで、jsonの中身から判断しています。0番目なら東京、1番目なら伊豆諸島北部のデータが受け取れます。

returnする関数をひとつにするために配列を使っています。前回はconsole.logしていましたが、その内容を変数にいれて、最後にdataに格納しています。

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 pdate;
  var areas;
  var pops;
  var tdate;
  var temps;
  var data=[];

  data[0] = [];
  data[1] = [];
  data[2] = [];

  for(let i=0;i<=2;i++){
    pdate = weather[0]["timeSeries"][1]["timeDefines"][i];
    areas = weather[0]["timeSeries"][1]["areas"][area]["area"]["name"];
    pops = weather[0]["timeSeries"][1]["areas"][area]["pops"][i];

    data[i][0] = pdate;
    data[i][1] = areas;
    data[i][2] = pops; 
  }
  for(let i=0;i<=1;i++){
    tdate = weather[0]["timeSeries"][2]["timeDefines"][i];
    temps = weather[0]["timeSeries"][2]["areas"][area]["temps"][i];

    data[i][3] = tdate;
    data[i][4] = temps;
  }

  return data;
}

doPostは、前回はなかった要素です。これも以前のものを流用して作りました。

まず、selectareaにフォームから値を受け取って、if文で判別してエリアのコードをgetWeatherに渡しています。getWeatherで取得したdataをこちらの変数dataに入れて、htmlTemplateのそれぞれの要素に格納しなおしています。

doPost

unction doPost(e){
   var htmlTemplate = HtmlService.createTemplateFromFile('index');
   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.pdate = [data[0][0],data[1][0],data[2][0]];
  htmlTemplate.areas = data[0][1];
  htmlTemplate.pops = [data[0][2],data[1][2],data[2][2]];
  htmlTemplate.tdate = [data[0][3],data[1][3]];
  htmlTemplate.temps = [data[0][4],data[1][4]];
  return htmlTemplate.evaluate();
}

HTML側

今回は、フォームが追加になり、受け取った要素を表示させる部分も変更しています。

降水確率と気温で表示の方法が異なりますが、どっちの表示方法も覚えておくといいと思います。

tdateとtempsがGASのdoGetの時に配列になっていましたが、この表示の仕方をするとundefinedが表示されてしまうので、GASの方で配列に空白を入れて処理しています。

index

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <div>
      <?= selectarea ?><br>
    </div>
    地方：<?= areas ?><br>
    <p>降水確率</p>
    <?= pdate[0] ?>：<?= pops[0] ?><br>
    <?= pdate[1] ?>：<?= pops[1] ?><br>
    <?= pdate[2] ?>：<?= pops[2] ?><br>
    <?
       output.append('<p>'+ '気温：' +'</p>');
       for(let i=0;i<=1;i++){
       output.append('<p>'+ tdate[i] +'：'+ temps[i] +'</p>');
       }
    ?>
    <form method="post" action="スクリプトの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>