押したボタンを見分ける Google Apps Script 備忘録

#目的は
FORM の SUBMIT ボタンを色々置きたい時の方法です．
Google Apps Scriptでの利用を説明します．

そもそももっと優れたやり方があるのかもしれません，
セキュリティとかはなんとも言えません．
それでも，ボタンを並べたいときもあります，タブン

##画面の具合とHTML側コード
入力フォームはこんなかんじです．

FORM部分のみ

<form method="post" action="https://script.google.com/macros/s/~~yourAddress~~/dev"> 
    <br>
    in1 &nbsp&nbsp&nbsp 
      <input type="text" name="inDat" value="<?=Dat0?>"></input><br>
    in2 &nbsp&nbsp&nbsp 
      <input type="text" name="inDat" value="<?=Dat1?>"></input><br>
    key &nbsp&nbsp 
      <input type="text" name="inDat"></input><br>
    name
      <input type="text" name="inDat"></input><br>
    code &nbsp
      <input type="text" name="inDat"></input><br>
    date &nbsp
      <input type="text" name="inDat"></input><br>
    <br>
    <input type="submit" name="sub1" value="INPUT1" ></input><br>
    <input type="submit" name="sub2" value="INPUT2" ></input><br>
    <input type="submit" name="sub3" value="INPUT3" ></input><br>
    <br><br>
    <input type="submit" name="subb" value="SET1" ></input><br>
    <input type="submit" name="subb" value="SET2" ></input><br>
    <input type="submit" name="subb" value="SET3" ></input><br>
    <br><br>
    <input type="button" onclick="inc()" value="INC"></input><br>
    <br>
    <input type="button" onclick="dec()" value="DEC"></input><br>
    <br>  
  </form>

submitに nameとvalueを決めています．
INPUT1～3は nameがそれぞれ sub1, sub2, sub3 でvalueも INPUT1,2,3と分けました．

SET1～3は nameはsubbで同じ， valueが SET1,2,3としてあります．

入力部分のデータをPOSTで送って，一応 SpreadSheet に書き込むようにしてます．

##GAS側

class sstest{
//入力フォームのデータをやりくりするクラス
  constructor(key, name, code, date){
    this.key  = key;
    this.name = name;
    this.code = code;
    this.date = date;
  }

  isEmpty(){
    if(this.key.length = 0){
      return 1;
    }
    return 0;
  }

//まだ使っていないがhtmlオブジェクトに値を返すために用意
  setElem( html ){
    html.key  = this.key;
    html.name = this.name;
    html.code = this.code;
    html.date = this.date;
    return html;
  }

//押したボタンに応じて以下のいずれかの文字列を追加をする．
  arrange1(){
    this.name = this.name + "(20)";
  }

  arrange2(){
    this.name = this.name + "(30)";
  }

  arrange3(){
    this.name = this.name + "(無職)";
  }

  nop(){
    this.name = this.name
  }

}

大事なdoPOST

function doPost(e){
  var in1 = e.parameters.inDat[0].toString();
  var in2 = e.parameters.inDat[1].toString();
  //全部表示
  console.log(e);
  //inDatが取れているか
  console.log("myTest-",in1, in2);


  //入力ページへの返却
  var html = HtmlService.createTemplateFromFile("index");
  html.Dat0 = in1;
  html.Dat1 = in2;

  //sstestを作成
  var inst = new sstest( e.parameters.inDat[2], e.parameters.inDat[3], e.parameters.inDat[4], e.parameters.inDat[5]);
  console.log(inst);

//INPUTボタン側の操作
  if(e.parameters.sub1!=null){
    inst.arrange1();
  }
  if(e.parameters.sub2!=null){
    inst.arrange2();
  }
  if(e.parameters.sub3!=null){
    inst.arrange3();
  }

//SETボタン側の操作
  if(e.parameters.subb == "SET1"){
    inst.arrange1();
  }else if(e.parameters.subb == "SET2"){
    inst.arrange2();
  }else if(e.parameters.subb == "SET3"){
    inst.arrange3();
  }else{
    inst.nop();
  }


  //SpreadSheet
  var ss = openSS();
  ss.appendRow([inst.key, inst.name, inst.code, inst.date]);
  
  return html.evaluate();
}

その他コード

function openSS() {
  const SHEET_ID = "~~yourSheetID~~";
  var spreadSheet = SpreadsheetApp.openById(SHEET_ID).getSheetByName("Sheet1");
  return spreadSheet;
}

function doGet(){
  var html = HtmlService.createTemplateFromFile("index");
  //とりあえずデフォルトをいれてみる
  html.Dat0 = "111";
  html.Dat1 = "222";

  return html.evaluate();
}

##実行結果(INPUT1~3ボタン)

INPUTボタンのほうでそれぞれ実行してみたところ，
ちゃんと名前は編集されてはいりましたね．

実行ログより，

INPUT1を押したとき---
parameters: 
   { inDat: [ '111', '222', 'S1234', 'さとう', 'SIO', '6/7' ],
     sub1: [ 'INPUT1' ] },～

INPUT2を押したとき---
parameters: 
   { inDat: [ '111', '222', 'S321', 'さとう', '塩', '6/7' ],
     sub2: [ 'INPUT2' ] },

INPUT3を押したとき---
parameters: 
   { sub3: [ 'INPUT3' ],
     inDat: [ '111', '222', 'S54123', 'さとう', '塩', 'KOSYO' ] }

//INPUTボタン側の操作
  if(e.parameters.sub1!=null){
    inst.arrange1();
  }
  if(e.parameters.sub2!=null){
    inst.arrange2();
  }
  if(e.parameters.sub3!=null){
    inst.arrange3();
  }

e.parameters.にそれぞれsub1~3が入っているかどうかでどのarrangeを実行するかを切り替え．
なんとも乱暴な方法にも思える．
本当はtryに入れた方がいいような気もしますが，これでもできますね．

##実行結果(SET1~3ボタン)

続けてSET1~3でも実行してみた結果．

こちらもログから，

SET1を押したとき---
parameters: 
   { inDat: [ '111', '222', '1212', 'しお', '胡椒', '6/7' ],
     subb: [ 'SET1' ] } }

SET2を押したとき---
parameters: 
   { inDat: [ '111', '222', '4321', '塩', '胡椒', '6/7' ],
     subb: [ 'SET2' ] },

SET3を押したとき---
parameters: 
   { inDat: [ '111', '222', '4649', '塩', 'ごま', '6/7' ],
     subb: [ 'SET3' ] },

こちらのやり方だとすべてのボタンで name="subb"になっているので，
どのPOSTにも subb が入ってきます
ただし，その中身が異なる．

//SETボタン側の操作
  if(e.parameters.subb == "SET1"){
    inst.arrange1();
  }else if(e.parameters.subb == "SET2"){
    inst.arrange2();
  }else if(e.parameters.subb == "SET3"){
    inst.arrange3();
  }else{
    inst.nop();
  }

e.parameters.subb を if に入れているので多少煩雑ですが，
ちゃんと取り出して使うならこっちのほうがスッキリするようにも思います．

#まとめ

やりました！ いっぱいボタン置いてもどれを押したのかわかりました！
INPUT3もしくはSET3を押せば無職になれる('ω')ノ

ずばりこの方法について書いてある記事が見当たらなかったので書いてみましたが，
じつは禁忌を犯していたりするのだろうか，という不安．

次は HTML側に値を渡したり =VARNAME?> で表示したりという部分と
クラスで躓いた部分を書いておこうと思います．