（GASでHTML）HTMLのフォームデータをGASで受け取り、内容により違うHTMLページを返す。

# この記事について

前回の記事に続き、GASでHTMLを学習しています。
この記事ではGASで作成したHTML内のフォームを作成し、その情報をGASで受け取る方法について簡単なWebアプリを作成して学習します。

# 作成するWebアプリのフロー
ケースとして下記のようなアンケートを集計するWebアプリを作成します。

あなたが好きなのはどっち？という質問に対し、
回答をスプレッドシートに記録し、
猫を選んだ回答者には、[cat.api](https://thecatapi.com/)を使って猫の画像のHTMLを返す、
犬を選んだ回答者には、[dog.api](https://dog.ceo/dog-api/)を使って犬の画像のHTMLを返す。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/ba73dd0c-e298-e4cb-c717-d507e4a6f00e.png)

# この記事で学習すること
- フォームデータをGASで受け取ってスプレッドシートに記録する方法。
- フォームデータをGASで受け取って内容によって違うHTMLを表示する方法。


# まずはフォームデータを受け取って確認してみる。

index.htmlに下記のようなフォームを作成しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/3a676c18-e64d-88bd-78e6-8acd55a05dd4.png)

```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  
  <body>
  <form method="post" action="https://script.google.com/macros/s/AKfycbxaSHQaLCn38shc7LPIYVy-P4kFj0Wzdj8aE-eHWau-8Q-5XMae/exec">
    <p>
      <label>名前 <input type="text" name="name"></label>
    </p>
    <p>
     <label><input type="radio" name="sex" value="male">男</label>
     <label><input type="radio" name="sex" value="female">女</label><br />
    </p>
    <p>
     <label><input type="radio" name="animal" value="cat">猫</label>
     <label><input type="radio" name="animal" value="dog">犬</label><br />
    </p>
    <p>
      <input type="submit" value="送信">
    </p>
  </form>
  </body>
</html>
```
```Javascript:main.gs
function doGet() {
  var html = HtmlService.createTemplateFromFile("index").evaluate();
  html.setTitle("jojiのテストサイト");
  html.setFaviconUrl("https://drive.google.com/uc?id=13wY_LsPFagcYs2UwCAkn4WeBNS3hnu__&.ico");
  return html;
}
```

ここまでで、index.htmlを表示できるようになります。
ポイントとしては、formタグのactionにGASのWebアプリのURLを渡すことです。
formのメソッドをpostとしましたので、フォームの送信ボタンを押すとGASにPOSTメッセージが返ってくるようになります。


現在main.gsにはPOSTメッセージの処理の記述がないので、このままの状態でフォームの送信ボタンを押しても下図のようなエラー画面が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/5c97cbf9-a7c2-2838-5e6d-548c89a4a28f.png)

このエラーmsgにもあるようにPOSTメッセージに対するアクションはGASのdoPost関数にて行います。
作成してみます。

```Javascript:main.gs
function doPost(e) {  
  //処理を記述
}  
```

フォームの情報が受け取れるように、関数に引数を取りましょう。（eとするのが好まれているようです。）
どんなメッセージが返ってくるのか確認するために、スプレッドシートへ書き出してみましょう。

## フォームの情報をスプレッドシートに書き込む

```javascript

function doPost(e) {
  var st =  SpreadsheetApp.openById("スプレッドシートのID").getSheetByName("シート1");
  st.getRange(1,1).setValue(e);
}
```

返ってきたデータをわかりやすく改行すると下記のようになります。

```Javascript:フォームから送られてきたデータ

{
  parameter = {
    sex=male,
    name=じょーじ,
    animal=dog
  },
  contextPath=, [省略]}, postData=FileUpload
}
```



```Javascript:main.gs
function doPost(e) {  
  var st =  SpreadsheetApp.openById("スプレッドシートのID").getSheetByName("st1");
  st.getRange(1,1).setValue(e);
}  
```


フォームの送信を行ったあと、スプレッドシートを確認してみます。
図のような情報が返ってきました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/7f49f883-e542-bd11-019a-91c0373e2a0a.png)

```Javascript:スプレッドシートに返ってきたデータ

{
  parameter = {
    sex=male,
    name=じょーじ,
    animal=dog
  },
  contextPath=, [省略]}, postData=FileUpload
}
```

ちなみに、dopostに戻り値の記述がないため、ブラウザには下図のようなメッセ―が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/fd14295f-efdf-0214-1943-d43f53351fd9.png)




