【GAS】電子レンジワット数で加熱時間を換算するwebアプリを作ってみた

##概要
GASで簡単にサーバーレスWEBアプリを公開できると言う事なので、練習がてら作ってみた。

自宅の電子レンジが730wと言う意味不明な出力で、お弁当なんかを温めるときの加熱時間が分からないから、自宅レンジでの加熱目安を教えてくれるアプリを作成。

まぁ、練習だしね^^;

##まずは完成画面
こちらが完成したwebアプリ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708687/b8b6a3f4-aac5-be3f-d1e2-7fed301d9dae.png)
自宅レンジのワット数をテキストボックスに入力。弁当ラベルのワット数をラジオボタンで選択し、ラベルの加熱時間をセレクトボックスで指定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708687/6b02811b-c9ee-552d-9937-9977e0fa32ed.png)
今回は500w,4:30を730wに換算してみる。
「計算する」をクリックすると・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708687/9cacc46e-bb11-5e6a-a588-ecf7873e6856.png)
できたー！
実にくだらない｡ﾟ(ﾟﾉ∀｀ﾟ)ﾟ｡ｱﾊﾊ. 
##コード
作成するのは、doGet関数、doPost関数、トップページのhtml、計算結果ページのhtml。

GetとかPostとか、詳細な説明は省略（と言うか素人リーマンには無理）。取りあえず、こんな風に書いたら動くんだって事が大切(-。－；)
###「index.html」トップページのhtml

```html
<!DOCTYPE html>
<html>

<head>
<base target="_top">
</head>

<body>
<h1>うちのレンジ何分？</h1>
<form method="post" action="公開したwebアプリのURL">

うちのレンジのワット数：
<input type="text" name="my"><br>

ラベルに記載のワット数：
<input type="radio" name="label" value="500" checked>500w
<input type="radio" name="label" value="1500">1500w<br>

ラベルに記載の加熱時間：
<select  name="min">  
<option  value="0" >0
<option  value="1" >1
<option  value="2" >2
<option  value="3" selected>3
<option  value="4" >4
<option  value="5" >5
</select>分
<select  name="sec">  
<option  value="0" selected>00
<option  value="10" >10
<option  value="20" >20
<option  value="30" >30
<option  value="40" >40
<option  value="50" >50
</select>秒<br><br>

<input type="submit" value="計算する">
</form>
</body>
</html>
```
タグの事が良く分からないから時間がかかったorz
完成した今でも、書き方が合ってるのか自信がない・・・。
###「コード.gs」doGetとdoPost

```javascript
function doGet() {
  
  //index.htmlをdoGet
  var toppage = HtmlService.createTemplateFromFile('index');
  return toppage.evaluate();

}

function doPost(e){

  //スプレッドシート使わないからいらない。何か出力したい時用。
  //var ss = SpreadsheetApp.openById('スプレッドシートのID');

  //index.htmlから文字列としてデータ取得
  var my = e.parameters.my.toString();
  var label = e.parameters.label.toString();
  var min = e.parameters.min.toString();
  var sec = e.parameters.sec.toString();
  
  //取得した文字列を数字に変換
  my = Number(my);
  label = Number(label);
  min = Number(min);
  sec = Number(sec);
  
  //計算
  var ratio = (label/my);
  var befor = (min*60)+sec;
  var after = befor*ratio;
  
  var remain = after%60;
  var newmin = (after-remain)/60;
  var newsec = Math.round(remain);
  
  //webアプリだとログ出力できない？ので、その代用。
  //ss.appendRow([my,label,min,sec,ratio,befor,after,remain,newmin,newsec]);
  
  //result.htmlをHtmlTemplateとして取得
  var resultpage=HtmlService.createTemplateFromFile('result');
  
  //resultpageに計算結果を受け渡し
  resultpage.newmin=newmin;
  resultpage.newsec=newsec;
  
  //resultpageへoutput
  return resultpage.evaluate();
}
```
方法はあるのかもしれないけど、webアプリとして動作させた時のログが出力できないので、ちゃんと動作しているかの確認用に各変数をスプレッドシートに書き出すようにした。完成後、不要になったのでコメントアウト^^)b

index.htmlからデータを受け取る時、一度文字列として取得してから数字に変換してるのは、最初から数字として取得する方法が分からなかったから（笑）
###「result.html」計算結果ページのhtml

```html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
うちのレンジでは<br>
<h3><?= newmin ?>分<?= newsec ?>秒</h3>
加熱してください。<br><br>
<a href="公開したwebアプリのURL">もう一度計算する</a>
</body>
</html>
```
doPostから受け取った数字を元に、加熱時間を表示。
「もう一度計算する」で再度トップページに移動。

##webアプリ導入
方法を紹介しているページはいっぱいあるので割愛！

###おしまい