スプレッドシート＋GASでWEBアプリを作成！入力と出力を実現！

スプレッドシート＋GASでWEBアプリを作成！入力と出力を実現！
フォーマットできること
サンプルファイル
コードの紹介
1. コード.gs
2. index.html
ウェブアプリの作り方
まとめ

スプレッドシート＋GASでWEBアプリを作成！入力と出力を実現！

<スポンサーリンク>

前々から興味があったWEBアプリですが、
どうもこうも覚えることが多すぎて、手が付けられていなかったのですが、

今回、「非常に簡単なフォーマットを作成」しましたので、
展開していきたいと思います！！

できることは、

①WEBアプリからスプレッドシートに入力

②GASを走らせる

③答えをウェブアプリに戻す

・スプレッドシートの計算式をそのまま利用できる
・GASもそのまま使用できる。

ということで、非常に便利なフォーマットだと思いますので、
ぜひ使ってみてください！

フォーマットできること

フォーマットできることは、下記の通りで、

・インプットに入れた数字をスプレッドシートのセルに入力し、
・違うセルで計算された結果をアウトプットで返す。
・間に他のGASのコード(今回は日付を入力)をかます。

という形になります。

↓のインプットに値を入力して、計算するを押してください。

サンプルファイル

サンプルファイルをコピー

コードの紹介

コードは、
・コード.gas
・index.html
で構成されています。

コード.gs

myfunctionはおまけなので無視して頂いて、

大切なのは、

・doGet
・input

となります。

function myfunction(ID){
 
    var ss = SpreadsheetApp.openById(ID);
    var S1 = ss.getSheetByName('DB'); 
    var dt = new Date();
    var y = dt.getFullYear();
    var m = ("00" + (dt.getMonth()+1)).slice(-2);
    var d = ("00" + dt.getDate()).slice(-2);
    var result = "" + y + "年" + m + "月" + d+ "日です";
    S1.getRange(10,2).setValue(result)
 
}
 
function doGet(e){
 
  var ID = SpreadsheetApp.getActiveSpreadsheet().getId()
  Logger.log(ID);
 
  var html =  HtmlService.createHtmlOutputFromFile("index")
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  var content = html.getContent().replace(/%ID%/,  ID );
  return HtmlService.createHtmlOutput(content)
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);;
}
 
 
function input(I1,I2,I3,I4,I5,ID){ //リターンを持つ。try catchしてこいつがちゃんと判断する
  try{
    var ss = SpreadsheetApp.openById(ID);
    var S1 = ss.getSheetByName('DB'); 
    S1.getRange(3,2).setValue(I1);
    S1.getRange(3,3).setValue(I2);
    S1.getRange(3,4).setValue(I3);
    S1.getRange(3,5).setValue(I4);
    S1.getRange(3,6).setValue(I5);
 
    myfunction(ID);
 
  }
  catch(e) {
    return "失敗";
    }
 
    var KAI=[]
 
    var O1=S1.getRange(6,2).getValue();
    var O2=S1.getRange(6,3).getValue();
    var O3=S1.getRange(6,4).getValue();
    var O4=S1.getRange(6,5).getValue();
    var O5=S1.getRange(6,6).getValue();
    var O6=S1.getRange(10,3).getValue();
 
    KAI=[O1,O2,O3,O4,O5,O6]
 
  return KAI;
 
}
 
 
function sample(){
 
  var Sid = SpreadsheetApp.getActiveSpreadsheet().getId()
  Logger.log(Sid);
 
}

index.html

htmlには、

・最初の入力部分と、
・javascriptで、結果を表示する部分

に分かれています。

actionには各自デプロイして作成されたWEBアプリのURLを入れてください。

<!DOCTYPE html>
<html>
  <script>
    function posting() {
      const id = document.getElementById("id").value;
      const I1 = document.getElementById("input1").value;
      const I2 = document.getElementById("input2").value;
      const I3 = document.getElementById("input3").value;
      const I4 = document.getElementById("input4").value;
      const I5 = document.getElementById("input5").value;
 
      document.getElementById("response").innerHTML = "<br>時間がかかります少々お待ちください・・・<br>完了後ここに結果が表示されます"
 
      google.script.run.withSuccessHandler(writeResult).input(I1,I2,I3,I4,I5,id);
 
    }
    function writeResult(message) {
      document.getElementById("response").innerHTML =
       "<br>O1 = " + message[0] +
       "<br>O2 = " + message[1] +
       "<br>O3 = " + message[2] +
       "<br>O4 = " + message[3] +
       "<br>O5 = " + message[4] +
       "<br>O6 = " + message[5] ;
    }
  </script>
  <body>  
　　 <form method="post"  action="https://script.google.com/macros/s/AKfycbyDU2dmNBIUo4AL_LceqhK08nihwIhb4TzwdbzYe8nLSkR3XG2o06Zmu-ovVSR1e8_lnQ/exec"> <!-- ←この部分をデプロイしたWEBアプリのURLに変更 -->
 
 
　　<div>
    <label for="fr">インプット1</label>
    <input type="text" id="input1" name="in1" >
　　</div>
　　<div>
    <label for="fr">インプット2</label>
    <input type="text" id="input2" name="in2" >
　　</div>
　　<div>
    <label for="fr">インプット3</label>
    <input type="text" id="input3" name="in3" >
　　</div>
　　<div>
    <label for="fr">インプット4</label>
    <input type="text" id="input4" name="in4" >
　　</div>
　　<div>
    <label for="fr">インプット5</label>
    <input type="text" id="input5" name="in5" >
　　</div>
　　<div>
    <input type="hidden" id="id" value=%ID%>
　　</div>
    <div class="button">
    <button type="button" onclick="posting()">検索する</button>
    </div>
   </form>
   <div id="response">
   </div>
  </body>
</html>

ウェブアプリの作り方

ウェブアプリの作り方は様々なサイトに載っているので割愛します。

まとめ

ここまでこぎつけるのに、丸二日間かかりました。。。。

特に、

・ウェブアプリを自分のブログにiframeで埋め込む
・更にボタンを押して値を更新したら、その画面内で値を更新する

この2つに手こずりましたので、皆様の参考になれば幸いです。。