# 実装

下記が完成コードです。

[完成したWebアプリ](https://script.google.com/macros/s/AKfycbxaSHQaLCn38shc7LPIYVy-P4kFj0Wzdj8aE-eHWau-8Q-5XMae/exec
)

[集計結果記録用スプレッドシート](https://docs.google.com/spreadsheets/d/1wUb7rm-IGclmxYsAxd2itv2Fp8Rek_96_94dbghO3xg/edit?usp=sharing)


## main.gs
```Javascript
function doGet() {
  var html = HtmlService.createTemplateFromFile("index").evaluate();
  html.setTitle("jojiのテストサイト");
  html.setFaviconUrl("https://drive.google.com/uc?id=13wY_LsPFagcYs2UwCAkn4WeBNS3hnu__&.ico");
  return html;
}

function doPost(e) {  
  var st =  SpreadsheetApp.openById("1wUb7rm-IGclmxYsAxd2itv2Fp8Rek_96_94dbghO3xg").getSheetByName("st1");
  var animal = e.parameter.animal;
  var lastrow = st.getLastRow()+1;
  st.getRange(lastrow,1).setValue(e.parameter.name);
  st.getRange(lastrow,2).setValue(animal);
  st.getRange(lastrow,3).setValue(e.parameter.sex);
  
  if (animal == "cat"){
    var html = HtmlService.createHtmlOutputFromFile("cat");
  }else if (animal == "dog"){
    var html = HtmlService.createHtmlOutputFromFile("dog");
  }else{
    var html = HtmlService.createHtmlOutputFromFile("undifine");
  }     
  return html;
}
```


## HTML

```html:dog.html

<!DOCTYPE html>
<html>
<body>
  <script>
    const url = "https://dog.ceo/api/breeds/image/random";
    
    function fetchDogImagePath(url){
        return fetch(url).then( (res) => res.json());
    }
    
    async function fetchDogImage (url){
        const response = await fetchDogImagePath(url);
        const imageElement = document.createElement('img');
        imageElement.src = response.message;
        document.body.appendChild(imageElement);
        }
    fetchDogImage(url);
  </script>
</body>
</html>
```

```html:cat.html

<!DOCTYPE html>
<html>
<body>
  <script>
    const url = "https://api.thecatapi.com/v1/images/search";
    
    function fetchCatImagePath(url){
        return fetch(url).then( (res) => res.json());
    }
    
    async function fetchCatImage (url){
        const response = await fetchCatImagePath(url);
        const imageElement = document.createElement('img');
        imageElement.src = response[0].url;
        document.body.appendChild(imageElement);
        }
    fetchDogImage(url);
  </script>
</body>
</html>
```

```html:undefine.html

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1>データを読み取れませんでした。</h1>
  </body>
</html>
```




![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/888fa738-bf99-8ba0-e09d-c31dafe8d7c6.png)






# （補足）CAT.APIの登録方法

CAT.APIについて簡単に説明補足します。
上記のアプリのような使い方では、CAT.APIのAPIキーは不要ですが、APIキーを取得するともっとできることが増えるようです。

そのapiキーの取得方法について紹介します。
（DOG.APIについては私の別の記事で紹介しています。）

[CAT.API](https://thecatapi.com/)　へアクセスします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/188c1ed2-3dce-aa75-688d-647b26ef78ed.png)
signup for freeをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/d1dfb370-cfed-2ebe-e811-731c48c0579d.png)
メールとアプリの説明を入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/b6a0baf0-710f-1cf4-e49f-21372b9e9870.png)
下図のメッセージが表示されます。メールを送信したとのことなのでメールを確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/71421dd8-ad1c-128f-b648-42c9766645d5.png)
メールを確認すると、メールにAPIkeyが記載されていました。キーをコピ―しておきます。



前の画面に戻り「Document」をクリックして、ドキュメントを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/ea4fad22-b0e6-2fe7-1b08-b46fb6ad5638.png)


## CAT.APIのエンドポイント
ドキュメントを確認すると下記のエンドポイントへメッセージを送るとjsonが返ってくるようです。
`https://api.thecatapi.com/v1/images/search`

ブラウザでURLにアクセスすると、下記のようなjsonが返ってきます。jsonのURLプロパティに猫の画像URLが格納されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342467/4ac04f8f-abba-87c1-39e8-c58b07a217e1.png)